Text effect

Outline Text Filled by Media

by Vanguardia · motionprompts.dev

A pinned stage where a giant word sits hollow — stroked, transparent fill — over a photograph, and a scroll-driven wipe uncovers a second copy of the same word filled with that photograph via `background-clip: text`. Two pixel-aligned copies rather than one element that changes: `-webkit-text-stroke` with a transparent fill and a clipped background are different paint paths, and any crossfade between them flickers on the sub-pixel edge of every letter, while two stacked copies with a `clip-path` wipe are exact, cheap and reversible. Both copies share a single grid cell and identical typography — nothing may differ but colour, stroke and clip, because a one-pixel drift shows the outline as a ghost beside the fill and the effect is dead. The fill image is set from JS off the background's own `src`, so the letters are in register with what is behind them and read as a window cut into the photograph. The wipe completes at 78% of the track so the finished word lands while the section is sti

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

sticky stage over 280svh where a ScrollTrigger writes --wipe 0→100% into a clip-path inset on a background-clip:text copy of a word stacked pixel-aligned over a stroked hollow copy; the wipe saturates at 78% of the track so the finished word holds on screen, and the stage background opacity rises 0.42→0.72 in step; no tween, no scrub, smoothing from Lenis

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev9,166 charsCustomize

# Outline Text Filled by Media — the word is hollow until the image fills it

## Goal

Build a pinned stage where a giant word sits **hollow** — stroked, transp…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.