Optical Refraction, Spring Physics, and 3D Scale in Cultural Heritage Web Engineering: Field Notes from K R Nariman 3D and Handloom Haat v53
When AI coding agents build cultural heritage or craft websites without physical constraints, they default to the same crutches: identical bordered cards stacked for thousands of pixels on mobile, flat blur overlays that smear background textiles into grey, and sculpture stages where works of very different size render at the same height. Over two days we folded five open-source UI and WebGL patterns into two staging builds, the K R Nariman bronze sculpture archive (v10 stage) and Handloom Haat v53, and measured what they did. Every number below is copied from the build reports and the files on disk, named in the Sources list.
The five frontend techniques we field-tested
| Technique | Source | Where we applied it |
|---|---|---|
1. SVG <feTurbulence> + <feDisplacementMap> + <feSpecularLighting> liquid glass | Ania Kubow (@aniakubow), a zero-JS refraction filter in a reel of 1 September 2026 | #rb-liquid-glass on the header, design switcher, 3D controls and stage chrome of the K R Nariman v10 build; the filter is inline in index.html and site.js writes it into every other page (91 HTML pages in the build, 80 of them works pages) |
| 2. 3-point bronze lighting and PBR tokens | CloudAI-X/threejs-skills (MIT, 3,622 stars on 18 Oct 2026) and emilkowalski/skills | key, warm rim and floor bounce gradients plus --bronze-roughness: 0.32 and --bronze-metalness: 0.88 tokens in site.css |
| 3. Spring easing and View Transitions | emilkowalski/skills + Jakubantalik/transitions.dev | --spring-out: cubic-bezier(0.22, 1, 0.36, 1) and document.startViewTransition on the studio stage (260 ms) |
| 4. Unboxed editorial flow and mobile compaction | Field Notes No. 3 (the Webby element matrix) + Ashutoshx7/VengeanceUI (MIT, 1,222 stars) | Handloom Haat v53: 51 bordered boxes to 0, mobile home height cut by 63.3% |
| 5. Deterministic HTML-to-MP4 rendering | heygen-com/hyperframes (Apache-2.0, 66,577 stars on 18 Oct 2026) | installed as a studio skill (hyperframes plus 8 sub-skills); not measured in this note |
Standard CSS glassmorphism (backdrop-filter: blur(12px)) is a low-pass convolution that dissolves the weave of a brocade or the highlights of a bronze behind a panel. In the reel's own words, "Blur averages the pixels behind your panel. Real glass bends them." In the K R Nariman v10 build (index.html at 32,955 bytes and 414 DOM nodes, 10 of them added by the filter and two scale bars) the filter #rb-liquid-glass chains three stages, copied from site.js:
- Low-frequency noise:
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" seed="7"/> - Lateral refraction:
<feDisplacementMap scale="14" xChannelSelector="R" yChannelSelector="G"/> - Specular edge catch:
<feSpecularLighting surfaceScale="2" specularConstant="0.75" specularExponent="20" lighting-color="#FAF5EA">with<fePointLight x="-120" y="-160" z="180"/>, composited back atk3="0.18"
It is applied as backdrop-filter: url(#rb-liquid-glass) blur(6px) saturate(160%) to the header, design switcher, command box, process panels, adjacent-works links, 3D controls and gallery stage. The build's Playwright check requires every <img> to report filter: none and mix-blend-mode: normal, so the sculpture photographs are never filtered; that check passed in all 16 states (see Finding 3).
The Safari fallback we ship
The reel pitches backdrop-filter: url(#filter) as the iOS 26 look, but the reel breakdown in our record warns that WebKit on iOS and macOS drops url(#svg-filter) inside backdrop-filter, while Chromium and Firefox render the displacement. A single unprefixed declaration leaves iPhone users with a plain transparent panel. The shipped CSS gates the filter behind @supports and gives WebKit a plain blur, copied from site.css:
@supports (backdrop-filter:url(#rb-liquid-glass)) or (-webkit-backdrop-filter:url(#rb-liquid-glass)){
.site-header, body.home .site-header, .design-switcher, .switcher-group,
.switcher-palettes, .cmd-box, .process-aside, .process-stage,
.adjacent-works a, .studio-3d-controls, .g3d .stage{
backdrop-filter:url(#rb-liquid-glass) blur(6px) saturate(160%);
-webkit-backdrop-filter:url(#rb-liquid-glass) blur(6px) saturate(160%);
box-shadow:inset 0 1px 0 rgb(250 245 234 / .36);
}
}
@supports not ((backdrop-filter:url(#rb-liquid-glass)) or (-webkit-backdrop-filter:url(#rb-liquid-glass))){
.studio-3d-controls{
backdrop-filter:blur(10px) saturate(135%);
-webkit-backdrop-filter:blur(10px) saturate(135%);
}
}
One honest limit: the fallback branch covers .studio-3d-controls only. The other surfaces keep their base styles on WebKit.
scroll-snap-type: x mandatory), removes the hero scrim (display: none) so the film plays unoccluded, and drops every bordered box. The build passed our release gates: 0 stock-palette hits across 263 files, 1,789 payload files with 0 hygiene failures and 10 of 10 routes with footer parity.| Metric (headless Chromium) | Live baseline (handloomhaat.in) | Handloom Haat v53 | Delta |
|---|---|---|---|
Mobile 390x844 /index.html height | 7,719 px | 2,834 px | -63.3% (-4,885 px) |
Mobile 390x844 /visit.html height | 3,840 px | 2,503 px | -34.8% (-1,337 px) |
Desktop 1440x900 /index.html height | 5,120 px | 4,352 px | -15.0% (-768 px) |
Desktop 1440x900 /gallery.html height | 4,180 px | 3,763 px | -10.0% (-417 px) |
Bordered boxed cards (1px solid containers) | 51 | 0 | -100% |
| Hero caption contrast ratio | 4.6:1 to 8.2:1 over a variable scrim | 14.18:1 | above WCAG AAA (7:1) |
| Console and page runtime errors | 0 | 0 | clean |
CloudAI-X/threejs-skills, emilkowalski/skills and Jakubantalik/transitions.dev to the K R Nariman v10 build addressed three persistent museum-web problems:| Subsystem | Configuration in site.css and the build report | Playwright result |
|---|---|---|
| 3-point bronze studio lighting | key light at 48% 38%, warm rim at 66% 22%, floor bounce at 50% 92% (--key-x, --key-y, --rim-x, --rim-y tokens); --bronze-roughness: 0.32, --bronze-metalness: 0.88 | every <img> reports filter: none |
| Real-centimetre scale comparator | spring easing --spring-out: cubic-bezier(0.22, 1, 0.36, 1); at 1440x900 a 33 cm work renders at 41.6 px and the 68 cm Earth, Wind and Water at 85.7 px beside a 135 cm child (170.1 px) and a 170 cm adult (214.2 px) | proportional: 85.7 / 41.6 = 2.06, as 68 / 33 = 2.06 |
| View Transitions stage swap | view-transition-name: studio-stage, 260 ms with var(--spring-out) | TOTAL STATES 16 FAIL 0: home at 320, 360, 390 and 1440 px wide at 100%, 115% and 130% font scale plus the gallery at the four widths; jump=0.0px across all 7 sculptures, sw==cw, 0 console errors |
What we deployed
The progressive SVG liquid glass stack (#rb-liquid-glass with its @supports fallback), the 3-point bronze lighting and proportional scale comparator, and the startViewTransition stage choreography are in the K R Nariman v10 build; the unboxed mobile compaction is in the Handloom Haat v53 build. Both are staging builds measured locally. Nothing in this note describes a live deployment.
Sources
All figures above are copied from our own build records: the K R Nariman v10 build report and the stylesheet, script and home page of that build (filter primitives, selectors, tokens, byte count, page counts, the 16-state Playwright result and the scale bar heights); the Handloom Haat v53 measurement report of 19 October 2026 (every Handloom Haat figure and gate line); the reel breakdown of 19 October 2026 (the transcript quote and the WebKit caveat); and the repository notes of 18 and 19 October 2026 (stars and licences). Corrections welcome.