Word Cycle Preloader
Five brand words slide up through a mask one after another — each arriving and leaving with a slight blur over a thin progress line — then the last word stays, scales via Flip into the page headline's exact position and the rest of the page rises beneath it.
- Preloaders
- gsap
- flip
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1254 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Percentage Ring Preloader
A hairline SVG ring draws from 0 to 100% around a tabular serif counter; at 100 the ring swells to 14× and fades, the number slides out of its mask, and a simple page appears as its headline lines rise one after another. Replay included.
- gsap
- svg
light Counter Preloader with Split Reveal
A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
- gsap
- splittext
light Image Stack Shuffle Preloader
Six procedural prints sit in a fanned stack; every 0.35s the back card cuts to the front with Flip (fresh rotation jitter each time) while a counter runs 0→100, then the top print expands via Flip.fit into the page's hero image and the headline rises.
- gsap
- flip
light Skeleton Shimmer Loader
A feed of three note cards loads as grey skeleton bones — avatar, two lines, an image block and three text lines — with one diagonal light band sweeping each card; once loaded the bones fade and the real content rises in card by card.
- gsap