@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/paper.css

@@ -1,68 +1 @@
-/*
- * paper.css — Paper-texture primitives
- *
- * Two composable Tailwind `@utility` declarations:
- *   - paper-underpaint: fixed, app-root, fullscreen SVG turbulence at z-index -1
- *   - paper-grain-overlay: ::after overlay for individual surfaces
- *
- * Texture: feTurbulence baseFrequency 0.65, 4 octaves, desaturated via
- * feColorMatrix, blended multiply (light) / soft-light (dark). Tiles ~60px.
- */
-
-@utility paper-underpaint {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    pointer-events: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
-    background-repeat: repeat;
-    background-size: 60px 60px;
-    opacity: var(--glass-grain-opacity);
-    mix-blend-mode: multiply;
-}
-
-:where(.dark) .paper-underpaint,
-.dark .paper-underpaint {
-    mix-blend-mode: soft-light;
-}
-
-@utility paper-grain-overlay {
-    position: relative;
-    isolation: isolate;
-
-    &::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        pointer-events: none;
-        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend mode='multiply' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
-        background-repeat: repeat;
-        background-size: 60px 60px;
-        opacity: var(--glass-grain-opacity);
-        mix-blend-mode: overlay;
-    }
-}
-
-:where(.dark) .paper-grain-overlay::after,
-.dark .paper-grain-overlay::after {
-    mix-blend-mode: soft-light;
-}
-
-/* ═══════════════════════════════════════════════
-   A11y — respect user motion + transparency preferences
-   ═══════════════════════════════════════════════ */
-@media (prefers-reduced-transparency: reduce) {
-    .paper-underpaint,
-    .paper-grain-overlay::after {
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .paper-underpaint {
-        /* Static noise is fine at rest; only kill animated grain shimmer if any.
-           The underpaint is currently a still texture, but guard future motion. */
-        animation: none !important;
-    }
-}
+:root { --paper-grain-tooth: repeating-linear-gradient( 28deg, oklch(0.9 0.045 84 / 0.5) 0, oklch(0.62 0.052 60 / 0.5) 1.4px, oklch(0.9 0.045 84 / 0.5) 2.8px ), repeating-linear-gradient( -64deg, oklch(0.88 0.04 82 / 0.38) 0, oklch(0.6 0.05 58 / 0.38) 1.75px, oklch(0.88 0.04 82 / 0.38) 3.5px ), repeating-linear-gradient( 10deg, oklch(0.85 0.05 78 / 0.28) 0, oklch(0.7 0.055 66 / 0.28) 3.5px, oklch(0.85 0.05 78 / 0.28) 7px ); --paper-grain-tile: 140px; --paper-grain-relief: none; } @supports (backdrop-filter: blur(1px)) { :root { --paper-grain-relief: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0.31 0.96'/%3E%3CfeFuncG type='table' tableValues='0.25 0.9'/%3E%3CfeFuncB type='table' tableValues='0.15 0.78'/%3E%3CfeFuncA type='linear' slope='0.42' intercept='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } } @utility paper-underpaint { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } :where(.dark) .paper-underpaint, .dark .paper-underpaint { mix-blend-mode: screen; } @utility paper-grain-overlay { position: relative; isolation: isolate; &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--paper-grain-relief), var(--paper-grain-tooth); background-repeat: repeat; background-size: var(--paper-grain-tile) var(--paper-grain-tile); opacity: var(--paper-grain-opacity, var(--glass-grain-opacity)); mix-blend-mode: multiply; } } :where(.dark) .paper-grain-overlay::after, .dark .paper-grain-overlay::after { mix-blend-mode: screen; } @media (prefers-reduced-transparency: reduce) { .paper-underpaint, .paper-grain-overlay::after { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .paper-underpaint { animation: none !important; } }

package/dist/styles/scroll-choreography.css

@@ -1,300 +1 @@
-/*
- * scroll-choreography.css — the SOTA scroll-driven CHOREOGRAPHY register
- * (BB.W-SCROLL-MOTION).
- *
- * Cascade rung AFTER scroll-driven.css. glass-ui owns the native scroll-driven
- * SUBSTRATE (scroll-driven.css `scroll()`/`view()` + the `--demo-main-progress`
- * named timeline + the `supportsCssTimeline` harden) but composes none of the
- * CHOREOGRAPHY — the page-load BUILD, the section CASCADE, the scroll-PINNED
- * fixed-stage-advances-time reveals + the smooth-scroll register. The award-winners
- * hand-roll these on Lenis+GSAP (a 20-40KB JS dependency); glass-ui ships the
- * NATIVE register — the platform now ships `scroll()`/`view()`/`timeline-scope`
- * natively, off the compositor at 60fps (the no-net-dep fence; the 2026
- * universal-support convergence). NO Lenis/GSAP/Locomotive dependency, ever.
- *
- *   .scroll-build   — the route-enter page-build (chrome -> hero -> body, a
- *                     spring-clocked coupled-fade, @keyframes-on-mount [NOT a
- *                     scroll timeline — the build fires on mount], PRM-snapped).
- *   .scroll-cascade — the orchestrated section cascade (per-child view() timeline,
- *                     the implicit stagger [NO setTimeout], the spring-clocked
- *                     coupled transform+opacity build).
- *   .scroll-pin     — the fixed-stage-advances-time scroll-pinned register
- *                     (position: sticky stage + a named scroll-timeline linked via
- *                     timeline-scope; the stage's internal phases advance with
- *                     scroll progress, compositor channels only).
- *   .smooth-scroll  — the native scroll-behavior: smooth opt-in (PRM-gated,
- *                     zero runtime — a smooth-scroll under reduce is a vestibular
- *                     concern, so the smooth interpolation is dropped under PRM).
- *
- * THE DISCIPLINE (mirrors scroll-driven.css EXACTLY — the exemplary outer-gate):
- * the whole register sits under `@media (prefers-reduced-motion: no-preference)`
- * so under PRM no scroll/build animation attaches at all and content renders in
- * its terminal state (the `from` keyframe never applies because the animation
- * never binds; the .scroll-pin stage shows its terminal phase, no sweep). The
- * scroll-driven recipes sit under a second `@supports (animation-timeline: …)`
- * gate so a non-supporting engine gets the STATIC layout (the .scroll-pin stage
- * is a correct non-pinned read, never a broken silent stage).
- *
- * COMPOSITOR-ONLY (the proof:no-layout-animation floor BB.W-CARD-COMPOSITE): every
- * @keyframes step + transition animates ONLY transform/translate/scale/opacity/
- * clip-path — NEVER a layout-triggering property (no height/padding/inline-size/
- * top/grid-template). The SPATIAL (transform) legs ride the per-spring `--spring-*`
- * + the matching `--spring-*-duration` settle clock (P2/P4); the EFFECTS (opacity)
- * legs ride the no-overshoot `--ease-out` bezier (P1/P3 — a fade must never
- * overshoot). The spring tokens are READ-ONLY (the W-GLASS-CAL clock fence — this
- * register THREADS them, it never re-tunes a spring value or a duration).
- */
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-build — the route-enter page-build.
- *
- * A MOUNT-driven entrance (route-enter), NOT a scroll-driven one — so it rides a
- * plain `@keyframes ... animation` (NOT a `view()`/`scroll()` timeline; the build
- * fires on first paint of the new route, not on scroll). It sits under the PRM
- * no-preference gate ALONE (no `@supports (animation-timeline)` — it does not use a
- * timeline, so it runs on every engine; under PRM it never binds, so the page
- * mounts at its terminal state).
- *
- * The coordinated stagger: the .scroll-build container's direct children are the
- * BEATS (chrome, hero, body), each delayed by `--scroll-build-step * --i` (the
- * per-beat coordinated stagger — the page assembles chrome-first, then the hero,
- * then the first section). `--i` is the beat index a consumer sets per child
- * (0-based); the chassis sets it on the chrome/hero/section in reading order
- * (W-HIERARCHY2 owns the ORDER; this register threads the entrance ON it).
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @keyframes gl-page-build {
-        from {
-            opacity: 0;
-            /* SPATIAL leg — the build rise (a transform, compositor-only). */
-            transform: translateY(var(--scroll-build-rise, 1.5rem));
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    /* The page-build container marks the entrance; the beats are its children. */
-    .scroll-build > * {
-        /* The coupled build: the SPATIAL transform rides the snappy spring settle
-           clock (P2/P4 — the page parts arrive with crisp gravity); the opacity is
-           a coupled leg in the SAME keyframe on the SAME clock so the fade tracks
-           the rise as ONE coherent glide (P3 — fade coupled to transform). The
-           no-overshoot bezier governs the FADE channel where the spring's
-           overshoot is not wanted: `--ease-out` is named on the build's title beat
-           (the hero <h1> — audacious type arrives with GRAVITY, not bounce, per
-           W-HIERARCHY2); the other beats ride the snappy spring. */
-        animation: gl-page-build var(--spring-snappy-duration, 0.34s)
-            var(--spring-snappy) both;
-        animation-delay: calc(var(--scroll-build-step, 90ms) * var(--i, 0));
-    }
-
-    /* The hero/title beat: the audacious-type-arrives-with-gravity register — the
-       no-overshoot `--ease-out` bezier (a strictly monotone settle, NO overshoot
-       past the terminal transform), the existing .story-hero-title--enter
-       discipline folded into the ONE entrance system. A consumer marks the hero
-       beat `.scroll-build-hero`. */
-    .scroll-build > .scroll-build-hero {
-        animation: gl-page-build 0.62s var(--ease-out, ease-out) both;
-    }
-}
-
-/* The EXPLICIT P6 carve — under prefers-reduced-motion: reduce the page-build DROPS
-   the spatial transform (no movement — the vestibular floor) but KEEPS a gentle
-   terminal fade-in (the EFFECTS channel survives per P6: fade-keeps, transform-
-   drops). This sits OUTSIDE the no-preference gate as the reduce-arm of the
-   coordinated build (mirroring the transitions.css fade-slide PRM arm — the
-   opacity leg alone under reduce). The build is mount-driven, so the no-preference
-   gate above never binds under reduce; this arm gives PRM users the coupled-FADE
-   terminal entrance with ZERO motion frames (no translateY), the genuine P6 read. */
-@media (prefers-reduced-motion: reduce) {
-    @keyframes gl-page-build-fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    .scroll-build > * {
-        /* fade-keeps (opacity only), transform-DROPS (no translateY) — P6. */
-        animation: gl-page-build-fade var(--duration-fast, 0.16s) var(--ease-out, ease-out)
-            both;
-        animation-delay: 0s; /* no coordinated stagger under reduce — a single calm paint */
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-cascade — the orchestrated section cascade.
- *
- * Extends the bare `[data-scroll-reveal] > *` 6px fade into the SOTA coordinated
- * build: the per-child `view()` timeline stays the implicit-stagger mechanism (each
- * child owns its own timeline — NO setTimeout cascade), but the entrance is the
- * spring-clocked coupled build (a deeper rise + a tighter reveal window). It sits
- * under the PRM no-preference gate + the `@supports (animation-timeline: view())`
- * gate (the scroll-driven.css discipline) — under PRM/non-support the sections
- * render at their terminal state.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        @keyframes gl-cascade-build {
-            from {
-                /* EFFECTS leg — the coupled fade (no overshoot). */
-                opacity: 0;
-                /* SPATIAL leg — the build rise (a transform, compositor-only). */
-                transform: translateY(var(--scroll-cascade-rise, 1.25rem));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .scroll-cascade > * {
-            /* The view()-timeline drives the build off each child's OWN entry into
-               the viewport (the implicit stagger). The progress-bound timeline maps
-               the entrance across the `animation-range` window; the keyframe's
-               coupled transform+opacity build is the orchestrated cascade (vs the
-               bare 6px reveal). `linear` is the right easing for a SCROLL-bound
-               progress map (the spring shaping lives in the section's own settle
-               where the build is mount-driven; a scroll-bound timeline reads
-               1:1 with scroll position — a spring on a scrubbed timeline reads as
-               a scrubbed spring, which is correct here as the linear progress map). */
-            animation: gl-cascade-build auto linear both;
-            animation-timeline: view(block);
-            animation-range: entry 0% entry var(--scroll-cascade-range-end, 45%);
-        }
-
-        /* The horizontal-scroller variant — a `view(inline)` axis. */
-        .scroll-cascade.scroll-cascade--inline > * {
-            animation-timeline: view(inline);
-        }
-
-        /* The OPT-IN column-stagger variant (the Codrops nuance — even columns
-           from top, odd from below). A GRID-surface flourish, NOT the default (the
-           proportion fence: a uniform vertical cascade is the calm StoryPage
-           default; the column-stagger is the front-door grid showcase). A consumer
-           sets `--col` (the column index) per child; even/odd rise from opposite
-           directions, offset by `--scroll-cascade-column-stagger`. */
-        @keyframes gl-cascade-build-col-even {
-            from {
-                opacity: 0;
-                transform: translateY(calc(-1 * var(--scroll-cascade-rise, 1.25rem)));
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .scroll-cascade.scroll-cascade--columns > * {
-            animation-range: entry 0%
-                entry
-                calc(
-                    var(--scroll-cascade-range-end, 45%) +
-                        var(--scroll-cascade-column-stagger, 60ms) * 0
-                );
-        }
-        .scroll-cascade.scroll-cascade--columns > *:nth-child(even) {
-            animation-name: gl-cascade-build-col-even;
-        }
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .scroll-pin — the fixed-stage-advances-time scroll-pinned register.
- *
- * The SOTA "scrolling does not move the scene, it advances time inside it" model:
- * a `.scroll-pin` tall container (the `--scroll-pin-stage-height` temporal space)
- * holds a `.scroll-pin-stage` `position: sticky` element. The container declares
- * a named `scroll-timeline`; the stage's internal phase animations bind to that
- * named timeline via `timeline-scope` (so the stage animates against the
- * CONTAINER'S scroll progress — the fixed stage advances time). The phase
- * animations are compositor-only (transform/opacity/clip-path over the
- * `animation-range` phase windows — the Codrops phased sequence: a reveal phase
- * 0..45%, an expand phase 45..90%, a settle phase 90..100%).
- *
- * `timeline-scope` is the newest primitive — the `@supports` gate probes it (NOT
- * just `scroll()`), so an engine with `scroll()`/`view()` but not `timeline-scope`
- * gets the STATIC layout (a correct non-pinned read: the stage is a plain sticky
- * element at its terminal phase, never a broken silent stage). In 2026
- * `timeline-scope` ships alongside `scroll()`/`view()` (the universal-support
- * convergence), so the CSS-only register is the ship; the JS fallback leaf (mirror
- * useScrollProgress's dual-path single-writer) is BOOKED only on a material
- * engine-gap reveal (the §Triumvirate support-matrix trigger) — never a JS scroll
- * lib (the no-net-dep fence is binding either way).
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) and (timeline-scope: --gl-pin) {
-        @keyframes gl-pin-reveal {
-            from {
-                opacity: 0;
-                transform: translateY(var(--scroll-pin-lift, 2.5rem)) scale(0.96);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-        @keyframes gl-pin-settle {
-            from {
-                transform: scale(1);
-                opacity: 1;
-            }
-            to {
-                /* The settle phase — a gentle compositor drift, never a layout move. */
-                transform: scale(1.02) translateY(calc(-1 * var(--scroll-pin-lift, 2.5rem)));
-                opacity: 1;
-            }
-        }
-
-        /* The tall temporal container declares a named scroll-timeline + exposes it
-           to descendants via timeline-scope (the fixed-stage-advances-time link). */
-        .scroll-pin {
-            position: relative;
-            block-size: var(--scroll-pin-stage-height, 320vh);
-            scroll-timeline-name: --gl-pin;
-            scroll-timeline-axis: block;
-            timeline-scope: --gl-pin;
-        }
-
-        /* The sticky stage — pinned to the viewport while the container scrolls
-           past; its phases advance against the container's --gl-pin timeline. */
-        .scroll-pin-stage {
-            position: sticky;
-            inset-block-start: 0;
-        }
-
-        /* Phase 1 — the reveal (0..45% of the container scroll). */
-        .scroll-pin-stage .scroll-pin-phase-reveal {
-            animation: gl-pin-reveal auto linear both;
-            animation-timeline: --gl-pin;
-            animation-range: 0% var(--scroll-pin-phase-reveal-end, 45%);
-        }
-
-        /* Phase 2 — the settle/expand (the reveal-end..expand-end window). */
-        .scroll-pin-stage .scroll-pin-phase-settle {
-            animation: gl-pin-settle auto linear both;
-            animation-timeline: --gl-pin;
-            animation-range: var(--scroll-pin-phase-reveal-end, 45%)
-                var(--scroll-pin-phase-expand-end, 90%);
-        }
-    }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
- * .smooth-scroll — the native smooth-scroll opt-in.
- *
- * The native `scroll-behavior: smooth` (CSS-first, zero runtime — NOT a JS rAF
- * momentum loop, which IS Lenis and is the fence). An OPT-IN class the scroller
- * (`<main>`, a `.scroll-pin` container) applies. PRM-GATED: under
- * `prefers-reduced-motion: reduce` the smooth interpolation is DROPPED and the
- * jump-scroll is correct (a smooth-scroll over an anchor-jump is a vestibular
- * concern). A consumer wanting Lenis-grade momentum brings it in THEIR app (the
- * presets-in-consumers discipline); the library ships the native register.
- * ─────────────────────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-    .smooth-scroll {
-        scroll-behavior: smooth;
-    }
-}
+:root { --ease-scroll-spring: var(--spring-gentle); --scroll-pin-phase-reveal-end-frac: 0.382; --scroll-pin-phase-expand-end-frac: 0.9; --scroll-pin-squash-floor: 0.944; } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes gl-cascade-build { from { opacity: 0; transform: translateY(var(--scroll-cascade-rise, 1.25rem)); } to { opacity: 1; transform: translateY(0); } } .scroll-cascade > * { animation: gl-cascade-build auto var(--ease-scroll-spring, linear) both; animation-timeline: view(block); animation-range: entry 0% entry var(--scroll-cascade-range-end, 45%); } .scroll-cascade.scroll-cascade--inline > * { animation-timeline: view(inline); } @keyframes gl-cascade-build-col-even { from { opacity: 0; transform: translateY(calc(-1 * var(--scroll-cascade-rise, 1.25rem))); } to { opacity: 1; transform: translateY(0); } } .scroll-cascade.scroll-cascade--columns > * { animation-range: entry 0% entry calc( var(--scroll-cascade-range-end, 45%) + var(--scroll-cascade-column-stagger, 6%) * var(--col, 0) ); } .scroll-cascade.scroll-cascade--columns > *:nth-child(even) { animation-name: gl-cascade-build-col-even; } } } @property --pin-t { syntax: "<number>"; inherits: true; initial-value: 0; } .scroll-pin { position: relative; block-size: var(--scroll-pin-stage-height, 320vh); } .scroll-pin-stage { position: sticky; inset-block-start: 0; contain: layout paint; } @media (prefers-reduced-motion: no-preference) { .scroll-pin-stage .scroll-pin-phase-reveal { --t: clamp( 0, calc(var(--pin-t, 0) / var(--scroll-pin-phase-reveal-end-frac, 0.382)), 1 ); opacity: var(--t); translate: 0 calc((1 - var(--t)) * var(--scroll-pin-lift, 2.5rem)); scale: calc( var(--scroll-pin-squash-floor, 0.944) + (1 - var(--scroll-pin-squash-floor, 0.944)) * var(--t) ); will-change: transform, opacity; } .scroll-pin-stage .scroll-pin-phase-settle { --t: clamp( 0, calc( (var(--pin-t, 0) - var(--scroll-pin-phase-reveal-end-frac, 0.382)) / ( var(--scroll-pin-phase-expand-end-frac, 0.9) - var(--scroll-pin-phase-reveal-end-frac, 0.382) ) ), 1 ); opacity: 1; translate: 0 calc(var(--t) * -1 * var(--scroll-pin-lift, 2.5rem)); scale: calc(1 + 0.02 * var(--t)); } } @media (prefers-reduced-motion: no-preference) { .smooth-scroll { scroll-behavior: smooth; } }

package/dist/styles/scroll-chrome.css

@@ -1,123 +1 @@
-/*
- * scroll-chrome.css — the scroll-driven floating-CHROME collapse recipe
- * (BC.W-SCROLL-CHROME).
- *
- * Cascade rung AFTER scroll-choreography.css. Where scroll-choreography.css is the
- * ENTRANCE register (the page-build / section-cascade / scroll-pinned reveals), this is
- * the COLLAPSE-STATE recipe a floating chrome bar (a dock, a header) composes: scroll
- * down and it SHRINKS smoothly into a compact form; scroll up and it EXPANDS back; on
- * scroll-stop it SNAPS to the nearest state (the `useScrollChrome` JS machine owns the
- * snap + the ramp value — this recipe is the compositor paint of `--chrome-collapse-t`).
- *
- *   .scroll-chrome — the chrome surface (a dock/header) reads `--chrome-collapse-t`
- *                    (0 expanded → 1 collapsed; the @property reg in property-regs.css)
- *                    for the COMPOSITOR shrink/quiet/shadow-lift ramp.
- *
- * COMPOSITOR-ONLY (the proof:no-layout-animation floor — motion-canon P5). The shrink is
- * `transform: scale()/translateY()` — NEVER an animated `height`/`padding`/`width` (the
- * box never reflows per scroll frame; the CDP Layout track stays flat). The quiet is
- * `opacity` BOUNDED above a never-invisible floor (the NN/g pale-fade-into-content trap
- * is the FORBIDDEN direction — the bar reads at EVERY collapse fraction). The
- * SEPARATION/shadow LIFTS as content scrolls under (Apple "as text scrolls underneath,
- * shadows become more prominent") — `box-shadow` is a paint prop, compositor-safe.
- *
- * THE BLUR STAYS CRISP (the W-DOCK-SHRINK-BLUR fence). The chrome's resting
- * `backdrop-filter` blur is NOT animated by `--chrome-collapse-t` — a shrunken bar is
- * crisp glass, not a blurry mess. The recipe touches ONLY transform/opacity/box-shadow;
- * the surface's own `glass-*` tier owns the (untouched) backdrop blur.
- *
- * PERSISTENT BY DEFAULT (the iOS-27 lesson). `--chrome-collapse-t` rests at 0 (the
- * @property initial-value), so a bare `.scroll-chrome` is byte-identical to the expanded
- * chrome — it does NOT collapse until the `useScrollChrome` machine (opted in with
- * `collapseOnScroll: true`) ramps the custom.
- *
- * PRM (the discrete-state-survives model, the useFadingScroll precedent). The transform/
- * opacity RAMP sits inside the `@media (prefers-reduced-motion: no-preference)` outer
- * gate (the scroll-choreography.css discipline) — under reduce the continuous ramp drops;
- * the `useScrollChrome` machine snaps `--chrome-collapse-t` to a discrete 0/1 endpoint, so
- * the DISCRETE collapsed/expanded state stays correct, instant, never half. The shadow
- * lift sits OUTSIDE the gate (a paint cue, not a vestibular motion) so the lifted
- * separation reads even under reduce.
- */
-
-/* The tunable depth knobs — a consumer retunes the shrink/fade depth per chrome. */
-:root {
-    /* The shrink depth: at fully collapsed the chrome scales to (1 − this). 0.12 → a
-       compact 88% bar (a real shrink that still reads as the same bar). */
-    --chrome-shrink-depth: 0.12;
-    /* The rise (px) the chrome translates toward its anchor edge as it collapses. */
-    --chrome-rise-px: 6px;
-    /* The fade depth — BOUNDED LOW: at fully collapsed opacity floors at (1 − this).
-       0.28 → a 0.72 floor (the bar quiets but is NEVER invisible — the NN/g pale-fade
-       trap forbidden). A consumer that wants no quiet sets it 0. */
-    --chrome-fade-depth: 0.28;
-    /* The shadow-lift strength — the separation shadow grows from rest → this as content
-       scrolls under (Apple shadow-on-scroll). A paint prop, compositor-safe. */
-    --chrome-shadow-lift: 18%;
-}
-
-/* The shrink/quiet RAMP — the SPATIAL (transform) + the EFFECTS (opacity) channels. It
-   rides `--chrome-collapse-t` directly (no CSS transition — the JS scalar already glides
-   on the reader's tick; on a native-timeline engine the same custom rides
-   `animation-timeline: scroll(self)`, the native-ramp path). Inside the PRM no-preference
-   gate: under reduce the ramp drops and the chrome reads its discrete snapped endpoint. */
-@media (prefers-reduced-motion: no-preference) {
-    .scroll-chrome {
-        /* SPATIAL leg — scale toward the compact size + a small rise toward the anchor
-           edge. transform-origin at the top (a header anchors its top; a consumer dock
-           re-points the origin to its natural seat). Compositor-only — never height/pad. */
-        transform: scale(calc(1 - var(--chrome-collapse-t) * var(--chrome-shrink-depth)))
-            translateY(calc(var(--chrome-collapse-t) * var(--chrome-rise-px) * -1));
-        transform-origin: top center;
-        /* EFFECTS leg — the quiet, BOUNDED above the never-invisible floor (the bar reads
-           at every fraction; the `* fade-depth` caps the drop, opacity never reaches 0). */
-        opacity: calc(1 - var(--chrome-collapse-t) * var(--chrome-fade-depth));
-        /* will-change the compositor channels (NEVER a layout property). */
-        will-change: transform, opacity;
-    }
-}
-
-/* The shadow LIFT — OUTSIDE the PRM gate (a paint cue, not a vestibular motion): the
-   separation shadow strengthens as content scrolls under the chrome. `box-shadow` is a
-   paint prop (compositor-safe, in the proof:no-layout-animation paint set, NOT the reflow
-   set). The lift composes the house `--shadow-color: var(--foreground)` so it re-tints
-   light↔dark for free; the strength grows from a whisper at rest → `--chrome-shadow-lift`
-   at fully collapsed. */
-.scroll-chrome {
-    box-shadow: 0 calc(2px + var(--chrome-collapse-t) * 6px)
-        calc(8px + var(--chrome-collapse-t) * 12px)
-        color-mix(
-            in srgb,
-            var(--shadow-color)
-                calc(6% + var(--chrome-collapse-t) * var(--chrome-shadow-lift)),
-            transparent
-        );
-}
-
-/* The native-ramp path — on a `scroll()`-supporting engine the consumer can drive
-   `--chrome-collapse-t` off `animation-timeline: scroll(self)` directly (the
-   `useScrollProgress`/`--scroll-t` native precedent: the JS writer is inert, the CSS owns
-   the compositor ramp). The keyframe is the linear 0→1 map over the collapse range; the
-   consumer binds it on the chrome with its own `animation-range` (the collapse-px span).
-   The SNAP-to-state stays the JS leg (a snap is a discrete commit, not a continuous ramp —
-   it rides the `useScrollChrome` scroll-stop tick on every engine). PRM-gated + supports-
-   gated (a non-supporting engine reads the JS `collapseT` write, never this keyframe). */
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        @keyframes gl-chrome-collapse {
-            from {
-                --chrome-collapse-t: 0;
-            }
-            to {
-                --chrome-collapse-t: 1;
-            }
-        }
-        /* OPT-IN: a consumer adds `.scroll-chrome--native` to ride the compositor ramp
-           (it must set `animation-range` for its own collapse-px span; the
-           `useScrollChrome` machine's JS write is the cross-engine floor + the snap). */
-        .scroll-chrome--native {
-            animation: gl-chrome-collapse auto linear both;
-            animation-timeline: scroll(self block);
-        }
-    }
-}
+:root { --chrome-shrink-depth: 0.12; --chrome-rise-px: 6px; --chrome-fade-depth: 0.28; --chrome-shadow-lift: 18%; } @media (prefers-reduced-motion: no-preference) { .scroll-chrome { transform: scale(calc(1 - var(--chrome-collapse-t) * var(--chrome-shrink-depth))) translateY(calc(var(--chrome-collapse-t) * var(--chrome-rise-px) * -1)); transform-origin: top center; opacity: calc(1 - var(--chrome-collapse-t) * var(--chrome-fade-depth)); will-change: transform, opacity; } } .scroll-chrome { box-shadow: 0 calc(2px + var(--chrome-collapse-t) * 6px) calc(8px + var(--chrome-collapse-t) * 12px) color-mix( in srgb, var(--shadow-color) calc(6% + var(--chrome-collapse-t) * var(--chrome-shadow-lift)), transparent ); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { @keyframes gl-chrome-collapse { from { --chrome-collapse-t: 0; } to { --chrome-collapse-t: 1; } } .scroll-chrome--native { animation: gl-chrome-collapse auto linear both; animation-timeline: scroll(self block); } } }

package/dist/styles/scroll-driven.css

@@ -1,110 +1 @@
-/*
- * scroll-driven.css — native scroll-driven CSS animations (AQ.W5 §Design 1).
- *
- * Cascade rung after animations.css. Two token-first recipe families that move
- * the scroll-progress + stagger-reveal work OFF the main thread (the consumer
- * INP lever): the browser runs them on the compositor instead of a rAF/IO
- * listener loop in JS.
- *
- *   .scroll-progress      — a 0..1 scaleX bar driven by a `scroll()` timeline.
- *                           The `useScrollProgress` composable replacement.
- *   [data-scroll-reveal]  — fade + lift on entry, one `view()` timeline PER
- *                           child (the stagger is implicit — no setTimeout
- *                           cascade). The `useStaggerReveal` composable
- *                           replacement.
- *
- * DUAL-PATH with a SINGLE writer (no double-run): when the engine supports
- * `animation-timeline`, the CSS here owns the visual axis and the composables
- * gate their listener/observer machinery OFF (so CSS and JS never both write
- * the same target). When the engine does NOT support it, this block is skipped
- * by `@supports` and the composable is the sole writer. See the gate at the top
- * of `useScrollProgress.ts` / `useStaggerReveal.ts`.
- *
- * Baseline: `scroll-driven-animations` = Newly Available → adopt CSS as
- * primary, keep the composable as the ≤ 20-LOC feature-detected fallback.
- *
- * Reduced-motion is the OUTER gate: the whole `@supports` block sits under
- * `prefers-reduced-motion: no-preference`, so under PRM no scroll animation
- * attaches at all and content renders in its terminal state (the `from`
- * keyframe is never applied because the animation never binds).
- */
-
-/* ── Scroll progress (scroll() timeline) — drives a 0..1 scaleX bar.
- * Consumers add `.scroll-progress` on a position:fixed/absolute element; the
- * scroller is the nearest ancestor block scroller (`root` by default; override
- * via `--scroll-progress-scroller`). */
-@media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-        @keyframes gl-scroll-grow {
-            from { transform: scaleX(0); }
-            to   { transform: scaleX(1); }
-        }
-        .scroll-progress {
-            transform-origin: 0 50%;
-            animation: gl-scroll-grow auto linear;
-            animation-timeline: scroll(var(--scroll-progress-scroller, root) block);
-        }
-    }
-}
-
-/* ── View-driven entry (view() timeline) — the useStaggerReveal replacement.
- * Each child of a `[data-scroll-reveal]` scroller fades + lifts on entry. The
- * stagger is implicit in the per-element view-timeline (each child owns its
- * own timeline), so NO setTimeout cascade is needed. Horizontal scrollers add
- * `.scroll-reveal--inline` for a `view(inline)` axis. */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        @keyframes gl-reveal-in {
-            from {
-                opacity: 0;
-                transform: translateY(var(--scroll-reveal-rise, 6px));
-            }
-        }
-        [data-scroll-reveal] > * {
-            animation: gl-reveal-in auto linear both;
-            animation-timeline: view(block);
-            animation-range: entry 0% entry var(--scroll-reveal-range-end, 60%);
-        }
-        [data-scroll-reveal].scroll-reveal--inline > * {
-            animation-timeline: view(inline);
-        }
-    }
-}
-
-/* ── ONCE latch (the virtualized/teleporting opt-in) — BC.W-MOTION-PRESETS.
- * The continuous `[data-scroll-reveal]` recipe above re-fires its entrance EVERY
- * time a child re-enters the entry range — correct for a calm cascade, WRONG for
- * a virtualized/teleporting list where a row scrolls out + back (it re-plays the
- * fade-lift). A native `view()` timeline cannot latch "play once" (the CSS limit),
- * so `[data-scroll-reveal-once]` swaps the live-range animation for a one-shot
- * `@keyframes` keyed off a `data-revealed` attr a tiny JS-assist IntersectionObserver
- * sets on FIRST cross + then `unobserve`s — the SHIPPED `useStaggerReveal` `once`
- * machinery (its `if (once) observer?.unobserve(el)` leg), reused, not re-authored.
- *
- * SINGLE WRITER — an element is `[data-scroll-reveal]` XOR `[data-scroll-reveal-once]`
- * (never both): the continuous path rides the `view()` timeline, the once path rides
- * the `[data-revealed]` attr. They never both drive the same child.
- *
- * The keyframe is the SAME fade-lift values as `gl-reveal-in` but runs FORWARD
- * (`from` hidden → `to` shown) so the terminal state holds without a timeline; the
- * `--spring-gentle` partial-sum settle is the convergence-reveal register a consumer
- * pairs with `useStagger` for the N-term build-up. Same PRM outer gate as the
- * continuous recipe (a flourish — under reduce the row paints in-place, no entrance). */
-@media (prefers-reduced-motion: no-preference) {
-    @keyframes gl-reveal-once {
-        from {
-            opacity: 0;
-            transform: translateY(var(--scroll-reveal-rise, 6px));
-        }
-        to {
-            opacity: 1;
-            transform: none;
-        }
-    }
-    [data-scroll-reveal-once] > * {
-        opacity: 0;
-    }
-    [data-scroll-reveal-once] > *[data-revealed] {
-        animation: gl-reveal-once var(--spring-gentle-duration) linear both;
-    }
-}
+.scroll-progress { transform-origin: 0 50%; transform: scaleX(0); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { @keyframes gl-scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .scroll-progress { animation: gl-scroll-grow auto linear; animation-timeline: var(--scroll-progress-timeline, scroll(nearest block)); } } } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes gl-reveal-in { from { opacity: 0; transform: translateY(var(--scroll-reveal-rise, 6px)); } } [data-scroll-reveal] > * { animation: gl-reveal-in auto linear both; animation-timeline: view(block); animation-range: entry 0% entry var(--scroll-reveal-range-end, 60%); } [data-scroll-reveal].scroll-reveal--inline > * { animation-timeline: view(inline); } } } @media (prefers-reduced-motion: no-preference) { @keyframes gl-reveal-once { from { opacity: 0; transform: translateY(var(--scroll-reveal-rise, 6px)); } to { opacity: 1; transform: none; } } [data-scroll-reveal-once] > * { opacity: 0; } [data-scroll-reveal-once] > *[data-revealed] { animation: gl-reveal-once var(--spring-gentle-duration) linear both; } }

