Vapor Smoke Text

A smoky text animation with blur and spring effects that creates an ethereal appearance.

Welcome To RareUI

Installation

Run the following command to install the component:

npx rareui add VaporSmokeText

This will install the component to components/rareui/ directory.

Usage

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

export default function MyComponent() {
  return (
    <VaporSmokeText text="Your Text" className="text-6xl text-foreground" />
  );
}

Examples

With Trigger Control

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

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

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

Custom Styling

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

Props

PropTypeDefaultDescription
textstringRequiredThe text content to animate
classNamestringundefinedAdditional styles for the container
triggerbooleantrueControls animation state (true = visible, false = hidden)
Previous