Vapor Smoke Text

Auto-generate your docs

Overview

VaporSmokeText animates each character of your text from a blurred, scaled, and rotated hidden state into crisp, readable form — simulating vapor or smoke dissipating. Characters stagger sequentially for a cascading reveal effect, and the animation can be toggled programmatically.

Installation

npx rareui@latest add vapor-smoke-text

pnpm dlx rareui@latest add vapor-smoke-text

yarn dlx rareui@latest add vapor-smoke-text

bunx rareui@latest add vapor-smoke-text

Requires framer-motion as a peer dependency.

npm install framer-motion

Usage

import { VaporSmokeText } from "@/components/rareui/Text Animation/VaporSmokeText";

export default function Hero() {
  return (
    <VaporSmokeText
      text="Welcome To RareUI"
      className="text-6xl text-white"
    />
  );
}

Props

string

required

The text content to animate. Each character animates individually with a staggered delay.

boolean

default:"true"

Controls the animation state. true plays the reveal animation; false returns characters to the blurred, hidden state.

string

Additional Tailwind or CSS classes applied to the container. Controls font family, size, color, and spacing. The component uses font-serif italic on each character by default.

Examples

Basic smoke reveal

<VaporSmokeText
  text="Ethereal"
  className="text-9xl font-serif text-cyan-400"
/>

Scroll-triggered reveal

"use client";
import { useInView } from "framer-motion";
import { useRef } from "react";
import { VaporSmokeText } from "@/components/rareui/Text Animation/VaporSmokeText";

export default function ScrollReveal() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  return (
    <div ref={ref}>
      <VaporSmokeText
        text="Appears on scroll"
        trigger={isInView}
        className="text-6xl"
      />
    </div>
  );
}

Toggle-controlled animation

"use client";
import { useState } from "react";
import { VaporSmokeText } from "@/components/rareui/Text Animation/VaporSmokeText";

export default function Controlled() {
  const [show, setShow] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <button onClick={() => setShow(!show)}>Toggle</button>
      <VaporSmokeText
        text="Click to animate"
        trigger={show}
        className="text-6xl"
      />
    </div>
  );
}

Features

Blur Dissolve

Characters transition from blur(20px) to blur(0px), creating a realistic smoke dissipation effect.

Staggered Entry

An 80ms stagger between characters produces a cascading wave rather than all letters animating at once.

Spring Physics

Scale, position, rotation, and blur all animate with spring damping for natural, organic motion.

Trigger Support

Fully controllable via the trigger prop — reverse the animation on demand for interactive use cases.

⌘I

Buttons

Cards & Overlays

Navigation

Text Animation

Interactive Backgrounds

3D Elements

Sections

Vapor Smoke Text

Overview

Installation

Usage

Props

Examples

Basic smoke reveal

Scroll-triggered reveal

Toggle-controlled animation

Features

Blur Dissolve

Staggered Entry

Spring Physics

Trigger Support

​Overview

​Installation

​Usage

​Props

​Examples

​Basic smoke reveal

​Scroll-triggered reveal

​Toggle-controlled animation

​Features

Blur Dissolve

Staggered Entry

Spring Physics

Trigger Support

Overview

Installation

Usage

Props

Examples

Basic smoke reveal

Scroll-triggered reveal

Toggle-controlled animation

Features