Vapor Smoke Text
A smoky text animation with blur and spring effects that creates an ethereal appearance.
Welcome To RareUI
Installation
pnpm dlx rareui add VaporSmokeText
Usage
1
Import the component
import { VaporSmokeText } from "@/components/rareui/Text Animation/VaporSmokeText";
2
Use in your application
export default function MyComponent() {
return (
<VaporSmokeText text="Your Text" className="text-6xl text-foreground" />
);
}
Features
Combines opacity and blur filters for a smoky appearance.
Examples
1
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>
);
}
2
Custom Styling
<VaporSmokeText
text="Ethereal"
className="text-9xl font-serif text-cyan-400"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text content to animate |
className | string | undefined | Additional styles for the container |
trigger | boolean | true | Controls animation state (true = visible, false = hidden) |