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 @compronents/settlement-layer-pageInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| 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