Todo lo aprendido, combinado en un drop de producto
Una landing de producto real —los auriculares Amber‑01— que junta las features de este sitio: galería con scroll-snap, botones y markers nativos; progreso scroll-driven; flecha con scroll-state queries; variante de color con base-select + :has(); barras con attr() tipado; chips escalonados con sibling-index(); specs animadas con ::details-content; nota que crece con field-sizing; checkout con Invoker API — y un badge "?" por cada pieza que explica qué feature usa.
Ver el panel ↓Amber‑01
Auriculares inalámbricos con ANC adaptativo y 40 h de batería.
clamp(), tarjetas con corner-shape superellipse y layout que se reorganiza con container queries.animation-timeline (scroll-driven).Galería con scroll-snap, botones y markers nativos (::scroll-button / ::scroll-marker).La flecha aparece con scroll-state queries solo mientras queda galería por ver.Chispas posicionadas, dimensionadas y animadas con random().--accent en oklch() gobierna la paleta; las superficies se mezclan con color-mix().appearance: base-select; el acento entero cambia vía :has(option:checked).transition-delay: calc(sibling-index() × .07s).Drivers ⌄
Drivers de 40 mm con LDAC y calibración por app. Este acordeón se anima con ::details-content + interpolate-size, sin JS.
Conectividad ⌄
Bluetooth 5.4 multipunto, emparejamiento dual y modo cable USB-C / jack 3.5 mm.
En la caja ⌄
Auriculares Amber-01, funda rígida, cable USB-C trenzado y adaptador de jack.
field-sizing: content.command/commandfor: HTML Invoker API, cero JS.@supports: cada feature experimental tiene su fallback.El ancho del tagline se resuelve inline con la función condicional if().¿Los soporta? Ver la vista completa →¿Cómo está armado?
Cada zona del drop usa features distintas: el título escala con clamp(); la galería scrollea con snap, botones y markers nativos; su barra de progreso se anima con animation-timeline; la flecha aparece con scroll-state queries; las chispas se posicionan con random(); la variante cambia todo el acento vía :has(option:checked); las barras se miden con attr() tipado; los chips entran escalonados con sibling-index() y @starting-style; las specs se abren con ::details-content e interpolate-size; la nota crece con field-sizing: content; el checkout abre un diálogo con command="show-modal" (Invoker API); y cada badge "?" ancla su tooltip con position-anchor. Ningún <script> en todo el sitio.