AURELIA Jewels — Every Piece, Understood

Six exploded views of fine jewellery, and not one of them is a video. Each 8-second clip is cut into 120 WebP frames and drawn onto a canvas whose frame index is the scroll position — so the solitaire comes apart as you scroll down and reassembles as you scroll back, at exactly the speed of your hand. That is the Apple product-page technique, and it is chosen over a scrubbed video on purpose: a frame index cannot land between keyframes, so there is no seek to gate, no decoder to wait on, and no stutter to damp. The cost is paid up front instead, in bytes, and the build spends it carefully — 720 frames at 1920px for desktop and a second 720 at 960px for phones, each sequence loading only when its section is within 1.5 viewports, one at a time, hero first. Frames decode through createImageBitmap and draw with object-fit: cover arithmetic, so nothing stretches at any window size. The extraction is its own small pipeline: ffmpeg picks 120 evenly spaced frames under one shared colour pass so all six clips match, then an OpenCV pass inpaints the generator's sparkle watermark out of every frame and, on the hero clip, the baked-in annotation labels and leader lines — edge-aware, so the gold and the studio gradient survive it. Colour-keying the backdrop was measured and rejected: these clips carry a lit gradient rather than a flat field, so the canvas edges are blended into the page with CSS instead. Cormorant Garamond over Inter on ivory, a single gold accent, and captions positioned as fractions of the frame so they point at the right part at any size.

Paste the prompt intoClaude CodeCursorAntigravityWindsurfLovableBoltv0

aurelia-jewels/
├─ public/  1441 files
├─ src/  6 files
├─ scripts/  3 files
├─ README.md
├─ index.html
├─ package.json
└─ … 5 more