Smoke Effect

Component 150

About

Brings interactive smoke effects to life. As your mouse moves, ethereal particles dance and swirl, adding a touch of magic to any web interface.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Smoke Effect to your project and fits it to your theme.

Code

How Smoke Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { SmokeCard } from "@/components/ui/smoke-card"

function SmokeCardDemo() {
    return (
        <div className="flex flex-col items-center justify-center p-8 gap-3">
            <h1 className="text-4xl font-mono text-white text-center font-bold tracking-tight">
                SMOKE EFFECT
            </h1>
            <div className="relative">
                <SmokeCard />
            </div>
        </div>
    );
}

export { SmokeCardDemo };