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 https://ui.aryank.space/r/stroke-wipe-spotlight.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
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

Blink and you'll miss it

Wait for it

There it is

Told you it was worth it

components

ui