Skip to main content

​
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
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

​
text
string
required
The text content to animate. Each character animates individually with a staggered delay.
​
trigger
boolean
default:"true"
Controls the animation state. true plays the reveal animation; false returns characters to the blurred, hidden state.
​
className
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us