Inversa Scroll
A pinned hero that inverts through a masked window on scroll: the photo parallaxes up while an SVG slat-mask shrinks to punch a window through a dark overlay, the image desaturates inside it, a wireframe grid and pulsing markers fade in, copy blocks slide past, and a progress bar fills — then it re-opens to color. GSAP ScrollTrigger + Lenis.
Anchor Field
Drift Field
Location Framework
Coordinate Mapping
Terrain data is interpreted through directional vectors. Movement responds to relative position rather than absolute distance.
Active Locations
Key points are indexed within the field. Each location functions as a reference for spatial alignment and transition logic.
Spatial Center
The system converges toward a balanced focal region. Motion decelerates as positional variance reaches equilibrium.
The system has reached its final spatial state.
npx shadcn@latest add https://ui.aryank.space/r/inversa-scroll.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heroImage | string | "…/inversa-scroll/hero-img.jpg" | Parallaxing hero photo, masked and desaturated on scroll. |
| maskImage | string | "…/inversa-scroll/mask.svg" | SVG mask scaled to open / close the inverted window. |
| gridImage | string | "…/inversa-scroll/grid-overlay.svg" | Wireframe grid SVG that fades in over the window. |
| title | string | "Location Framework" | The big headline in the first copy block. |
| blocks | [InversaBlock, InversaBlock, InversaBlock] | Coordinate Mapping / … | The three { heading, body } blocks that slide past. |
| markers | [InversaMarker, InversaMarker] | Anchor / Drift Field | Two { label, color, top, left } pulsing markers. |
| outroText | string | "The system has reached…" | Copy in the closing panel. |
| dark / light | string | "#141414" / "#ffffff" | Backdrop/overlay color and text/foreground color. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
markers[].colorcolorThe two pulsing location-marker colors.
darkcolorBackdrop and overlay color.
title / blocks / outroTexttextThe headline, the three sliding copy blocks, and the outro.
heroImage / maskImage / gridImageasset-urlHosted through https://ui.aryank.space/assets/inversa-scroll/hero-img.jpg and the mask / grid SVGs.
gsaplenis