Mist Reveal
A headline that begins in empty space and condenses out of soft violet vapor, letter by letter, into crisp type.
Overview
About the Mist Reveal
A headline that begins in empty space and condenses out of soft violet vapor, letter by letter, into crisp type. It is delivered as editable TypeScript for React. Inline styles and native Web Animations API. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Atmospheric hero headlines and cinematic brand introductions.
- Progressive text entrances for portfolios and creative landing pages.
What’s included
Files in the product ZIP
Mist Reveal source
components/mist-reveal.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual ZIP installation, styling, compatibility, asset, and usage notes.
Usage
Import and render
Copy the packaged source to the documented path, then use the public API shown below.
import { MistReveal } from "@/components/mist-reveal";<MistReveal text="Something from nothing." smokeColor="#c4a1ff" />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Something from nothing." | Text revealed letter by letter. |
| color | string | "#fafafa" | Completed text color. |
| smokeColor | string | "#c4a1ff" | Vapor and forming-letter color. |
| background | string | "#0a0a0a" | Container background. |
| fontSize | number | 72 | Maximum responsive font size, 16–180 pixels. |
| duration | number | 1.25 | Condensing duration per letter, 0.3–4 seconds. |
| stagger | number | 0.09 | Delay between successive letters, 0.01–0.4 seconds. |
| delay | number | 0.45 | Initial empty interval, 0–5 seconds. |
| drift | number | 36 | Initial vapor displacement, 0–120 pixels. |
| blur | number | 16 | Vapor softness, 0–40 pixels. |
| direction | "left" | "right" | "left" | Reveal left to right, or right to left. |
| loop | boolean | false | Repeat after the completed headline is held. |
| hold | number | 2 | Hold completed text for 0.2–8 seconds. |
| paused | boolean | false | Show the completed headline without animation. |
| height | number | string | 440 | Container height. |
| className / style | string / CSSProperties | — | Container styling. |
Starts empty and settles into complete, crisp text. The timeline waits until visible and pauses offscreen or in hidden tabs. Reduced motion shows the completed text immediately. Change the React key to replay. Decorative letter copies are hidden from assistive technology.
Compatibility
Verified project setup
- ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
- This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
- Inline styles and native Web Animations API. No Tailwind CSS required.
- Images
- No image files are included or required by the packaged component.
- Fonts
- No font files are included. The component uses system font fallbacks unless your app supplies a matching font.
Installation
Add it to your project
Download the Mist Reveal ZIP, place the source file at src/components/mist-reveal.tsx, and copy the example into your own page or feature folder.
Target path
src/components/mist-reveal.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- No additional dependencies, texture images, or font assets required.
- Begins empty, then reveals letters sequentially from colored vapor.
- Reduced motion shows completed text. Animation pauses offscreen and in hidden tabs.