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 https://ui.aryank.space/r/parallax-model-footer.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 |
|---|---|---|---|
| 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