Fog Text — cinematic animated typography

cinematic animated typography component where text gradually appears from a soft fog-like effect. Each character is animated individually using a combination of blur, opacity, and motion, creating a smooth, elegant, and high-end reveal.

Key Features

• Cinematic Fog Reveal Effect

  Text smoothly transitions from blurred fog into sharp clarity

• Dual-Layer Rendering

  Separate fog and text layers create depth and glow

• Directional Motion Control

  Text can appear from top, bottom, left, or right

• Customizable Glow & Blur

  Fine control over fog density and glow intensity

• Replay Support

  Option to replay animation on re-entry

Customization Options

• Text → content to display

• Font → full typography control (size, weight, spacing, alignment)

• Color → main text color

• Fog Color → color of the fog/glow layer

• Fog Density → intensity of blur effect

• Glow Intensity → visibility/strength of the fog glow

• Duration → animation duration per character

• Stagger → delay between each character animation

• Start Delay → delay before animation begins

• Direction → reveal direction (none, top, bottom, left, right)

• Replay → enable/disable animation replay on scroll