ns-ui / loud
Pinned scroll story — the viewport becomes a geological core cross-section and scroll drives a drill bit descending through procedurally banded strata, with content panels crossfading per band and a mono HUD ticking depth.
Use when a pinned scroll story where the viewport becomes a geological core sample and a drill bit descends through strata as DOM content panels crossfade per band; use for a long-form narrative with distinct content sections, not an abstract flythrough or a real-image reveal; pick scroll-particle-tunnel instead when the journey is an abstract flythrough with callouts rather than content sections, scroll-defrost when a single real image should resolve as you scroll, or timeline-changelog-wave when the sections are dated events accumulating rather than a narrative.
Install
npx shadcn add https://design.helpmarq.comns-ui / scroll-story-strata
Scroll to drive the drill. Five strata, one platform — from the pixels at the surface down to the bedrock it all stands on. The vein marks the seam everything depends on.
bore hole NS-01 · 128.00 m planned depth · 5 strata logged
depth
Interface · 1/5
01 / Interface
Everything the user touches renders here: design tokens, optimistic state, and a 60fps interaction budget. Nothing below this band is visible, but every band below shapes how it feels.
react 19 · edge-rendered · p75 INP 84ms
field notes
The cross-section above is generated once per resize into an offscreen atlas — value-noise grain, quantized to three grays, one accent vein. Use the band labels on the left edge to jump straight to a stratum.
| Prop | Type | Default | Description |
|---|---|---|---|
| bands? | CoreSampleBand[] | DEFAULT_BANDS | strata content, top → bottom; band 4 (index 3) carries the accent vein |
| totalDepth? | number | 128 | depth in meters the HUD reads at full scroll |
| trackVh? | number | 250 | scroll-track height in vh; the sticky stage is always 100vh |
| className? | string | — | — |