Inline text that materializes through a soft, turbulent WebGL fog mask, then clears and cycles through an array of messages. A React component.
Made by AxylInline text materializes through a fog mask, holds, clears the same way, then advances to the next message. Move the pointer over the text to part the fog.
Installation
File Structure
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.
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
| Prop | Type | Default |
|---|---|---|
text? | string | string[] | - |
loop? | boolean | true |
startOnView? | boolean | true |
holdDuration? | number | 320 |
maxBlur? | number | 16 |
as? | ElementType | "span" |
className? | string | - |
ref? | Ref<HTMLElement> | - |
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.
Built by Axyl. A motion-first component registry for React.
Last updated: 9/14/2026