Blur text
Text starts blurred and resolves into focus, with zoom, tilt, drift, and focus effects and an optional focus-on-hover word highlight.
Soft focus, sharp meaning.A zoom settles into place.
The reveals run when they scroll into view; hover a word to focus it while the others blur.
Focus follows the pointer.Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 useState,9 type CSSProperties,10} from "react";11 12import { useReducedMotion } from "@/lib/media";13 14export type BlurTextEffect = "blur" | "zoom" | "tilt" | "focus" | "drift";15export type BlurTextStaggerFrom = "start" | "center" | "end" | "random";16export type BlurTextTrigger = "view" | "load" | "hover" | "click";17export type BlurTextDirection = "top" | "bottom" | "left" | "right";18export type BlurTextAnimateBy = "words" | "letters";19export type BlurTextEasing = string | string[];20export type Snapshot = Record<string, string | number>;21 22export interface BlurTextProps {23 text?: string;24 delay?: number;25 className?: string;26 animateBy?: BlurTextAnimateBy;27 direction?: BlurTextDirection;28 threshold?: number;