Component · Text animations

Blur text reveal headline

by Informeek Studio Made with Claude 11 November 2026
Live Watch the words rise, then press Play it again

The prompt

Claude · Claude Opus 5.5

Build a hero headline where each word rises out of a blur. Dark olive-black background (#0c0f0a) with a faint lime glow at the top centre. A small uppercase label "Field notes, issue 12" in lime (#bef264) with a glowing dot. Headline "Grow the garden you actually have time for", 96px on desktop, extra bold, tight letter spacing, with the word "garden" in lime. Split the headline into words with JavaScript; each word starts invisible, blurred by 14px, 0.45em lower and slightly smaller, then animates to sharp and in place over 0.9s with a cubic-bezier(.2,.7,.2,1) curve, 90ms apart. Fade in a grey subline and a pill button "Play it again" afterwards; the button replays the animation. Keep an aria-label with the full sentence on the heading, scale the type down for phones, and show everything at once when prefers-reduced-motion is on.

Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.

Use it in three steps

  1. Copy the prompt with the button above.
  2. Paste it into your tool, such as v0, Lovable, Bolt or Claude.
  3. Make it yours by swapping the headline and the accent word for your own.

About this text reveal animation

This text reveal animation makes a headline arrive the way a photo comes into focus. Each word starts blurred, a little low and slightly smaller, then sharpens into place 90 milliseconds after the one before it. The stagger is short enough that the sentence still reads as one thought, which is the trap most word-by-word effects fall into.

The page around it stays quiet on purpose: a near-black olive background, a single lime accent word and a faint glow at the top. Once the headline has landed, the subline and a small replay button fade in, so the eye goes headline first.

Why the prompt works

  • It gives exact numbers, 14px of blur, 0.9 seconds, 90ms between words, so the tool does not guess.
  • It names the easing curve, which is what makes the words settle rather than snap.
  • It keeps it accessible, with an aria-label on the heading and a reduced motion fallback.

Where to use it

Hero headlines, launch announcements and section openers. Use it once per page: a reveal on every heading quickly becomes noise.

The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.

Keep exploring

More prompts like this

See the collection →