Depth Of Field Text

Word focus with blur & depth effects

DepthOfField Text renders any sentence as individually animated words. As users hover, click, or scroll, a "focus lens" moves across the text — sharpening one word while blurring and fading its neighbours, just like a camera lens pulling focus. Key Features 3 interaction modes: Hover, Click, Scroll. Per-word blur, opacity falloff, scale, and glow on the focused word Spring-based animations for natural, fluid transitions Full font control, including size, weight, alignment, and line height Use Cases Hero headlines, Storytelling sections, Interactive taglines or mission statements Prop Controls Text & Mode — Set your sentence and choose how focus moves: Hover, Click, Scroll. Focus Style — Customize the focused word's color, scale, and optional glow with adjustable color and size. Blur Style — Control unfocused words via blur intensity, falloff speed, color, and minimum opacity. Animation — Tune the feel of transitions with spring stiffness, damping, and overall speed. Quick Tip : Set Blur Color to match your background and lower Min Opacity to 0.2 for a dramatic fade-to-invisible effect on distant words — great for moody hero sections.

Word focus with blur & depth effects