Fisheye Scroll
A pinned poster whose oversized word is a repeating marquee sampled through a WebGL lens. Scroll slides the strip from left to right. Behind the person the lens inverts so the sides grow around the figure. In front it enlarges from the middle. Three.js, GSAP ScrollTrigger, Lenis.
npx shadcn@latest add https://ui.aryank.space/r/fisheye-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 |
|---|---|---|---|
| text | string | "GIANTS" | Word painted into the fisheye texture. |
| portraitSrc | string | "…/fisheye-scroll/portrait.png" | Cutout that sits unwarped over the word. |
| background | string | "#e83210" | Poster field behind the word. |
| textColor | string | "#f1cbb6" | Colour of the painted word. |
| effect | "behind" | "forward" | "both" | "behind" | behind: inverted lens under the person. forward: centre-enlarged letters over the person, canvas is transparent so the face stays visible. both: the two stacks together. |
| intensity | number | 1 | Barrel strength multiplier. |
| zoom | number | 1 | How tight the crop is. Lower values show more of the word. |
| portraitScale | number | 1 | Base scale of the cutout overlay. |
| outroText | string | "The word holds." | Line on the panel after the pin. |
| embedded | boolean | true | Own an internal scroll container (true) or use the window scroll (false). |
texttextThe oversized word painted into the lens.
background / textColorcolorPoster field and word colour.
effecttextbehind, forward, or both. Forward is a transparent strip over the person.
intensitysliderHow hard the barrel lens bends the word.
zoomsliderHow tight the crop is on the marquee.
portraitSrcasset-urlHosted through https://ui.aryank.space/assets/fisheye-scroll/portrait.png.
gsaplenisthree