Focus Blur Resolve vs Per Character Rise

Use Focus Blur Resolve to reveal a headline as a single visual unit. Use Per Character Rise when each letter should arrive in sequence. Both reviewed implementations use Motion and explicitly check reduced motion.

By world of creator · Reviewed 2026-10-02

One animated span or one per character

Focus Blur Resolve animates one inner span from blur(14px), opacity 0, y 14 and scale 1.01 to a clear, visible state. Its transition duration is 0.76 seconds.

Per Character Rise uses Array.from(children), then creates an animated span for each character. It starts at y 32 with opacity 0, uses a 0.7-second duration and a default stagger of 24 milliseconds. Longer text creates more animated elements and a longer sequence; that does not by itself quantify device performance.

Trigger and reduced-motion behavior

Both accept a string as children and an optional triggerOnView flag. With triggerOnView enabled, useInView is configured with once: true. PODIE replays gallery examples separately; the installed component does not automatically become a perpetual loop.

Both expose the complete text as an aria-label and hide their animated inner spans from assistive technology. Both use useReducedMotion to show readable content without the entrance animation. These source-level behaviors still need testing with your heading markup, language and assistive technology.

Make the decision in context

Prefer the whole-text reveal for a short section title that must resolve together. Prefer character staggering for a brief hero line where the rhythm is deliberate. Keep long body copy static, and test line wrapping with the final text rather than a short placeholder.

Both entries were in the October 1 production installation sample and passed the four package-manager project builds. That evidence establishes the recorded installation conditions, not frame rates, SEO outcomes or universal accessibility compliance.