Parallax Model Footer
A footer that is taller than the space it occupies and slides the difference back as you reach it. Its content block sits at minus thirty five percent and is driven to zero across the footer's entry, so the text arrives already in motion instead of scrolling in flat. Behind it a GLTF model sits on a transparent canvas, pushed a unit into the depth and tilted, and both of those settle to rest on the same scroll progress while the pointer keeps nudging its rotation with an eased follow. GSAP ScrollTrigger, Lenis, and Three.js.
npx shadcn@latest add @compronents/parallax-model-footerInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| modelSrc | string | BLANK model.glb | GLTF loaded behind the footer. It is auto-centred and scaled to a unit box, so any model fits. |
| sections | ParallaxModelFooterSection[] | 3 colour blocks | Page above the footer, present only so the footer has something to arrive from. |
| links / statusLabel / statusValue | string[] / string / string | BLANK copy | Footer column contents. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
statementtextThe large closing line in the footer.
metaRighttextCredit line in the bottom right.
gsaplenisthree