You Don't Need JS For That
Español
Showcase · CSS features in a single UI

Everything learned, combined into a product drop

A real product landing —the Amber‑01 headphones— bringing together the features of this site: gallery with scroll-snap, native buttons and markers; scroll-driven progress; arrow via scroll-state queries; color variant with base-select + :has(); bars measured with typed attr(); chips staggered with sibling-index(); specs animated with ::details-content; a note that grows with field-sizing; Invoker API checkout — and a "?" badge on every piece explaining which feature it uses.

Combines: All in CSS0 KB of JS · native a11y
View the panel ↓
Limited drop · 200 units

Amber‑01

Wireless headphones with adaptive ANC and 40 h of battery.

Fluid typography with clamp(), superellipse corner-shape cards and a layout that reorganizes with container queries.
01 · Amber
02 · Moss
03 · Ocean
04 · Violet
Gallery progress animated with animation-timeline (scroll-driven).Gallery with scroll-snap, native buttons and markers (::scroll-button / ::scroll-marker).The arrow appears via scroll-state queries only while gallery content remains.Sparks positioned, sized and animated with random().
$249$299−17%A single oklch() --accent drives the palette; surfaces are blended with color-mix().
Variant picker with appearance: base-select; the whole accent switches via :has(option:checked).
In numbersBars measured with typed attr(): width: attr(data-level type(<percentage>)).
Battery
Comfort
ANC
Bluetooth 5.4LDACMultipointFast chargeIPX5Chips staggered with transition-delay: calc(sibling-index() × .07s).
SpecificationsSpecs as animated details: ::details-content + interpolate-size.
Drivers ⌄

40 mm drivers with LDAC and app calibration. This accordion animates with ::details-content + interpolate-size, no JS.

Connectivity ⌄

Bluetooth 5.4 multipoint, dual pairing and USB-C / 3.5 mm wired mode.

In the box ⌄

Amber-01 headphones, hard case, braided USB-C cable and jack adapter.

The note grows on its own with field-sizing: content.
Checkout with command/commandfor: HTML Invoker API, zero JS.
ExtrasThe whole drop degrades gracefully thanks to @supports guards: every experimental feature has its fallback.The tagline width is resolved inline with the conditional if() function.Supported? View the full page →
Order reserved ✓

This dialog opens with command="show-modal" (HTML Invoker API) and animates with @starting-style + allow-discrete. Not a line of JS.

How is it built?

Every zone of the drop uses different features: the title scales with clamp(); the gallery scrolls with snap, native buttons and markers; its progress bar animates with animation-timeline; the arrow appears via scroll-state queries; sparks are placed with random(); the variant recolors everything via :has(option:checked); bars are measured with typed attr(); chips stagger in with sibling-index() and @starting-style; specs open with ::details-content and interpolate-size; the note grows with field-sizing: content; checkout opens a dialog with command="show-modal" (Invoker API); and every "?" badge anchors its tooltip with position-anchor. No <script> on the entire site.