proNew87 lines · framer-motion

Text Blur In

Clarity arrives one word at a time. A full-width section where the headline sharpens into focus word by word — each one starting blurred and low, settling crisp and still — replaying every time the section comes back into view.

Use it for: A calmer, more editorial headline entrance than a slide or scramble — good for statement sections between features.
Themes: Light + dark
License: Commercial use

Live

Coming into focus

Clarityarrivesonewordatatime

Nothing moves until it has somewhere to be — then it sharpens, settles, and stays.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: the headline comes into focus word by
 * word, each one sharpening from a blur and drifting up into place.
 */

export interface TextBlurInProps {
  eyebrow?: string;
  headline?: string;
  subcopy?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each word animates filter: blur(), opacity and a small y offset together, staggered by stagger seconds per word.
→Eyebrow and subcopy use the same blur-in treatment so the whole block reads as one coordinated reveal.
→Replays on every viewport re-entry (viewport.once: false), so it isn't a one-time intro only.
→blurAmount sets the starting blur radius in pixels; larger values read as a more dramatic focus pull.
→prefers-reduced-motion renders every word already sharp, in place, with full opacity.

Accessibility

✓Blur is applied via CSS filter only; final state has full contrast and no residual blur.
✓Words are split for the animation only — the heading's text content matches the plain headline string.
✓Honours prefers-reduced-motion by skipping straight to the focused state.
✓Honours prefers-reduced-motion.