Stroke Wipe Spotlight

A pinned scroll reveal where thirteen outlined pink-to-yellow strokes draw across the frame in a staggered order, swap the centered message, then erase in reverse while three bordered sparkles pop through the handoff.

Component

Blink and you'll miss it

Wait for it

The good part is closer, just one scroll away. Don't blink, or you'll miss the moment it turns.

There it is

That's the kind of payoff worth holding out for. Clean, sharp, and right when you needed it.

Told you it was worth it

Install

npx shadcn@latest add @compronents/stroke-wipe-spotlight

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

Prop	Type	Default	Description
intro / beforeTitle / beforeCopy	string	Source copy	Opening panel and message visible before the wipe.
afterTitle / afterCopy / outro	string	Source copy	Message revealed beneath the strokes and closing panel.
embedded	boolean	true	Own the scroll container; set false to use the window scroll.

Customize

intro / beforeTitle / beforeCopytext

Opening panel and first pinned message.

afterTitle / afterCopy / outrotext

Covered-frame message and closing panel.

Dependencies

gsaplenis