Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
import { DoodleLensScroll } from "@/registry/tween/doodle-lens-scroll"
export function DoodleLensScrollDemo() {
return <DoodleLensScroll />
}
import { DoodleLensScroll } from "@/components/ui/doodle-lens-scroll"<DoodleLensScroll
lensImage="https://example.com/solvei-coast.jpg"
headerTitle="Every Coast Looks Better Through Solvei Glass"
finalZoomScale={22}
zoomFocusPoint="47% 21%"
/>The SVG is fetched, parsed with DOMParser (scripts and event attributes are stripped) and placed inline so its paths can be measured. Every path with opacity: 0.6 is treated as a lens glare; the shape just before it is the lens. For each lens the component:
clipPath,<image> sized to the lens bounding box (hidden at first),glaresPerLens white bands that sweep across the lens.The spotlight section then pins for pinDistanceFactor viewport heights. One scrubbed ScrollTrigger drives everything:
1 toward finalZoomScale around zoomFocusPoint,The trigger uses the preview scroller when one is present and is rebuilt when the scroller resizes. With prefers-reduced-motion: reduce the final state is shown without scrubbing.
| Prop | Type | Default | Description |
|---|---|---|---|
svgSrc | string | "/doodle-lens-scroll/doodle.svg" | SVG with lens glares marked by opacity: 0.6. |
lensImage | string | remote coastline photo | Image revealed inside the lenses. |
lensFillIds | string[] | doodle gradient ids | Inline-style substrings of lens shapes repainted with background. |
introTitle | ReactNode | "Look Past The Glare" | Heading of the intro section. |
headerTitle | string | "Every Coast Looks Better Through Solvei Glass" | Heading revealed word by word over the doodle. |
outroTitle | ReactNode | "See You Out There" | Heading of the outro section. |
glaresPerLens | number | 2 | Number of glare bands per lens. |
finalZoomScale | number | 22 | Zoom factor; the scale reaches 1 + 2 * (finalZoomScale - 1) at the end. |
zoomFocusPoint | string | "47% 21%" | Transform origin of the zoom. |
pinDistanceFactor | number | 3 | How many viewport heights the spotlight pins for. |
background | string | "#ef6440" | Spotlight background and lens fill color. |
introBackground | string | "#13222a" | Intro and outro background. |
foreground | string | "#ffffff" | Text color. |
fontFamily | string | Barlow Condensed stack | Font for all headings. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview scroller. |