Fog Text Reveal

Loading code…

Installation

Loading code…

Usage

Drop it into any text flow — it renders as an inline element and inherits the surrounding font-family, font-size, font-weight, and color from CSS.

import { FogTextReveal } from '@/components/sora-ui/texts/fog-text-reveal';

export default function Page() {
  return (
    <h1 className="font-serif text-5xl">
      Type can move like{' '}
      <FogTextReveal text={['weather.', 'fog.', 'breath.']} />
    </h1>
  );
}

Pass a single string for a one-shot reveal, or an array to cycle through messages. The element is sized to the widest message so the surrounding layout never shifts while cycling.

Props

When to Use

Use FogTextReveal inside headings, hero copy, or sentences where one word or phrase should slowly breathe through a set of short messages. Pass a single string (or loop={false}) for a one-shot reveal that settles and stays; pass several messages with loop for an ambient text carousel.

Because the text is painted to a WebGL texture rather than laid out as flowing DOM, it renders a single line — keep each message short and avoid strings that need to wrap.

Accessibility

The visible text lives on a <canvas>, so every message is mirrored into a visually hidden sr-only element for screen readers and search engines. When prefers-reduced-motion: reduce is active, no canvas is created at all — the first message renders as plain static text. On devices without WebGL the component falls back to plain text the same way.