Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { TelescopeTextScroll } from "@/registry/tween/telescope-text-scroll"
const headingClass =
"uppercase font-medium leading-[1] [letter-spacing:-0.04em] text-[clamp(2.5rem,11cqi,10rem)] text-center whitespace-nowrap"
export function TelescopeTextScrollDemo() {
return (
<div className="@container/telescope w-full bg-[#f4f3ef] text-[#141414]">
<section
className="flex h-[var(--preview-h,100vh)] w-full items-center justify-center px-6 text-center"
style={{ backgroundColor: "#f4f3ef" }}
>
<h1 className="text-[clamp(2rem,8cqi,6rem)] leading-[1] font-medium [letter-spacing:-0.025em] uppercase">
Keep scrolling
</h1>
</section>
<TelescopeTextScroll
direction="right"
className="!h-[85svh] bg-[#e3f794]"
>
<h1 className={headingClass}>Zoom In</h1>
</TelescopeTextScroll>
<TelescopeTextScroll direction="left" className="!h-[85svh] bg-[#f4f3ef]">
<h1 className={headingClass}>Pull Focus</h1>
</TelescopeTextScroll>
<TelescopeTextScroll
direction="right"
className="!h-[85svh] bg-[#e3f794]"
>
<h1 className={headingClass}>Frame It</h1>
</TelescopeTextScroll>
<section
className="flex h-[var(--preview-h,100vh)] w-full items-center justify-center px-6 text-center"
style={{ backgroundColor: "#f4f3ef" }}
>
<h1 className="text-[clamp(2rem,8cqi,6rem)] leading-[1] font-medium [letter-spacing:-0.025em] uppercase">
That’s a wrap
</h1>
</section>
</div>
)
}
import { TelescopeTextScroll } from "@/components/ui/telescope-text-scroll"<TelescopeTextScroll direction="right">
<h1>Selected Work</h1>
</TelescopeTextScroll>
<TelescopeTextScroll direction="left">
<h1>In Motion</h1>
</TelescopeTextScroll>The heading is split into characters that fan in from staggered vertical offsets. Even-indexed chars start charOffset px above the line, odd-indexed chars start charOffset px below. The whole heading is translated ±containerShift% horizontally based on direction. A scrubbed ScrollTrigger runs between start and end, so the assembly is tied directly to scroll position and reverses smoothly when the user scrolls back up.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The wrapper content — should contain a single h1/h2/h3/h4/p text element. |
direction | "left" | "right" | "right" | Horizontal slide direction. Also reverses the per-character stagger order. |
charOffset | number | 150 | Initial vertical offset (px) for each character. |
containerShift | number | 100 | Initial horizontal offset (% of inner width) for the whole heading. |
start | string | "top bottom" | ScrollTrigger start value. |
end | string | "top -25%" | ScrollTrigger end value. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the ambient preview scroller. |
className | string | — | Extra classes on the outer section. |
innerClassName | string | — | Extra classes on the translated inner wrapper. |