WeroWallet Spotlight Stroke Draw
What it does
Pinned spotlight section where 13 thick diagonal SVG strokes draw in with a staggered stroke-dashoffset scrub until they cover the screen, swapping the headline and popping three sparkles before un-drawing in reverse. Driven by scroll (ScrollTrigger pin + scrub with Lenis smooth scrolling).
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Spotlight Stroke Draw — Pinned Scroll Section Where Thick Diagonal SVG Strokes Paint Over the Screen and Un-paint
## Goal
Build a three-section scroll page whose star effect is a **pinned "spotlight" section** where **13 thick, parallel, diagonal SVG strokes draw themselves on** — one after another in a scattered, staggered order — until they **completely blanket the viewport**, then, at the moment of full cover, the centered headline **swaps underneath** ("WAIT FOR IT" → "THERE IT IS") and **three cartoon sparkles pop**, after which the same strokes **un-draw in reverse**, wiping themselves off the far end to reveal the new message. The whole sequence is one GSAP timeline **scrubbed** to a pinned `ScrollTrigger` (4 viewport-heights of scroll), with Lenis smooth scrolling. The strokes use the classic `strokeDasharray`/`strokeDashoffset` line-drawing trick, and each stroke is **doubled** into a dark outline + yellow fill for a comic-ink look.
## Tech
Vanilla HTML/CSS/JS with ES module imports, in a fresh Vite project. Install and import from npm:
- **`gsap`** (3.x) plus the plugin **`ScrollTrigger`**.
- **`lenis`** — smooth scroll, wired into GSAP's ticker and `ScrollTrigger.update`.
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
…
Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.