Text Scroll Animation

A dynamic scroll-based text and icon animation with three variants — characters and icons move, rotate, and scale based on scroll position, with Lenis-powered smooth scroll.

This component takes over page scroll (via Lenis), so it can't be embedded inline here — open it as its own page instead.

Open live preview

Installation

Terminal

npx gotlui add text-scroll

Usage

page.tsx

import TextScrollAnimation from "@/components/gotlui/text-scroll/TextScrollAnimation"

export default function Page() {
  return <TextScrollAnimation />
}

Props (per character/icon)

Prop	Type	Description
char / Icon	string \| Component	The character or icon component to render for this position.
index	number	The position of this character/icon in the sequence.
centerIndex	number	The index treated as the visual center — distance from it drives the transform strength.
scrollYProgress	MotionValue<number>	Framer Motion's scroll progress (0–1) for the target section, driving all the transforms.

Adapted from Skiper UI (ScrollAnimation_002) by Gurvinder Singh, used under its free-tier license.