Word Highlight Scroll

Pinned copy that reads itself in as you scroll. Each paragraph section pins while its words light up one after another: a grey chip fades in, the word resolves through it, and selected keywords carry a colored pill; past 70 percent the sweep reverses. Bold color-card headlines sit between the sections. GSAP ScrollTrigger with Lenis, no images.

Component

Playground for bold ideas and creative interfaces.

BLANK is a vibrant space for designers who think in motion and build with intent. It is more than a tool, it is where bold ideas turn into living interfaces, powered by color, rhythm, and creative control.

We believe great design starts with clarity and expression ends. That is why BLANK is built to simplify your workflow while amplifying your creative reach. From the first concept to the final handoff, it is a space where your ideas take shape, your palette comes to life, and your interface begins.

Join BLANK now to create expressive interfaces.

BLANK brings motion, structure, and creativity together in one intuitive space. Design responsive layouts, choreograph smooth animations, and explore rich storytelling visuals, all without writing a single line of code.

With built-in support for interactive components, scroll-based effects, and real-time previews, BLANK lets you prototype bold, expressive interfaces that feel as good as they look. It is the fastest way to bring your creative vision to life on the modern web.

Built for designers who shape the web.

Install

npx shadcn@latest add https://ui.aryank.space/r/word-highlight-scroll.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
headlineHero / headlineCta / headlineOutro	string	BLANK editorial headlines	Color-card headlines between the paragraph sections.
aboutParagraphs / featuresParagraphs	[string, string]	BLANK studio copy	The two pinned word-reveal paragraph blocks.
keywords / embedded	string[] / boolean	Nine keywords / true	Pill-highlighted words; embedded owns the scroll container.

Customize

headlineHero / headlineCta / headlineOutrotext

The three bold color-card headlines.

aboutParagraphs / featuresParagraphstext

The two pinned, word-revealed paragraph blocks.

keywordstext

Words that get a colored pill during the reveal.

Dependencies

gsaplenis