Step 4 of 5 · Aura · 2 hrs
Add-ons
Watch a few seconds of each. Prices add to your session.
Option 1 · Media card + morphStyle: SIGNATURE R3 on two columns · Components: 4:5 video canvas, name and price on a blur scrim, full-width Add bar that morphs into − n + (the + never moves) · Art: real edit previews + the Amber room · Motion: 180 ms morph, check pops, one video at a time · Material: blur scrim on media
flex-grow + max-inline-size morph, end-anchored · 2 px --primary stroke + 12 px glow + checkStep 4 of 5 · Aura · 2 hrs
Add-ons
Tap a picture to play or pause it.
Option 2 · Tall posterStyle: film-poster grid · Components: 3:4 canvas, price pill on the canvas, play/pause glyph, name under, full-width Add pill that becomes "− 1 added +" · Art: real previews · Motion: one video plays at a time (the card in view), tap toggles · Material: glass pill on media
IntersectionObserver ≥ 60 % · single global player, relay on 'ended' · previews carry no audio, so the glyph is play/pause, not muteStep 4 of 5 · Aura · 2 hrs
Add-ons
Tap + to add. Details opens the card in place.
Option 3 · Compact tilesStyle: dense square grid · Components: 1:1 canvas, round 44 px + in the corner that grows into a stepper, name + price in two lines, Details expands the card to full width · Art: real previews · Motion: 260 ms layout morph (View Transitions), 180 ms stepper grow · Material: glass corner control
document.startViewTransition + per-card view-transition-name · grid-auto-flow: dense so the row never leaves a holeStep 4 of 5 · Aura · 2 hrs
Add-ons
The footage stays in view while you choose.
Option 4 · Glass labelStyle: full-bleed media, frosted control layer · Components: 2:3 canvas edge to edge, frosted label (name, price, Add → − n +) over the bottom · Art: real previews · Motion: glass brightens on select, 180 ms morph · Material: frosted glass, solid fallback
backdrop-filter blur(18px) saturate(160%) over a 70 % surface tint · selected = 88 % tint + 2 px strokeStep 4 of 5 · Aura · 2 hrs
Add-ons
The hexagon counts what you have added.
Option 5 · Hex badge countStyle: standard card, brand marker · Components: 4:3 canvas, quantity in a pointy-top hex badge on the corner, − n + stepper under the card, one amber dot ("Most popular", true on the live row) · Art: real previews · Motion: hex bumps on change · Material: flat card
hex marker = --hex-clip on a wrapper, scale bump on the wrapper (never the clip) · stepper − disabled at 0