Reading Progress Bar
A fixed top bar scales from 0 to 100% as the article scrolls, mirrored by a circular ring with a live percentage and an estimated minutes-left label computed from the word count.
- Scroll
- scroll · navigation-ui
- gsap
- scrolltrigger
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1418 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 Magnetic Back-to-Top Button
A back-to-top disc pops in after 30% of the page, draws the page's scroll progress as a scrubbed SVG ring, leans towards the cursor with a magnetic pull and scrolls home in 1.2s with ScrollToPlugin.
- gsap
- scrolltrigger
light Arc Entrance
Six illustrated plates — paper plane, swallow, comet, kite, leaf, boomerang — fly onto their marks along a cubic Bézier, banking with the tangent and drawing a fading hairline trail; trigger on enter, scroll scrub, hover or click.
- gsap
- scrolltrigger
- svg
light Fade and Slide
A long-form case study whose paragraphs, figure, quote and stats drift 48px up while fading in (0.9s power3.out, 0.08s stagger) as they reach the reading line — and keep drifting up and out once read — on scroll, load, hover/focus or click.
- gsap
- scrolltrigger
light Turn and Twist Reveal
A lookbook poster whose seal, price burst, flower mark, tag and half-moon twist into alignment (rotate −120° → 0, scale 0.3 → 1, expo.out) around a chosen pivot, followed by three icon tiles; trigger on enter, scroll, hover or click.
- gsap
- scrolltrigger
- svg