Depth Of Field Text

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.