package/dist/styles/scroll-progress-rim.css

@@ -0,0 +1 @@
+.scroll-progress-rim { position: absolute; inset: 0; border-radius: var(--scroll-progress-rim-radius, inherit); pointer-events: none; } .scroll-progress-rim__track { position: absolute; inset: 0; border: var(--scroll-progress-rim-width, 4px) solid transparent; border-radius: inherit; background: conic-gradient( from 0deg, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 100% ); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: exclude; } .scroll-progress-rim[data-coverage="bottom-edge"] .scroll-progress-rim__track { background: linear-gradient( to right, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 100% ); -webkit-mask: linear-gradient( to top, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: source-in, xor, source-over; mask: linear-gradient( to top, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: intersect, exclude, add; } .scroll-progress-rim[data-coverage="inline-end-edge"] .scroll-progress-rim__track { background: linear-gradient( to bottom, var(--scroll-progress-rim-spectrum, var(--section-color-7)), transparent var(--scroll-progress-rim-fill, 0%), transparent 100% ); -webkit-mask: linear-gradient( to left, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: source-in, xor, source-over; mask: linear-gradient( to left, #fff 0, #fff var(--scroll-progress-rim-width, 4px), transparent var(--scroll-progress-rim-width, 4px) ), linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: intersect, exclude, add; }