About NR — Text Reveal
Editorial split-text animation that reveals headlines by character, word, or
line as they enter the viewport.
Most reveal components treat your headline as decoration. This one treats it as
content. The split spans are hidden from assistive technology and the container
carries the full sentence as its label, so screen readers announce your headline
as a headline — not as forty separate letters. You also choose the semantic tag
it renders as, so an H1 stays an H1 in the DOM and your page structure survives
the animation.
What's included:
• Split by Characters, Words, or Lines — words never break mid-word
• Four entrance effects — Rise, Fade, Mask, and Blur
• Play on scroll or on load, with an adjustable viewport threshold
• Replay on every re-entry, or animate once
• Semantic tag control — H1, H2, H3, Paragraph, or Div
• Independent Duration, Stagger, Delay, and Distance
• Three editorial typefaces built in — Cormorant Garamond, DM Sans, DM Mono
• Respects prefers-reduced-motion — motion is removed, the text still appears
• Frozen final frame on canvas, export, and thumbnails
No external animation library required.
Fully responsive — Desktop / Tablet / Mobile
All text and colors editable via Component Properties
Part of the JUDE Neo-Retro component library — editorial components built around
serif headings, hairline rules, and generous whitespace.
See the full set, including the paid components:
— Designed by JUDE
