Floating Model Scroll
A product page with a GLTF model held in the centre of the frame while the copy scrolls past it. The model bobs on a sine of wall clock time, independent of scroll, and separately takes two full turns on its X axis mapped to overall scroll progress, so idling and scrubbing read as two different motions on the same object. It renders with a cheap loop until the file lands, then swaps to the animated loop and scales up from zero, and the closing statement rises line by line on its own trigger. Three.js, GSAP ScrollTrigger, SplitText, and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/floating-model-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 |
|---|---|---|---|
| modelSrc | string | BLANK chair.glb | GLTF product. It is centred and the camera distance is derived from its bounding box, so any model frames itself. |
| archiveItems | FloatingModelArchiveItem[] | 6 BLANK products | Title plus four metadata columns per row. |
| outroCopy / contactRows / footerCopy | string / [string, string][] / string | BLANK copy | Closing section, revealed line by line on entry. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
headingRowstextThe three lines of the opening statement.
archiveLabeltextSmall italic label above the collection list.
threegsaplenis