Settlement Layer Page
A multi-route enterprise infrastructure template. Eleven routes (home, products index and detail, company, partners, careers, contact, newsroom, blog index and post, legal) share one Lenis and ScrollTrigger clock. The signature effect is a scroll-driven pixel dissolve between section colours: a 25 by 6 grid whose pattern and shuffle orders come from a seeded generator, so the dissolve is identical on every reload. Also ships travelling pulses along staircase connector SVG paths, a momentum drag carousel for the product suite, a radial line-burst hero, line-reveal hover on desktop pointers, and a header that flips to its light variant over light sections. Deep blue, black and white sectioning with PP Neue Montreal and Fragment Mono.
npx shadcn@latest add https://ui.aryank.space/r/settlement-layer-page.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 |
|---|---|---|---|
| initialPath | string | "/" | Route rendered on mount. The template owns its own router, so every internal link navigates without leaving the component. |
initialPathtextWhich route opens first: /, /products, /products/vault, /company, /partners, /career, /contact, /newsroom, /blog, /blog/<slug>, or /legal/<slug>.
gsap@gsap/reactlenis