Blur Text Transition

Fluid blur transitions between words.

This component delivers a polished, editorial-quality text animation that cycles through a list of words or short phrases using a seamless blur-in / blur-out transition. Each word moves into focus with a fluid blur animation, holds for a moment, then dissolves back out, creating a hypnotic, high-end feel reminiscent of luxury brand interfaces and modern SaaS hero sections.

Key Features:

• Smooth blur transition between 3 customizable words/phrases

• Clean dark-mode aesthetic out of the box, with easy theme overrides

• Zero dependencies, pure Framer component with no external libraries required

• Responsive and works across breakpoints

Ideal Use Cases:

• Hero section rotating value propositions ("Fast." / "Reliable." / "Beautiful.")

• Feature highlights that cycle through the benefits

• Portfolio or agency landing pages

• Loading screens or splash intros

• Any context where static text feels flat, and you want motion without distraction

Customizable Properties:

• Editable Words

• Font size, and color