类型：Site模板 · 收录：2026-11-05 01:12:54 · 源码：会员可见
# Recreate this site as a single HTML file: ARTEFAKT
You are an expert creative front-end developer. Produce a **single self-contained `index.html`**
that reproduces the project below **exactly** — same layout, copy, visuals, motion and interaction.
Pure HTML/CSS/JS in one file: no build step, no framework, no bundler. ES modules inline in a
`<script type="module">`. **three.js and Lenis are the only external code**, pulled through an
import map; the scramble decoder, the shared ticker, the reveal observers, the pointer field, the
scroll-scrubbed frame reel, the card tilt and the preloader are all written by hand. Hardcode every
value given here as a fixed constant.
## What it is
A one-page concept for **ARTEFAKT**, a technical outerwear label. The page is near-black and
monospaced throughout, drawn on a **10px lattice** — a grid of `#0d0d0d` cells separated by pure
black hairlines — that runs the full height of the document and **brightens in squares under the
cursor**. Every surface is either that lattice or a hairline at 25% white; nothing on this page is
ever filled.
The subject is a **lacquered, iridescent black puffer jacket rendered live in WebGL**. There is one
canvas and one WebGL context for it: the garment is framed in the hero, and as the reader scrolls it
**travels** — growing, dropping, sliding left and turning 40° — into the second screen, where it
comes to rest behind the specification rows. It answers the cursor the whole way (turntable on the
horizontal axis, roll on the vertical) and its sleeves and belt straps **trail the turn on springs**.
A second, pinned instance of the same model runs off the bottom-left corner of the FAQ screen.
Six blocks, and two layouts rather than a responsive scale between them:
1. **Hero** — a chromed ARTEFAKT wordmark plate at 20% behind the garment, bracketed statements
against each margin, the claim and a bracketed CTA on the bottom edge, two corner cards under it.
2. **Details** — "DETAILS MATTER." at 70px against five numbered specification rows, with the
travelling garment full-bleed behind them.
3. **Collections** — four product cards that **tilt towards the cursor** with the garment standing
off the face in its own 3D layer; the tag chips trade for a SHOP NOW link on hover.
4. **Technology** — a pinned stage whose scroll **scrubs a 61-frame reel** of the jacket's five
material layers exploding apart, while a single specification card walks down them on a leader
line drawn to the layer it names.
5. **FAQ** — a description list over the pinned second instance of the garment.
6. **Footer** — four link columns, a real newsletter form, a rule and a closing line.
Over all of it: a **loading curtain** gated on real readiness, and text that **decodes from random
glyphs** — on arrival, on hover and on focus — everywhere a label appears.
## The two layouts, and why there are only two
This is the single most important structural fact about the page, and getting it wrong will produce
a site that looks approximately right at one width and broken at every other.
- **At and above the frame breakpoint the page reproduces a 1440×800 artboard.** The root font-size
*is* that artboard's scale factor, so every `rem` in the desktop layout is one artboard unit and
the whole composition fills the viewport. Each screen is `50rem` tall — the artboard's own 800
units — and pieces are positioned **absolutely at the artboard's own coordinates**.
- **Below it there is no artboard.** The root font-size is a plain `16px` and the layout is ordinary
responsive flow: a single column, then two, with its own type steps.
The breakpoint is **not** a width alone:
```css
/* the frame layout */
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) { … }
/* the flow layout — keep these two conditions exact mirrors of each other */
@media (max-width: 1023.98px), (max-aspect-ratio: 0.9999/1) { … }
```
A portrait tablet (1024×1366) is closer to a large phone than to a desktop, so it gets flow. Use a
custom media query or a class toggled by `matchMedia` — but the two conditions must be exact
complements, or the flow layout gets drawn at the artboard's scale.
**The root scale is bound by whichever axis runs out first:**
```css
html { font-size: min(1.111111vw, 2lvh); } /* 16*100/1440 across, 16*100/800 down */
@media (max-width: 1023.98px), (max-aspect-ratio: 0.9999/1) { html { font-size: 16px; } }
```
The artboard is 1.8:1. On a screen wider than that, the *height* binds, the composition is drawn at
the size that fits and is centred, and a band of bare lattice is left down each side. A width-only
scale crops the bottom off every screen on a maximised 1920×1080 browser — measured, 45 elements
fell below the fold. Use `lvh`, not `vh` or `svh`, and make the sections `h-lvh`/`50rem` so the two
agree.
**The canvas is the window, not 90rem.** Do not cap the page at the artboard's width. Where the
window is wider than the frame, the extra width goes to the gaps between columns. That means every
horizontal coordinate in the desktop layout must be anchored to **an edge or to the centre**, never
to a left offset that only means "the right margin" at exactly 1440 units:
- right-hand columns are `right: 2.5rem` (the 40-unit margin), not `left: 983px`;
- centred pieces are `left: 50%` with a `translateX(-50%)`, or auto margins;
- the leader lines in the technology stack are drawn from `50%` and `100%`.
At exactly 1440 units every one of those resolves to the artboard's own number, so the reference
render is unchanged.
**Three screens use a centred 800-unit box, and one does not.** Details, Collections and FAQ each
carry pairs that must stay level with each other — one anchored to the top, one to the bottom — and
those drift apart by exactly the slack on a taller screen. So each of those sections is `height:
100lvh; min-height: 50rem` with an inner box that is `position: absolute; inset-inline: 0; top: 50%;
margin-top: -25rem; height: 50rem`, and the children position against **that**. Use a negative
margin, never `translateY(-50%)` — a transform makes the box a containing block for
`background-attachment: fixed` and knocks the lattice panels inside out of step with the page.
The **hero** is the one screen that may simply fill the viewport: nothing in it is anchored to the
top, so extra height widens the space between the centred garment and the copy beneath it, which is
where it is least visible. The **technology** stage is pinned, so its slack falls off the bottom of
a stage nobody is looking at; its box fills the stage rather than being centred in it.
## Page shell & libraries
- **Import map:**
```html
<script type="importmap">
{"imports":{
"three": "https://cdn.jsdelivr.net/npm/three@0.185.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.0/examples/jsm/",
"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.mjs"
}}
</script>
```
From `three/addons/` you need `loaders/GLTFLoader.js`, `loaders/DRACOLoader.js` and
`environments/RoomEnvironment.js`. The DRACO decoder path is
`https://cdn.jsdelivr.net/npm/three@0.185.0/examples/jsm/libs/draco/gltf/` — the model is
Draco-compressed and **will not load without it**.
- **The display face is IBM 3270**, served from the bucket (see Assets). Everything on the page is
set in it; there is no second typeface.
```css
@font-face {
font-family: "3270";
src: url("https://storage.getlayers.ai/assets/artefakt-5f7a0c9962/fonts/3270-Regular.otf") format("opentype");
font-weight: 400; font-style: normal; font-display: swap;
}
```
Fall back to `ui-monospace, SFMono-Regular, Menlo, monospace`. **Monospace is load-bearing**: the
scramble decoder substitutes characters in place and nothing may reflow while it runs.
- **Smooth scroll, via Lenis:** `new Lenis({ lerp: 0.075, smoothWheel: !reduced, syncTouch: !reduced })`,
driven from a `requestAnimationFrame` loop. `0.075` rather than the library default of `0.1` — a
wheel notch settles over about 25 frames instead of 15. Anything asking for
`prefers-reduced-motion: reduce` gets the platform's own scrolling untouched. Scroll to the top on
load.
- **One shared rAF ticker.** A `Set` of subscribers, each with its own minimum frame gap read live
every frame; the loop starts on the first subscriber and `cancelAnimationFrame`s when the last
leaves, and one subscriber throwing must not kill it. The pointer field, the scramble decoders,
the badge idles, the wordmark sheen, the technology reel, the card walk, the preloader count and
the WebGL scene all subscribe here. **Do not start a second rAF loop anywhere.**
- `html { background-color: #000; }` — the canvas colour is taken from `html` deliberately, so a
rubber-band overscroll shows the page's own black rather than a white flash.
- The page shell is `position: relative; min-height: 100lvh; overflow-x: clip` (clip, **not**
hidden — `hidden` makes it a scroll container and breaks sticky positioning for the pinned
sections).
## Fixed parameters (bake these in)
```js
/* ── Palette ─────────────────────────────────────────────────────────────── */
--hero-surface: #000000 /* the hairlines between lattice cells, and the page ground */
--hero-surface-lattice: #0d0d0d /* the cell fill */
--hero-content: #ffffff
--hero-content-muted: rgb(255 255 255 / 0.4) /* body prose */
--hero-content-faint: rgb(255 255 255 / 0.25) /* index numerals, legal line */
--hero-rule: rgb(255 255 255 / 0.25) /* every border on the page */
/* ── Type ramp, rem against the 1440 base (16px root) ────────────────────── */
caption 0.75rem (floored at 12px) badge captions, the loading count
body 1.125rem (floored at 12px) nav, markers, rows, most copy
lede 1.25rem standfirsts, the CTA labels
fine 0.8125rem (floored at 12px) the newsletter consent line
chip 0.875rem (floored at 12px) tag chips
title 1.625rem product card titles
display 4.375rem (70px) section headlines, frame layout only
display-tablet 3.125rem (50px) 640–1023
display-compact 2.5rem (40px) below 640
leading: display 0.9 · headline 0.8 · caption/prose 1.1
tracking: -0.02em on captions and display
/* The four smallest roles carry `max(<rem>, 12px)`. At 1024 the artboard renders
at 71% and 12 units becomes 8.5px — the badge captions and chips stopped being
readable while remaining perfectly proportional. At 1440 the floor is a no-op. */
/* ── Lattice ─────────────────────────────────────────────────────────────── */
pitch 0.625rem (10 units) gap 0.125rem (2 units) offset -gap/2
reach 12rem (192px) /* the pointer highlight's radius */
stage-fade 17rem (272px) /* how far the product canvas dissolves at its foot */
/* ── Motion ──────────────────────────────────────────────────────────────── */
duration-fast 150ms duration-normal 250ms ease-entrance cubic-bezier(0.2, 0, 0, 1)
```
**The lattice must land on whole pixels or it stops being squares.** Pitch and gap are rem — they
are artboard units and scale with the frame — and a rem is not a whole number of pixels at most
window sizes (at 1920 the pitch resolves to 13.33px). A repeating gradient with fractional stops is
antialiased per bar, and because the fraction only comes round every three cells the error repeats
on a three-cell beat: a ripple of light and dark cells across the screen that crawls when anything
moves. Round all three to the device pixel grid, guarded:
```css
@supports (width: round(1px, 1px)) {
:root {
--lattice-pitch: round(0.625rem, 1px);
--lattice-gap: round(0.125rem, 1px);
--lattice-offset: round(calc(var(--lattice-gap) / -2), 1px);
}
}
```
## The lattice, and the light in it
The page's surface is **two elements, not one painted background**, and the order is load-bearing.
```css
/* The shell keeps only its colour. */
.lattice-shell { background-color: #0d0d0d; }
/* FIRST in the tree: the pointer highlight, position: fixed. */
.lattice-beam {
position: fixed; inset: 0; pointer-events: none;
background-image:
radial-gradient(circle var(--lattice-reach) at var(--pointer-x) var(--pointer-y),
rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0.055) 26%,
rgb(255 255 255 / 0.034) 52%, rgb(255 255 255 / 0.016) 74%,
rgb(255 255 255 / 0.005) 89%, transparent 100%),
radial-gradient(circle calc(var(--lattice-reach) * 1.75) at var(--pointer-x) var(--pointer-y),
rgb(255 255 255 / 0.017) 0%, rgb(255 255 255 / 0.009) 48%, transparent 100%),
radial-gradient(circle calc(var(--lattice-reach) * 1.2) at var(--pointer-lag-x) var(--pointer-lag-y),
rgb(255 255 255 / 0.032) 0%, rgb(255 255 255 / 0.014) 52%, transparent 100%);
}
@media (hover: none) and (pointer: coarse) { .lattice-beam { display: none; } }
/* SECOND in the tree: the grid, position: absolute across the shell. */
.lattice-bars {
position: absolute; inset: 0; pointer-events: none;
background-image:
repeating-linear-gradient(to right,
#000 0 var(--lattice-gap), transparent var(--lattice-gap) var(--lattice-pitch)),
repeating-linear-gradient(to bottom,
#000 0 var(--lattice-gap), transparent var(--lattice-gap) var(--lattice-pitch));
background-position: var(--lattice-offset) var(--lattice-offset);
}
```
**The bars paint over the light, and that is the whole effect.** The gap gradients are opaque black,
so the highlight survives only inside the cells: it reads as the grid *brightening* in squares, never
as a lamp shining across it. Swap the two elements and it stops looking like the page.
**The falloff curve is what stops it reading as a blob**, not the radius. A plain colour→transparent
radial is a linear cone with a flat core and a visible rim; the convex decay through explicit stops,
plus the much wider halo at a sixth of the strength, plus the same treatment on the trailing pair,
is what dissolves it into the page. Do not simplify these gradients.
**Why two elements rather than one.** A single element painting all five layers needs
`background-attachment: fixed` for the highlight, and a fixed background cannot be scrolled by the
compositor — it is repainted every frame over the element's whole visible area, which for the page
shell is the entire viewport for the length of the document. Measured at 4× CPU throttle that one
element held the content sections at 16ms frames; split, they run at 8.5.
**Opaque lattice panels.** The specification rows, the technology cards, the FAQ rows, the nav
submenu, the CTA buttons and the preloader all sit on an opaque copy of the same surface — they
*knock out* the artwork behind them rather than being transparent cards over it. One element, five
background layers, attachments `scroll, scroll, fixed, fixed, fixed` (one value per layer — a short
list is repeated and silently hands the last layer the wrong attachment):
```css
.lattice-panel {
background-color: #0d0d0d;
background-image: /* the two bar gradients, then the three radial gradients, in that order */;
background-position: var(--lattice-offset) var(--lattice-offset),
var(--lattice-offset) var(--lattice-offset), 0 0, 0 0, 0 0;
background-attachment: scroll, scroll, fixed, fixed, fixed;
}
```
Because the highlight layers are viewport-anchored, every panel lights up **in phase** with the page
behind it. Never put this on an element that carries a transform — the transform becomes the
containing block and the `fixed` half falls out of step.
### The pointer field
One writer for the whole page. Publish the cursor, in viewport pixels, as four custom properties on
`:root`, smoothed on the shared ticker:
```js
const LERP = 0.12, LAG_LERP = 0.045; // per 60Hz frame
const frameLerp = (k, dt) => 1 - Math.pow(1 - k, dt / (1000 / 60));
// --pointer-x/y chase the raw position at LERP
// --pointer-lag-x/y chase it at LAG_LERP — the glow's tail
```
Park them at `-100vw / -100vh` so nothing is lit before the pointer has been seen; land on the
**first** reading rather than easing in from off-screen. Bail entirely — never start, never write —
on `(hover: none) and (pointer: coarse)` or `prefers-reduced-motion: reduce`. **No `pointerleave`
handler**: sending the coordinates off-screen makes the glow *slide* away rather than stop, and a
spurious leave event snaps it back on the next move.
## The scramble decoder
Every label on this page decodes from random glyphs. It is the page's signature.
```js
const CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*<>";
const STEP_MS = 40; // ms between substitution steps, on the shared ticker
const MAX_STEPS = 22; // step ceiling — a longer label resolves several chars per step
// charsPerStep = max(1, ceil(text.length / MAX_STEPS))
```
Resolution runs **left to right**, one step at a time; every character not yet resolved is a random
glyph from the pool, and **whitespace is held fixed** so on a monospaced face the word shapes and
wrap points are identical on every step. The tick rate never changes, so a long label and a short one
share one texture — which is what stops a mixed cascade reading as several unrelated effects.
Triggers: `mouseenter` and `focus` always; plus **once on arrival** — on load for anything above the
fold, on scrolling into view for everything below it.
**Accessibility, and it is not optional.** Render the scrambling glyphs in an `aria-hidden` span and
keep the real label in a visually-hidden sibling, so the accessible name stays stable while the
visible text churns. A screen reader must never be handed `X#@%R`. Skip the effect entirely under
`prefers-reduced-motion: reduce` — rapidly mutating glyphs are exactly what that setting is for.
### Typesetting the prose: bind the small words
Before a paragraph is decoded, replace the space after every **function word** with a non-breaking
space, so no line ends on a preposition or an article. In a monospaced face a hanging "and" is a
visible stub of identical cells at the edge of the column; measured at 390px the page had 23 of them.
```js
const TIED = new Set([
"a","an","the", "and","or","but","as","if","so",
"of","to","in","on","at","by","for","with","from","into",
"over","under","per","via","no","not",
"without","within","onto","upon","against","across","around",
"after","before","through","during","between",
"is","are","was","be","we","it","its",
"my","our","your","their","his","her","i",
"can","may","do","does","did","has","have","had","will","&",
]);
```
A word already carrying sentence punctuation (`.,;:!?`) is left alone — that break is a pause the
reader wants. **On a narrow column (below 640px) cap a bound pair at 20 characters and refuse to
chain** one function word to another: gluing "without compromising" costs twenty characters of a line
that holds twenty-nine, and "can be returned" carries a whole phrase down a line. A wide column takes
no ceiling.
The hero's claim gets a different treatment — `keepSentences`: make **every** space non-breaking
except the ones after a full stop, so the two sentences on each line are the only hinges. Left to
wrap freely it split "WEATHER-RESISTANT. THERMAL / INSULATION." mid-sentence on a phone.
### Reveal-on-arrival
Two `IntersectionObserver`s per element, **whichever fires first**, and this is not redundancy:
```js
const REVEAL_ROOT_MARGIN = "0px 0px -64px 0px";
watch({ rootMargin: REVEAL_ROOT_MARGIN }); // the ordinary case: scrolling up into view
watch({ threshold: 1 }); // anything already fully on screen
```
A hold-back alone has a failure mode that bit this page three times: anything anchored near the
bottom of a viewport-tall section — the footer's copyright sits 40px clear against a 64px band — comes
to rest closer to the bottom edge than the margin is deep and **never reveals at all**. Neither
observer can be tightened into the other. Fire the callback at most once and disconnect both.
## The loading curtain
A full-viewport `z-index: 100` overlay wearing the plain lattice (cells and bars, no highlight),
fixed, `display: grid; place-items: center`.
**Gated on real readiness, not on a timer.** Three gates: `document.fonts.ready`, `window.load`, and
a `hero-scene-ready` event the WebGL scene dispatches once its model is compiled. A duration would be
a promise about the network that nothing can keep; this way a warm cache leaves almost immediately
and a cold one is told the truth.
```js
const PATIENCE_MS = 8000; // backstop — a preloader that can outlive its gates is worse than none
const FLOOR_MS = 700; // minimum on screen, so a warm cache does not flash the curtain
const COUNT_LERP = 0.08; // how fast the readout chases the real figure, per 60Hz frame
```
The readout **chases** the target rather than showing it, and creeps toward the next gate rather than
sitting still between them — `ceiling = finished ? 1 : min(0.97, target + 0.12)` — so the count reads
as something filling rather than as three jumps.
Contents, centred in a 16rem column (20rem below the frame):
- the ARTEFAKT logo mark, `height: 3rem` (4rem below the frame), which scales to `1.05` on exit;
- a 1px rule at 25% white with a white fill inside it, driven by `transform: scaleX(progress)` from
`transform-origin: left` — one compositor job per frame, never a width;
- `LOADING 000` — zero-padded to three digits, tabular numerals, caption size at 25% white (body size
at 40% below the frame, where 25% is present without being legible).
Four `2.5rem` corner brackets inset `2.5rem` from each corner (two borders each). On exit they
`scale(1.5)` and fade over 700ms while the curtain fades over 500ms — the same gesture the buttons
make when the pointer finds them, at the scale of the whole viewport. Remove the element from the DOM
700ms after it is done.
Render it in the initial HTML so there is no flash of the page before it, and add
`<noscript><style>[data-preloader]{display:none!important}</style></noscript>` — where scripts never
run the curtain can never lift.
## The WebGL product
One canvas, one context, one subscription to the shared ticker, **for the whole journey across two
screens**. The garment does not hand off from a hero renderer to a details renderer — it never
changes hands at all; only its framing does, driven by scroll. Two canvases would mean two contexts,
two loads of the same model and a cross-fade at the seam.
### Where it lives
Wrap the hero and details sections in one **product region**. From the frame breakpoint the canvas
box is `position: sticky` inside that region, `height: 50rem`, `top: calc((100lvh - 50rem) / 2)`, and
the two screens are pulled back over it with a negative margin so the sticky box does not also occupy
a screen of its own. The box is **one artboard tall, not viewport-tall**: viewport-tall it overhangs
the details screen by the difference and the garment spills up into the seam (89px at 1280×800).
Below the frame breakpoint **there is no travel**: the canvas is absolutely positioned over the
hero's own product box (`aspect-ratio: 4/3`, `16/9` from `md`) and the details screen has no product
at all. Measure the box's offset from the region's top with a `ResizeObserver` and publish it as a
custom property — the markers lead the screen on a phone, and a canvas pinned to the region's top
would draw the garment straight over them.
**The bottom edge is dissolved, not cut.** At rest the canvas comes to rest over exactly the details
screen, so its bottom edge lands on the seam with the section below and the garment — which runs off
the bottom of that screen — was being sliced by a hard horizontal line. Mask it:
```css
.stage-mask {
mask-image: linear-gradient(to bottom,
#000 0,
#000 calc(100% - var(--stage-fade)),
rgb(0 0 0 / 0.97) calc(100% - var(--stage-fade) * 0.68),
rgb(0 0 0 / 0.82) calc(100% - var(--stage-fade) * 0.52),
rgb(0 0 0 / 0.55) calc(100% - var(--stage-fade) * 0.36),
rgb(0 0 0 / 0.26) calc(100% - var(--stage-fade) * 0.20),
rgb(0 0 0 / 0.08) calc(100% - var(--stage-fade) * 0.08),
transparent 100%);
}
```
**Opaque for the first third, then a long even decay.** Both extremes were wrong: a mask makes the
garment *translucent*, so a linear 160px ramp ghosted the 10px lattice across the whole lower body,
and cutting the ramp to 48px put back the hard line the fade exists to hide. 272px of travel, the
first 87 at full density.
Give the canvas container `transform: translateZ(0); backface-visibility: hidden` — without its own
compositor layer, a neighbouring fixed element repainting during a scroll (this page has a fixed
lattice beam and a sticky header) invalidates the WebGL composite on WebKit and the whole scene
flickers.
### Renderer, camera, environment
```js
renderer = new WebGLRenderer({ alpha: true, antialias: !coarse,
powerPreference: coarse ? "default" : "high-performance",
stencil: false });
renderer.setClearAlpha(0);
renderer.autoClear = false;
renderer.outputColorSpace = SRGBColorSpace;
renderer.toneMapping = ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.95;
camera = new PerspectiveCamera(30, 1, 0.1, 100);
scene.environment = new PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
scene.environmentIntensity = 0.28;
keyLight = new DirectionalLight(0x2f63ff, 4.5); keyLight.position.set(-2.4, 2.2, 2.6);
rimLight = new DirectionalLight(0xffd9c0, 2.4); rimLight.position.set( 2.8, 0.6, -2.2);
```
The canvas is cleared to alpha 0 so the wordmark plate and the lattice show through wherever the
garment does not cover. Set `role="img"` and an `aria-label` of *"Oversized weather-resistant thermal
jacket, iridescent black"* on the canvas element.
### The shell's look
The GLB ships one near-black, fully rough, untextured material. The product is a **lacquered,
iridescent shell**, which needs `MeshPhysicalMaterial` — `MeshStandardMaterial` has no iridescence
layer at all, and the oil-slick sheen is exactly that layer. Upgrade every mesh in place, carrying
`map` and `normalMap` across:
```js
const LOOK = {
colour: 0x070a14,
metalness: 0.15,
roughness: 0.32,
envMapIntensity: 0.45,
iridescence: 1,
iridescenceIOR: 1.3,
iridescenceThicknessRange: [120, 360],
clearcoat: 1,
clearcoatRoughness: 0.06,
};
```
Two things here are easy to get wrong and both were measured off the reference render (median
luminance 0.055, median saturation 0.86, 69% of lit pixels in the 195–270° azure band):
- **The blue is the light, not the material.** A neutral environment cannot make two thirds of an
image one hue, so the key light carries it and the environment is turned well down.
- **The film must stay thin.** 120–360nm is the blue/violet part of the interference range; past
~450 the greens and magentas take over and the jacket goes pink.
- The shell is not pure black because it cannot be — at RGB 14 it matched the lattice behind it and
the silhouette dissolved.
Switch every layer on with a non-zero value at construction: three compiles a *different program*
when one of these crosses zero, and flipping that at runtime stalls a frame.
### Framing, in artboard units
```js
const FRAME_WIDTH = 1440, FRAME_HEIGHT = 800;
/* Hero */ SUBJECT_HEIGHT = 570; SUBJECT_RISE = 36; // above the section's centre
/* Details, at rest*/ DETAILS_HEIGHT = 795; DETAILS_DROP = 140; DETAILS_SHIFT_X = -92;
/* the turn it makes on the way */ SCROLL_TURN = 40°
/* Boxed (below the frame): fill the tighter axis */
BOXED_FILL_Y = 0.97; BOXED_FILL_X = 0.93; BOXED_DROP = 0.025;
const ease = t => t*t*t*(t*(t*6 - 15) + 10); // smootherstep — the pinned approach
const DRIFT_TAIL = 2.2;
const drift = t => 1 - Math.pow(1 - t, DRIFT_TAIL); // the journey: leaves early, arrives long
```
Place the product by projecting the artboard's own coordinates. `scale = containerHeight / 800`.
Interpolate `heightUnits` from `SUBJECT_HEIGHT` to `DETAILS_HEIGHT`, `riseUnits` from `SUBJECT_RISE`
to `-DETAILS_DROP`, and the x offset from 0 to `DETAILS_SHIFT_X`, all on `drift(journey)`. Then:
```js
const halfTan = Math.tan((30 * Math.PI / 180) / 2);
const targetPx = fullBleed ? heightUnits * scale : cssHeight * BOXED_FILL_Y;
const forHeight = (modelSize.y * cssHeight) / (2 * targetPx * halfTan);
const forWidth = (modelSize.x * cssHeight) / (2 * cssWidth * BOXED_FILL_X * halfTan);
const distance = fullBleed ? forHeight : Math.max(forHeight, forWidth);
camera.position.set(0, 0, distance); camera.lookAt(0, 0, 0);
worldPerPixel = (2 * distance * halfTan) / cssHeight;
```
Fit the **tighter axis** when boxed: on a phone the box is 350×262 and the jacket, sleeves out, is
half again as wide as it is tall, so 93% of the height asked for 373px of width inside 350 and the
sleeves were clipped at both edges.
**Snap the buffer to a 50px cell pitch and centre the canvas.** Round `cssWidth`/`cssHeight` **up**
to the next whole cell so a box edge never lands mid-pixel, hold the device pixel ratio to a whole
step, and then centre the canvas with `left:50%; top:50%; transform: translate(-50%,-50%)` — the
snap grows the buffer past its container by up to a cell in each axis, and left at the default
top-left that overhang all falls off the bottom-right and pushes the product off centre (measured, it
sat 9% higher in the section at 1024 than at 1440). Take `scale` from the **raw** container height,
not the snapped one.
`journey` is read once per frame from `-section.getBoundingClientRect().top / section.offsetHeight`,
clamped to 0..1 — one rect read inside the ticker, never a scroll listener.
### The exit ramp
A pinned element's apparent velocity goes from zero to the page's own in a single frame when it
releases, and that step is what is felt as the picture slamming into place.
```js
const RELEASE_LAG = 0.15; // viewport heights
released = max(0, -sectionTop - sectionHeight); // scroll past the pin
lagPx = cssHeight * RELEASE_LAG;
releaseDrop = lagPx * (1 - Math.exp(-released / lagPx));
```
The derivative is exactly 1 at the seam, so the product starts leaving perfectly still and eases up
to the page's speed over the following λ.
### Rotation: the cursor turns it
**No press.** Horizontal cursor position turns the product about its vertical axis; vertical position
rolls it in the screen plane. Both are **absolute targets**, so the cursor's place in the section
*is* the angle and a sweep can always be undone.
```js
TURN_MAX = 24° ROLL_MAX = 12° TILT_MAX_X = 3° PARALLAX = 12 // artboard units of drift
TILT_STIFFNESS = 0.08 TILT_DAMPING = 0.52 // one damped integrator per axis
```
Normalise the cursor to −1..+1 across the canvas, **clamped** (the listeners cover the whole region,
so the cursor can be outside the box the coordinates are measured against). Feed the raw position,
not the smoothed one — the spring below is the smoothing, and running it through the pointer field's
lerp first adds ~390ms of dead time.
**Hover rotation belongs to the frame layout and to nothing else.** Gate it on the frame media query,
not on a coarse-pointer test: a desktop window narrowed to a tablet's width has a cursor, and showed
the garment leaning out of the flow layout's box, which reads as broken rather than responsive. Touch
gets a **press-and-drag turntable** instead — `DRAG_DEGREES_PER_PX = 0.4`, released with
`SPIN_FRICTION = 0.94` and stopped below `0.05°`.
**Authority is taken from the cursor while the page is travelling and handed back afterwards**, and
what the gate reads is the scroll's *speed*, not the bare fact that it moved:
```js
TRAVEL_MUTE_SPEED = 0.02; // journey delta per 60Hz step at which the cursor is fully muted
TRAVEL_MUTE_MS = 200; // time constant while authority is being taken
TRAVEL_SETTLE_MS = 900; // …and while it is given back — asymmetric on purpose
// active = pointerIntensity * ease(travelSettle)
```
Two pivots, and **the nesting is load-bearing**: the roll is outermost so it always reads as a roll
*on screen*; the turntable sits inside it, in the product's own frame. Swap them and a rolled product
turns about a tilted axis and the two visibly fight. Recentre the model on its bounding-box centre
before adding it.
An idle that never stops and **adds** to the rest pose rather than replacing it:
`IDLE_PERIOD_S = 7`, `IDLE_ROTATION = 1.5°`, `IDLE_RISE = 4` artboard units, driven by
`sin(elapsed / 7 * 2π)`.
### The sleeves trail the turn
The rig names its chains. Collect every `Bone` matching `/^s*(shoulder|arm|forearm)_[LR]$/i` or
`/^belt-d+_[LR]$/i`, record its rest quaternion and its **depth** in the chain, and give straps a
scale of 1.6. Then, on a **fixed 60Hz timestep** (`PHYSICS_STEP_MS = 1000/60`, at most 4 steps per
frame — the physics is never throttled with the frame budget, precisely so the feel cannot follow
the display):
```js
const raw = (rollVelZ + turnVelY * 0.6) * 7 // sleeveLag — the hover spring
+ journeyTurnVel * 1.5 // travelLag — the scroll's own turn
+ spinVelocity * 0.63; // dragLag — a thumb
jiggleDrive += (raw - jiggleDrive) * 0.18; // JIGGLE_DRIVE_FOLLOW
const limit = 30° ; // sleeveLimitDeg
for (const item of bones) {
const rawTarget = -jiggleDrive * item.scale * (1 + item.depth * 0.4); // JIGGLE_DEPTH_GAIN
const target = limit * Math.tanh(rawTarget / limit);
item.velocity = (item.velocity + (target - item.angle) * 0.15) * 0.75; // stiffness, damping
item.angle += item.velocity;
item.bone.quaternion.copy(item.rest)
.multiply(scratch.setFromAxisAngle(new Vector3(0,0,1), item.angle));
}
```
**Three inputs, three gains, and they must stay separate.** They are the same quantity — angular
velocity — arriving at wildly different magnitudes. `DRAG_DEGREES_PER_PX` turns a 30px/frame swipe
into 12° *per step*, where the hover spring peaks near 1.7°; one gain sized for either pins every
chain against the ceiling for the whole gesture and releases them together, which is a garment made
of rubber. **Apply the limit per bone, after its own scale and depth** — limiting the shared drive
lets a deep strap multiply its way past the ceiling anyway. `tanh` eases into the limit; a hard clamp
pins a chain at maximum through a whole sweep and releases it all at once.
The body itself follows the scroll on the same clock (`JOURNEY_FOLLOW = 0.12`), so the velocity the
sleeves trail is bounded and continuous rather than the raw scroll delta.
### Device tiers and the frame budget
Read the tier **once**, at construction — a device does not change tier mid-session:
```js
coarse = matchMedia("(hover: none) and (pointer: coarse)").matches;
tier = !coarse ? "desktop" : (innerWidth < 768 ? "mobile" : "tablet");
RATIO_STEPS = { mobile: [1, 0.85, 0.75], tablet: [1.25, 1, 0.85], desktop: [1.5, 1.25, 1] };
FRAME_BUDGET = { mobile: 1000/30, tablet: 1000/45, desktop: 0 }; // ms between renders
FPS_FLOOR = 50; // below this, step down the pixel ratio — never the physics
```
A 3× phone renders nine times the fragments of a 1× screen and this scene is fill-bound: one
full-screen lit, iridescent, clearcoated garment. Mobile stops at 1.0 rather than lower — the jacket
has hard silhouette edges and a zip, and those alias visibly below 1. Measure fps over 500ms windows
with hysteresis so the ratio cannot flap.
Render only when something changed (`needsFrame`), `renderer.clear()` then `renderer.render()`.
Pause the ticker subscription on `document.hidden` and when an `IntersectionObserver` with
`rootMargin: "10%"` says the **region** (not the hero — the loop must run for the whole journey) has
left the viewport. Listen for `resize` on a fine pointer but **`orientationchange` on a coarse one**:
iOS Safari fires `resize` every time the URL bar collapses during a scroll, and rebuilding the
framebuffer mid-scroll reads as a whole-scene flash. Debounce 150ms.
Call `renderer.compile(scene, camera)` after the model loads and before the first visible frame, then
dispatch `hero-scene-ready`. Fade the canvas in on `duration-normal` once ready. A failed model load
must not take the rest of the frame down with it.
### The pinned second instance (FAQ)
The same component with a fixed framing instead of the journey:
```js
const STILL = { height: 765, offsetX: -285, offsetY: -140,
entrance: { shiftX: -110, turn: -28° } };
// turn defaults to SCROLL_TURN (40°) — both screens show the garment from the same
// three-quarter angle, so they cannot drift apart if that angle is ever retuned.
```
It has no journey but it has an **approach**, driven by scroll position alone (so it runs backwards
when the reader does), measured against its own screen over a window from `0.55` viewports above the
fold to `0.3` below it — it starts while the screen is still coming up and finishes after it has
arrived, so the garment is still settling while the screen is being read. The weight is on the
**rotation**, not the slide: 28° of turn against 110 units of shift. The garment turns into its final
pose more than it arrives at it, which is also what gives the sleeves something to trail. The first
frame places the body on its target outright — chasing it from zero opens the screen with a swing
nobody asked for. It gets **no** drag target (a 760-unit grab area would swallow taps meant for the
questions underneath) and **no** bottom mask is optional: keep it, because the section takes the
larger of `100lvh` and 800 units and those scale differently — on 1920×900 the garment is cut dead
flat by the section's bottom edge without it.
This instance is **frame-layout only**. Below it there is no corner to run off, and a full-width
photograph of a jacket the page has already shown twice reads as a repeat. `display: none` also means
the box never lays out and the second WebGL context is never built.
## Layout & sections (in order)
Copy below is **verbatim**. Every `href` is `#` — no routes exist behind them.
### Header — pinned for the whole page
Three groups pinned independently, not distributed: the logo and cart sit against the 40-unit
margins while the nav is **centred on the canvas**, which a `justify-content: space-between` row
cannot reproduce.
- Logo `ui/logo-mark.png` at `1.875rem × 4.6875rem` (30×75), `top: 1.5rem; left: 2.5rem`.
- Nav, centred at `top: 1.5rem; left: 50%; translateX(-50%)`, items 4rem apart:
`SHOP` · `COLLECTIONS ▾` · `TECHNOLOGY` · `ABOUT`. Body size, `line-height: 0.9`.
- Cart, `top: 1.5rem; right: 2.5rem`: `CART [ 0 ]`.
The wrapper is `position: sticky; top: 0; z-index: 50`, and **from the frame breakpoint it is given
zero height** with the header inside going back to absolute positioning — so the banner keeps the
artboard's coordinates and takes no space in the flow, and the hero still starts at the top of the
canvas. Below the breakpoint the header is in flow, the wrapper takes its height, and it needs an
**opaque lattice backdrop and a bottom hairline** — pinned and transparent, the whole page scrolled
straight through it and spec-card copy read out from behind the logo. Put the fill on the *wrapper*,
not the header: the header carries an entrance transform, and a transform makes
`background-attachment: fixed` resolve against the element instead of the viewport.
Header entrance: fade from `opacity: 0, translateY(-8px)`. Labels decode at `index * 60ms`, cart at
`240ms`.
**COLLECTIONS opens a submenu on hover** with a 6×5 caret that rotates 180°. Items:
`SHADOW PUFFER JACKET` · `TACTICAL HOODED JACKET` · `THERMAL BOMBER JACKET` · `TECH SHELL JACKET`.
The panel is an opaque lattice panel, `min-width: 14rem`, bordered, `padding: 1rem`, items 0.75rem
apart at 40% white brightening to full on hover. Three details matter:
- **The 16 units between the label and the panel are padding on the wrapper, not a margin on the
panel.** As a margin they are dead space the pointer crosses on its way down, which counts as
leaving the wrapper — the menu closed before it could be reached.
- **Close on a 220ms timer**, cancelled by re-entering; close on `Escape` and on a pointerdown
outside; close on blur leaving the group.
- **Focus does not open it, activation does.** Tapping a button focuses it and *then* clicks it, and
focus arrives first — opening on focus and toggling on click cancelled each other out inside a
single tap (traced: `aria-expanded` went true at 155ms and false at 157ms). Use a `<button>` with
`aria-expanded`/`aria-controls`, and hold the panel in the tree with `visibility: hidden` on the
wrapper so a closed panel is neither clickable nor tab-reachable.
- A submenu item reserves the width of its caret box (`7.4375rem`) — the caret is positioned out of
flow to match the artboard exactly, so without it the row centres 12px narrow.
Below the frame the nav is hidden and replaced by a hamburger opening a full-screen panel with the
same links.
### 1 — Hero
Full-viewport (`min-height: 100lvh; min-height: 50rem`). Everything is absolute against the section
at the artboard's coordinates.
- **The wordmark plate** (`hero/hero-wordmark.png`, 5028×2684 chrome lettering) behind everything at
`z-index: 0`, drawn at **92%** of the artboard's own size, centred on the artboard's centre line
**19.5 units below centre**, at **`opacity: 0.2`**. That is a deliberate deviation — the artboard
draws it at 8%, a ghost peaking at RGB 32 against the lattice's 13; 20% lands its brightest strokes
around 63. At full size its strokes reach across the edge copy; at 92% it clears the left column by
49 units and the right by 20.
**A torch travels over it.** The plate is drawn twice: a resting copy at 20%, and a second copy at
full opacity revealed through a moving aperture. On a fine pointer the aperture is a soft disc
centred on the cursor —
`radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,0.75) 45%, transparent 100%)` — with
radius `min(260px, 0.42 × the plate's longer side)`. Without the cap the disc is wider than the
plate on a phone and everything is lit at once, so there is no light to see.
Where there is no cursor, the aperture is a **slanted sweep** instead, because a sweep is what reads
as a highlight travelling over metal while a spot reads as a torch:
```
mask: linear-gradient(100deg, transparent 0%, rgb(0 0 0 / 0.35) 32%, #000 50%,
rgb(0 0 0 / 0.35) 68%, transparent 100%)
band 0.42 of the plate · crossing 2.6s · cycle 7.4s (the rest is the pause between passes)
filter on the revealed copy: brightness(2.6) contrast(1.1)
```
The band **brightens** what it carries rather than merely making the plate less transparent —
lifting a dark, mostly-transparent artwork from 20% to 100% moves its pixels by ten levels out of
255 at a phone's size. Alongside it the whole plate **breathes** between 0.8× and 1.7× of its
resting opacity on a **6.7s** period — a different period from the sweep, so the pair never pulses
together. Below the frame draw the mark at `5028/4639 = 1.0839×` its canvas so the *ink*, not the
transparent margin, reaches the screen edge.
- **Two bracketed statements**, `top: 50%; translateY(-50%)`, one against each margin
(`left: 2.5rem`, width 9.75rem / `right: 2.5rem`, width 11.5625rem). Each is a corner glyph
(`hero/hero-bracket.svg`, 11×11), the lines, and the same glyph flipped — one asset, flipped per
position, never four exports.
```
ENGINEERED | DESIGNED
FOR MOTION. | FOR THE UNKNOWN.
BUILT TO ENDURE. | READY FOR ANYTHING.
```
Left block is left-aligned, right block right-aligned.
- **The claim**, the page's only `h1`, centred, `bottom: 7.375rem`, lede size, `line-height: 0.9`.
Each line is its own element so the hand-set breaks survive whatever the face measures:
```
WEATHER-RESISTANT. THERMAL INSULATION.
OVERSIZED FIT. LIMITED QUANTITY.
```
Run both through `keepSentences`.
- **The CTA**, centred, `bottom: 2.5rem`: `SHOP NOW`.
- **Two corner cards**, `bottom: 2.5rem`, `height: max(4.25rem, 68px)`, bordered at 25% white, on an
opaque lattice panel:
- left, `left: 2.5rem`, width `max(16.4375rem, 263px)`: the globe glyph (`hero-icon-globe.svg`,
37×23) with the caption `EST.2022` under it, a 1px vertical rule at 25%, then
`BUILT ON EXPERIENCE. / DRIVEN BY INNOVATION. / FOCUSED ON YOU.`
- right, `right: 2.5rem`, width `max(13.875rem, 222px)`: the reticle glyph
(`hero-icon-target.svg`, 23×23), no caption, rule, then
`WORLOWIDE SHIPPING / FAST & SECURE DELIVERY` — the typo is in the design; keep it.
**Each glyph gets its own idle**, driven by a sine on the shared ticker and only while it is on
screen. The **globe turns about its vertical axis** — a real `rotateY` under a short perspective,
not a `scaleX`: both narrow the glyph, but only perspective grows the near edge while the far edge
shrinks, and that asymmetry is the difference between reading as a turn and reading as a squash.
```js
GLOBE_PERIOD_S = 3.4; GLOBE_SWING_DEG = 58; GLOBE_PERSPECTIVE = 110; // px
transform = `perspective(110px) rotateY(${sin(t/3.4 * 2π) * 58}deg)`
```
It swings either side of face-on rather than turning all the way round: past 90° a flat glyph
mirrors and a sphere must never read as inside-out.
The **reticle does not rotate — a sight is aimed, not swept**. It pings: sharp rise, slower fall,
then rest for most of the period.
```js
RETICLE_PING_S = 2.4; ATTACK = 0.1; RELEASE = 0.32; GAIN = 0.16;
// envelope over the phase, smoothstepped: e = env*env*(3 - 2*env)
transform = `scale(${1 + e * 0.16})`; opacity = 0.78 + 0.22 * e;
```
Size both glyphs in **rem**, not their intrinsic pixels — they were the only two images on the page
that did not scale with the frame, and at 1280 the reticle sat off the centre of its cell.
**The decode cascade**, in ms after load (the hero is above the fold, so it fires on mount):
```js
navStep 60 · cart 240 · marker 140 (markerStep 80) · title 260 (titleStep 110)
cta 420 · badgeStart 480 · badgeEnd 540 (badgeStep 60)
```
The artboard boots up rather than arriving all at once. Fade each block in with a spring while its
glyphs are still resolving, so the finished sentence is never briefly on screen before its own decode
starts. Badges and CTA also translate from `y: 12px`; the corner glyphs just fade at `delay 120`.
**Below the frame** the hero is a flow column with `justify-content: space-between`, the header's
5rem taken off the screen: the two markers **lead** (in the artboard they flank the garment; stacked
they landed under it, on top of everything), then the product box, then claim + CTA as one group,
then the two badges as a **grid with equal rows** — side by side a flex row matched their heights,
stacked a flex column left each as tall as its own copy (78 against 60), which is the one thing these
two must never be.
### 2 — Details
`height: 50rem` inside the centred box. The travelling garment runs full-bleed behind it.
- **Headline** `top: 7.625rem; left: 2.5rem; width: 21.5rem`, 70px, `line-height: 0.8`,
`letter-spacing: -0.02em`, `text-box: trim-both cap alphabetic`: **DETAILS MATTER.**
The 344-unit column is exactly wide enough for "DETAILS" and is what forces the break before
"MATTER." The `text-box` trim is **load-bearing, not a nicety**: at leading 0.8 the two lines occupy
a 112-unit box while the artboard measures the headline at 95 — without the trim the 36-unit gap
below measures from the wrong edge and the standfirst sits 17 units low. Browsers without support
fall back to the untrimmed box, which is a slightly loose gap, not a broken layout.
- **Standfirst** beneath it, `gap: 2.25rem`, lede size at 40% white, `text-transform: uppercase`
(store it in sentence case and uppercase in CSS, so a screen reader is handed a sentence rather
than shouting):
*"A technical outer layer made for movement, changing weather and everything that happens beyond
the expected."*
- **Five numbered rows**, `top: 7.625rem; right: 2.5rem; width: 26.0625rem`, `gap: 0.75rem`. Each is
an **opaque lattice panel** with a 25% border and `padding: 1rem` — not a transparent card. That is
what the artboard draws, and on this screen it is also what makes the copy legible: the garment
runs full-bleed behind these rows, and 40%-white prose over a lit sleeve is unreadable.
A left rail is `justify-content: space-between` against a stretched cross-axis, which pins the
numeral to the top and the icon to the bottom — which is why the rows are **not all the same
height**: a three-line body is 122 units and row 01 is 102, the icon simply following the text down.
Numerals at 25% white, `aria-hidden` (the `<ol>` already carries the ordering). Icons `2rem`,
lifted by `calc(1.125rem * 0.155)` — `space-between` puts the mark's box on the same line as the
paragraph's, and a line box runs below its own baseline by the font's descent.
```
01 WEATHER-RESISTANT SHELL WATER-REPELLENT OUTER SHELL PROTECTS AGAINST WIND AND RAIN.
02 THERMAL INSULATION ADVANCED PADDING TRAPS HEAT AND KEEPS YOU WARM WITHOUT UNNECESSARY WEIGHT.
03 REINFORCED CONSTRUCTION DURABLE STITCHING AND STRUCTURAL PANELS FOR ADDED STRENGTH.
04 FUNCTIONAL STORAGE MULTIPLE ZIPPERED POCKETS INSIDE AND OUTSIDE TO CARRY ESSENTIALS.
05 OVERSIZED FIT RELAXED SILHOUETTE FOR MOVEMENT, LAYERING AND EVERYDAY COMFORT.
```
Titles at full white, bodies at 40%, `gap: 0.75rem`. Column gutter `3rem` at the frame, `1.5rem`
below it.
- **CTA** `bottom: 2.5rem; left: 2.5rem`: `EXPLORE THE JACKET`.
**Only the titles decode.** The bodies are 60-odd characters of prose, and running five of those at
once turns a section of copy into noise — the effect works because it is applied to labels. (Do decode
the bodies at `+60ms`, but never simultaneously with each other.)
Reveal cascade, on entering view: `heading 0 · lede 120 · cta 200 · feature 80 (featureStep 90)`.
Below the frame: flow column, rows two-up from `sm` with the last spanning both columns.
### 3 — Collections
`height: 50rem` inside the centred box.
- **Headline** `top: 8.125rem; left: 2.5rem`, same 70px setting and trim: **COLLECTIONS.**
- **Standfirst** `top: 7.625rem; right: 5.375rem; width: 17.8125rem`, lede at 40% uppercase:
*"Technical jackets for changing weather, movement and everyday use."* The 86-unit gap to the right
margin is the composition — a lede tucked under the card row's right-hand end.
- **Four cards**, `top: 14.25rem; inset-inline: 2.5rem`, a flex row of equal `flex: 1` shares with
`0.75rem` gaps. (The artboard puts them at x 40, 383, 726, 1069 at 331 wide: 4×331 + 3×12 = 1360 =
1440 − 80. Express it as the row it is so the arithmetic cannot drift.) Each card is
`height: 27.875rem`, a 25% border, `padding: 1rem`, contents pushed apart — **and no fill**: the
page's lattice runs behind them, which is the light from one source rather than two in phase. The
garments are lit-on-black renders, so what the grid shows through is their ground, not the jackets.
Card contents, top to bottom:
- a row with the index at 25% white and `collections/collections-corner.svg` (13×13) at the right;
- the title, held to **13.5625rem (217 units)** — not decoration: it is what forces the break before
"JACKET" on all four names. Left to the card's full 297-unit column, "SHADOW PUFFER JACKET" fits
on one line and the break is lost. 217 is the widest of the four the artboard sets, so one value
reproduces every break. Title size 26px, price at 40% white lifting to full on hover/focus-within;
- the photograph, `position: absolute`, `18.5625rem` square, `object-fit: contain`, centred, in a
layer of its own **behind** the text column;
- a **swatch column** of four 0.75rem squares, `top: 50%; right: 1rem; translateY(-50%)`, gap
0.25rem: the active one filled white, the rest a 25% hairline brightening on hover. It is a real
view switcher — every view is rendered and cross-faded rather than swapped, so the card never
flashes an empty box while a photograph decodes, and the switch costs only an opacity change.
One photograph per product exists so far, so the other three swatches currently land on it: the
control is real, the pictures are missing;
- a `2.3125rem` band holding the tag chips **and** a SHOP NOW link in the same absolute box, so the
swap cannot change the card's height. Chips are bordered at 40% white with `0.875rem` side
padding; the link is bordered at full white with the same padding and a 10×6 arrow at its right
end. At rest chips are visible and the link is `opacity: 0` **and `pointer-events: none`** —
without that, the whole band was an unmarked tap on a phone that navigated away. On hover or
`:focus-within` they trade. Under `@media (hover: none)` the link is shown **permanently** and the
chips hidden, or a phone shows the chips for ever and the card's actual action never appears.
```
01 SHADOW PUFFER JACKET $480 collections-lime.png OVERSIZED FIT · LIMITED QUANTITY
02 TACTICAL HOODED JACKET $395 collections-rose.png LAYERING PIECE · UTILITY
03 THERMAL BOMBER JACKET $340 collections-copper.png THERMAL INSULATION · WINDPROOF
04 TECH SHELL JACKET $520 collections-cobalt.png WATER-RESISTANT · BREATHABLE
```
The four photographs are four colourways of one garment, dealt to the four names in a drawn order.
- **CTA** `bottom: 2.5rem`, centred: `VIEW ALL JACKETS`.
**The tilt.** The card turns towards the corner the cursor is in and the garment stands off its face.
Three elements, each with one job:
```js
// the <li> owns the lens
stage: { perspective: "60rem" }
// the panel inside owns the rotation and preserve-3d
surface: { transformStyle: "preserve-3d",
transform: `rotateX(${-ny * 6.5}deg) rotateY(${nx * 6.5}deg)` }
// the photographs sit in their own layer with a constant translateZ
layer: { transform: `translate3d(${nx * 0.55}rem, ${ny * 0.55 * 0.7}rem, 2.5rem)` }
spring: { tension: 170, friction: 26, mass: 1 } // no overshoot
```
`nx`/`ny` are −1..+1 across the card, clamped. **The corner under the cursor goes away**, so the card
leans *towards* the hand — reversed, it reads as the card dodging the cursor. The parallax is the
projection's own doing, not a second animation kept in step with the first; the small pointer-driven
translate on top carries the effect on the axis the tilt cannot, keeping it alive while the card is
still nearly flat on. The Z is constant so the layer stands off the card at rest too and does not
appear to detach the moment the cursor arrives. Slower than a hover fade on purpose: the cursor is a
noisy input and the box is large. Mouse pointers only; skip under `prefers-reduced-motion`.
**The panel must be a separate element from the reveal.** The entrance writes a transform and an
element can only have one — the tilt and the entrance would overwrite each other on the same node.
Reveal cascade: `heading 0 · lede 120 · card 80 (cardStep 90) · cta 460`.
### 4 — Technology
**Five artboards, one composition.** The frames are *states*, not sections: heading, standfirst and
stack are identical in all five and only the card moves. So the section is one pinned stage inside a
tall region:
```js
const LAYER_STEP = 0.4; // viewports per layer after the first
const regionHeight = n => 1 + (n - 1) * LAYER_STEP; // 5 layers → 2.6
section { height: calc(2.6 * 50rem); } /* frame layout */
stage { position: sticky; top: 0; height: 50rem; }
```
**Measured in artboards, not in viewports.** The stage the walk pins is one artboard tall, so the
region must be counted in the same unit — with `100lvh` the region outran the walk on any screen that
is not 1.8:1 and left dead scroll at the end (34% of a screen at 1280, 57% at 1024, against 22% at
1440). `0.4` is close to the floor: below roughly 0.35 the stack skips a card under a trackpad flick,
because one inertial scroll covers more than a step.
The stage's box **fills** the stage rather than being centred in it — everything here hangs off the
top, so there is no pair to drift.
- **Headline** `top: 8.5rem; left: 2.5rem; width: 22.9375rem`, 70px:
```
TECHNOLOGY
ENGINEERED TO ENDURE
```
The two lines are **inline with a `<br>`, not flex items** — `text-box: trim-both` trims a block
container's own first and last line boxes, and a flex parent has no text of its own to trim: the
declaration is simply inert there, which put every line 10px low.
- **Closing note** `top: 40.625rem; left: 2.5rem; width: 22.9375rem`, lede at 40% uppercase, set as
three measured lines with `<br>` at the frame and as one running paragraph below it (in flow those
breaks are breaks against nothing — the first line ended a third of the way across and left a hole
the eye reads as a missing word):
```
Every detail has a purpose.
From the protective outer shell to the insulation inside, the jacket is designed
to perform without compromising its form.
```
- **The reel**, `top: 8.5rem; inset-inline: 0; height: 38.6875rem; width: 41.5625rem`, centred with
auto margins (**not** `translateX(-50%)` — a transform here isolates what a later pass tries).
#### The scrubbed reel
**Scrubbed, not played**, and drawn on a `<canvas>` over decoded stills rather than a `<video>` whose
`currentTime` is written. Three rounds of tuning got the video scrub to provably optimal seeking and
it still juddered, because the thing being optimised was wrong: a decoder serves whole pictures at
whatever rate it can, and the reader's scroll does not land on picture boundaries. `drawImage` of two
already-decoded frames is synchronous, has no in-flight state to guard, and — crucially — can show
the picture *between* two frames rather than the nearer of them.
```js
const TIERS = { hi: { dir: "hi", side: 768, count: 61 },
lo: { dir: "lo", side: 512, count: 41 } };
const TIER_BREAKPOINT = 1024; // by layout width, NOT device pixel ratio
const FETCH_CONCURRENCY = 6;
const SEEK_FOLLOW = 0.45; // playhead chase, quoted per 60Hz step
const ENTRY_LEAD = 1; // viewports of head start before the stage pins
const RELEASE_LAG = 0.15; // viewports of lag after it releases
const REPAINT_EPSILON = 1 / 255;
```
The binding constraint is **resident memory, not download**: a decoded `ImageBitmap` costs
`side² × 4` bytes however cheap it was on the wire, so the 61-frame set is 137MB the moment it
finishes decoding. A desktop tab carries that; a phone is killed by it. Pixel density is exactly the
wrong signal here — a DPR-3 phone asks for more backing store than the desktop box and has far less
room to hold it.
Fetch the set in order, a few at a time, and use `createImageBitmap(await response.blob())` — it
decodes on a worker thread. Plain `<img>` elements defer their decode to the first `drawImage`, which
is synchronous and on the main thread, putting back exactly the stall this design removes. A frame
that will not load is covered by an outward neighbour search; failing the whole reel over one would
be worse than a longer blend.
**The blend is additive on a cleared canvas, and that is not stylistic.** Drawing frame A then frame B
at `globalAlpha = t` under the default `source-over` is *not* a cross-dissolve: where B is transparent
A survives at full strength, so the stack's old position never leaves and the motion smears.
```js
ctx = canvas.getContext("2d", { alpha: true, desynchronized: true });
ctx.globalCompositeOperation = "lighter"; // set once, never per frame
// per draw:
ctx.clearRect(0, 0, side, side);
ctx.globalAlpha = 1 - t; ctx.drawImage(a, 0, 0, side, side);
ctx.globalAlpha = t; ctx.drawImage(b, 0, 0, side, side);
```
The weights sum to one, so nothing clips, and `lighter` interpolates colour *and* alpha in
premultiplied space, which is the correct dissolve.
**The frames carry a real alpha channel — the black ground is keyed at export, not blended.**
`mix-blend-mode: difference` is the obvious answer for a lit object on black and it does nothing here:
a blend composites against the backdrop *within the nearest ancestor stacking context*, and this
section pins its stage with `position: sticky`, which creates one. Everything the artwork could blend
with — the page's lattice — is outside it. Verified, not assumed: forced to `position: relative` the
blend works; back on `sticky` the black rectangle returns, and the pin is not negotiable.
The **poster** (`technology/technology-stack.webp`, 1024×954) is still flat, so it keeps an SVG
filter tuned to match the baked key exactly, and it is the element that carries the alt text — *"The
jacket's five material layers, separated and stacked"*:
```html
<filter id="reel-key" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 7 7 7 0 -0.04" />
</filter>
```
**Equal weights, not luminance.** True luminance weights blue at 0.07 and this artwork is blue and
violet — the outer shell's own deep blue would key out with the ground. The `-0.04` floor takes the
ground's own noise to zero (measured: the ground is 0 of 765 at the median, 3 at the 95th percentile)
and is what lets the weight be steep enough to hold the dark layers solid. `7`, not a gentler value:
the bottom two layers are genuinely dark — the lining sheet's median pixel is 0.14 of full brightness
— and a gentle weight left them at a third of opacity with the page's grid reading straight through.
Fade the poster to `opacity: 0` the moment there is a real picture under it; keep it in the tree so
the artwork is described exactly once and the canvas can stay `aria-hidden`.
Progress: where the stage is pinned, `clamp((lead - sectionTop) / (lead + travel))` with
`lead = viewport × ENTRY_LEAD` and `travel = section.offsetHeight - viewport` — the lead is part of
the run, not an offset on it, so the reel still ends exactly where the card walk does; it simply
starts before the stage has locked. At 0 lead the first frame is what the reader sees for the whole of
the screen's arrival and it only starts moving once pinning finishes: the picture is dead exactly
while the eye is on it. Below the frame, progress is the box's own crossing of the viewport.
The playhead chases that with `follow = 1 - (1 - 0.45)^(delta / (1000/60))` and the canvas is drawn at
`playhead * (count - 1)`. Skip the draw when the blended position moved less than `1/255` of the gap
between two frames — below that the 8-bit blend weight cannot change a pixel.
The exit ramp is applied to **the reel alone**, not the stage — the heading, the note and the walking
card leave with the screen and only the picture hangs back, which is the parallax the rest of the page
already reads as depth. Same `λ(1 − e^(−x/λ))` shape as the product, at `λ = 0.15` viewports. Measure
`released` on the **parent box**, never the canvas: a transformed element's own rect includes the
transform, so measuring there feeds the drop back into its own input and the ramp stalls at a fixed
point a third of the way in.
#### The card walk and its leader line
One card at a time, `right: 2.5rem; width: 26.0625rem`, an opaque lattice panel with a 25% border and
`padding: 1rem`, laid out exactly like a details row (index, icon, title, body) with a `3rem` gutter.
All five are rendered and cross-faded rather than swapped — the markup never changes, so there is
nothing to re-layout on a scroll frame, and a screen reader is handed all five specifications
regardless of scroll position. This is **not** a list: they are five states of one description, and
`display: contents` on an `<li>` drops the item out of the accessibility tree in some engines.
Read progress once per frame from the region and set the active index only when it actually changes:
`active = min(n - 1, floor(progress * n))` — equal bands, the last running to the end. The active
card's title and body **re-decode each time it becomes active** (title at 0, body at 90ms): the card
is the only thing that moves, so the decode is what marks the step.
```js
cardTop: [136, 236, 370, 492, 658] // artboard units, from the stage's top
cardSideY: [197, 287, 431, 553, 709] // where the line meets the card's left edge
anchorFx: [0.600, 0.707, 0.773, 0.855, 0.822] // fractions of the drawn artwork
anchorFy: [0.145, 0.354, 0.477, 0.576, 0.740]
```
The card coordinates are the artboard's own — each card is hand-placed against the layer it describes
and this is art direction rather than derivable layout, which is why `cardSideY` is not `cardTop` plus
a constant (the cards are two or three lines tall). The anchors are fractions of the artwork,
each checked to land on the layer its card names: the wet outer sheet, the ripstop mesh, the quilted
insulation, the pale membrane, and the lining at the bottom.
**Draw the leader line rather than exporting five SVGs.** It is one construction — a diagonal and an
8-unit square — whose only variables are its two endpoints, and deriving it from the same numbers that
place the card means it cannot come loose when either moves. Neither end has a fixed artboard x: the
card is pinned to the right margin and the artwork is centred.
```js
const CARD_INSET = 457; // 40 margin + 417 card, from the canvas's right edge
const ARTWORK = 619; // the DRAWN square — as tall as its box (38.6875rem), not the box's width
const ARTWORK_TOP = 136; // the box's top edge on the stage
const MARKER = 8;
offset = (anchorFx - 0.5) * ARTWORK;
anchorY = ARTWORK_TOP + anchorFy * ARTWORK;
// the svg box:
left: calc(50% + ${offset}units)
top: min(anchorY, cardSideY)
width: calc(50% - ${CARD_INSET + offset}units)
height: max(1px, abs(cardSideY - anchorY))
```
The `<svg>` is `viewBox="0 0 100 100" preserveAspectRatio="none"` holding **only** the diagonal, with
`vector-effect="non-scaling-stroke"`. **The square is a separate plain element**, sized in artboard
units — `preserveAspectRatio="none"` stretches everything in the box, which leaves the diagonal
correct and would turn a `<rect>` marker into a rectangle. The line is drawn at 25% white; the square
is drawn in **full white**, because it is the one part that has to be *found* — at a quarter opacity
over an artwork this busy it read as a speck of the render rather than a mark on it.
The cards carry their own entrance (from `translateY(1rem)`, opacity 0) rather than a wrapper: a
transformed wrapper becomes the containing block for its absolutely positioned descendants and would
silently re-base every card off the artboard's coordinates.
```
01 OUTER SHELL Durable outer layer that repels water and protects against wind and rain.
02 RIPSTOP PROTECTION Tear-resistant layer adds durability and prevents wear.
03 THERMAL INSULATION Advanced padding traps heat and keeps you warm without unnecessary weight.
04 BREATHABLE MEMBRANE Allows moisture to escape while blocking wind and water from outside.
05 COMFORT LINING Soft inner layer for all-day comfort and easy layering.
```
Bodies are stored in sentence case and uppercased in CSS. Icons `technology/technology-icon-01…05.svg`.
**Below the frame there is no pinning and no walk**: the reel sits in the flow (four fifths of the
column, centred, square then 4:3) and all five specifications follow it as a plain stack of lattice
cards, two-up from `sm` with the last spanning both. Pinning a viewport-tall stage on a phone and
asking for three screens of scrolling to read five short paragraphs is a worse reading of the same
content. Build the reel only when the section is near — twelve megabytes, seven screens down.
### 5 — FAQ
`height: 50rem` inside the centred box, `overflow: hidden`. The pinned second garment runs off the
bottom-left corner **behind** the questions — it is the screen's ground.
- **Headline** `top: 8.5rem; left: 2.5rem; width: 16.125rem`, 70px: **NEED TO KNOW.**
- **A description list**, `top: 8.5rem; right: 2.5rem; width: 42.125rem`, `gap: 0.75rem`. Five
questions and their answers is exactly what `<dl>/<dt>/<dd>` is for, and it makes the section
eligible for FAQ structured data. The consequence is a strict content model — inside a `dl` a row
wrapper may hold only `dt` and `dd` — so **the artboard's vertical rule is drawn as a border on the
answer**, with the 32-unit gap split either side of it.
Each row is an opaque lattice panel, 25% border, `height: 7.125rem`, `padding-inline: 1rem`. The
`dt` is `width: 12.1875rem`, centred vertically, question above index (`gap: 2rem`); the `dd` is
`margin-left: 2rem; padding-left: 2rem; border-left: 1px solid rgb(255 255 255 / 0.25)`, at 40%
white uppercase.
**The answer is top-aligned with a measured `padding-top: 0.92rem`, not centred.** The artboard
centres the answer in its own 112-unit box while the question sits in a centred column beside it, so
their first lines never met — the answer began 0.77rem above the question at every width, 1440
included.
Questions are capped at **175 units** (`10.9375rem`), except question 02 at **195** — the width the
artboard wraps each one to. Apply the cap **only at the frame breakpoint**: below it the row is the
full width of the card with nothing to wrap around, and the same cap broke a question that fits
comfortably on one line into three. Do **not** run the questions through the word-binder — a heading
needs to be free to break between "OR" and what follows; ties are for prose.
```
01 HOW DO I CHOOSE THE RIGHT SIZE?
Check our size guide for measurements and fit information. The jackets feature an oversized
silhouette for comfortable layering.
02 WHAT MATERIALS ARE USED IN THE JACKETS?
We use technical fabrics, ripstop weave and advanced insulation for durability, protection and comfort.
03 HOW SHOULD I CARE FOR MY JACKET?
Follow the care instructions provided. Avoid harsh detergents and excessive heat to preserve the materials.
04 DO YOU SHIP INTERNATIONALLY?
Yes. We offer worldwide shipping with secure delivery and tracking on every order.
05 CAN I RETURN OR EXCHANGE MY ORDER?
Yes. Unworn jackets can be returned or exchanged within the specified return period.
```
Reveal: `80ms + index × 90ms`, answer at `+60`.
**Below the frame the column reverses** — index above question. The artboard puts the index under the
question because the two sit in a column beside the answer; read top to bottom on a narrow screen
that is index-last, which is backwards. Keep question-first in the markup, where a reader needs it,
and flip the column with `flex-direction: column-reverse`.
### 6 — Footer
`height: 21.875rem` — **350 units, not 800.** Every other artboard in this file is a full 1440×800
frame, but this one's content stops at 326 and Figma renders the node at 350, so the footer is given
its own height rather than a screen's worth of empty lattice.
- Logo `top: 1.5rem; left: 2.5rem`, drawn larger than the header's: `2.5rem × 6.1875rem` (40×99).
- **Four link columns**, `top: 1.5rem; left: 18.5625rem`, `gap: 3rem`, each `width: 7.5rem` (the last
auto). Headings at full white, links at 40% brightening to full on hover over `duration-fast`:
```
SHOP TECHNOLOGY ABOUT SUPPORT
CORE MATERIALS PRIVACY POLICY
TECH CONSTRUCTION Terms & Conditions
LIMITED SIZE GUIDE
SHIPPING & RETURNS
FAQ
```
- **The newsletter form**, `top: 1.5rem; right: 2.5rem; width: max(15.3125rem, 245px)`. Built as a
**real form**, deliberately: the artboard draws a bordered box with "Your e-mail" in it, an arrow,
and a small square beside a consent line — a *picture* of a control. Rendering that as static text
would put a lie in the accessibility tree.
- a label: `STAY AHEAD OF THE DROP.`
- `<input type="email" autocomplete="email" placeholder="Your e-mail">` inside a full-white border,
with the padding **on the input, not the box** — on the box it is dead space and most of what
looks like the field does not focus it. `padding: max(0.875rem,14px) max(1rem,16px)`.
- a submit `<button>` with the 10×6 arrow and a visually-hidden "Subscribe".
- `<input type="checkbox">` styled with **both** `appearance: none` and `-webkit-appearance: none`
(without the prefixed one Safari keeps drawing a filled white box that reads as a stray square):
`0.625rem`, a 25% hairline that fills white when checked and brightens under the pointer.
- the consent label at fine size, 25% white, uppercase: `I AGREE TO RECEIVE UPDATES.`
- **There is no endpoint.** `preventDefault` on submit rather than letting a form with no action
reload the page with the address in the query string.
Floor every gap and the field's padding at the artboard value with `max()` — the type inside stops
shrinking below 1024, so spacing that kept shrinking left the consent line sitting on the field. The
floor must **equal** the artboard value, never exceed it, or it bites at 1440 too.
- **A rule**: 1px at 25% white, `top: 17.875rem; inset-inline: 2.5rem`.
- **The closing line**, `top: 19.375rem`: `© 2026 ARTEFAKT. ALL RIGHTS RESERVED.` at 25% white on the
left margin, and `INSTAGRAM / YOUTUBE / TIK-TOK` on the right. The separator is the literal text
`" / "`, **spaces included** — on a monospaced face those two spaces are 19 units of the row's
width, and dropping them pulls the whole row 16 left. Anchor the row to the **right** margin: the
artboard's own left value only lands flush for one exact set of glyph widths.
Below the frame the two invert — links first, the notice last at chip size, where it fits on one line
and reads as the footnote it is.
## The bracketed button
Both CTAs are one control: `height: 2.875rem`, `padding-inline: 1.25rem`, a `2rem` gap to a 10×6
arrow, lede-size label, a **full-white** border, on an opaque lattice panel (the fill both artboards
put behind it, and what keeps the label readable where the garment runs behind it).
**Hover adds nothing to the box.** Two earlier attempts filled it — a solid white inversion, then a
10% wash — and both were rejected for the same reason, worth stating so it is not tried a third time:
nothing on this page is filled. Every surface is near-black and every edge is a hairline, so any wash
reads as a muddy grey rectangle borrowed from a different site.
Instead **four corner brackets converge on it** — the same glyph the hero's edge statements are
bracketed with, and the same gesture as the reticle badge: a target being acquired. Each is a
`0.625rem` box with two borders, at `-0.75rem` from its corner (12px out against a 10px glyph, so each
clears the box's own corner by 2px and reads as a separate frame closing in, not as a thickening of
the border), sitting a further 4px out and `opacity: 0` at rest, arriving at `translate(0,0)` and
`opacity: 1` on `:hover` / `:focus-visible` over `duration-normal`. The arrow nudges 4px right. The
label decodes on its own, because the scramble already fires on `mouseenter` and `focus`.
The brackets **are** the focus indicator, so drop the default outline to avoid two rings — but bring
it back under `@media (forced-colors: active)`, where a palette you do not control is substituted and
four hairlines are not something to stake keyboard access on.
## Touch targets
The artboard draws for a cursor: nav labels resolve to an 11px-tall box, the collections swatches to
12×12, the newsletter arrow to 10×6. Fine for a mouse, unusable with a thumb — and simply making them
bigger would be redrawing the design. So the **hit area grows and the drawing does not**: an empty
`::before` stretched past the element's own box, which the browser hit-tests and nobody sees.
```css
.tap-area { position: relative; }
.tap-area::before { content: ""; position: absolute;
inset: calc(var(--tap-y, 0.75rem) * -1) calc(var(--tap-x, 0.5rem) * -1); }
```
Apply it **only below the frame breakpoint**, and keep the vertical inset at or under half the gap to
the neighbour or two targets fight over the same pixels. Do not put it inside anything that scrolls
horizontally.
Also: below `sm` a paragraph is twenty-nine characters wide, and greedy wrapping leaves a rag that
swings by a third and breaks words at their hyphens. Give short paragraphs `text-wrap: balance` there
— measured, it took a page of mobile prose from 18 lines ending on a short word to 5.
## Accessibility
- One `<header>` banner for the whole page and one `<footer>` — do **not** rebuild the header inside
each section, however the artboards draw it.
- A "Skip to content" link, visually hidden until focused, to `#main`.
- `<h1>` is the hero claim; each section has an `<h2>` and is `aria-labelledby` it.
- The canvas carries `role="img"` and the product's label; the reel's poster carries the alt text and
the canvas is `aria-hidden`.
- Index numerals are `aria-hidden` inside ordered lists — the list already carries the ordering.
- Every focusable control gets `outline: 2px solid #fff; outline-offset: 2px` on `:focus-visible`,
except the bracketed buttons (see above).
- Under `prefers-reduced-motion: reduce`: no scramble, no smooth scroll, no cursor tilt, no badge
idles, no sleeve springs. The page still works; it simply stops moving.
## Assets
All fetched from `https://storage.getlayers.ai/assets/artefakt-5f7a0c9962/`. Set that as one
`ASSET_BASE_URL` constant and build every path from it.
| file | used by |
|---|---|
| `fonts/3270-Regular.otf` | the page's only typeface |
| `hero/hero-jacket.glb` | the product, both instances — **Draco-compressed, needs `DRACOLoader`** |
| `hero/hero-wordmark.png` | the chromed backdrop plate (5028×2684) |
| `hero/hero-bracket.svg` | the corner glyph on both edge statements, flipped per position |
| `hero/hero-caret.svg` | the COLLECTIONS submenu caret |
| `hero/hero-icon-globe.svg` · `hero-icon-target.svg` | the two corner-card marks |
| `ui/logo-mark.png` | header, footer and preloader wordmark |
| `ui/arrow-right.svg` | the CTA buttons, the card links and the newsletter submit |
| `details/details-icon-{shell,thermal,construction,storage,fit}.svg` | the five specification rows |
| `collections/collections-{lime,rose,copper,cobalt}.png` | the four product photographs (1080²) |
| `collections/collections-corner.svg` | the card's corner mark |
| `technology/technology-icon-01…05.svg` | the five layer cards |
| `technology/technology-stack.webp` | the reel's poster (1024×954), keyed with the SVG filter |
| `technology/stack-frames/hi/000…060.webp` | the 61-frame desktop reel, 768², alpha baked in |
| `technology/stack-frames/lo/000…040.webp` | the 41-frame mobile reel, 512², alpha baked in |
Frame paths are zero-padded to three digits: `${ASSET_BASE_URL}/technology/stack-frames/hi/007.webp`.
The DRACO decoder comes from the three.js CDN, **not** from this bucket:
`loader.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.185.0/examples/jsm/libs/draco/gltf/")`.
**A failed asset load must be visible.** Wrap the model load, the reel fetches and the font in a
`catch` that puts a banner on the page naming the URL that failed. A blank product box with a console
error is how a broken page ships unnoticed — and this page has three things that would each fail
silently: a model that never decodes leaves an empty canvas over a wordmark plate, a reel that never
arrives leaves the poster looking correct but frozen, and a font that never resolves changes every
measured column width on the page.