Hossain Jahed

Spooky Smoke Animation

Shaders 748

About

A customizable animated smoke background component for React, built with WebGL for high performance. It's perfect for adding a dynamic, mesmerizing vibe to your projects. You can easily change the smoke color to match your brand or design, making it incredibly versatile. This component is part of the EaseMize UI library, which focuses on components that are easy to use and great to customize. It's ideal for hero sections, interactive backgrounds, or any element that needs a touch of magic

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

Code

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

Usage.tsx

import { SmokeBackground } from "@/components/ui/spooky-smoke-animation";

const Default = () => {
  return <SmokeBackground />;
};

const Customized = () => {
  return <SmokeBackground smokeColor="#FF0000" />;
};

export { Default, Customized };

More by Hossain Jahed

View all
  • Spotlight Card

    Spotlight Card

    8.9K
  • Motion Footer

    Motion Footer

    5.7K
  • Cinematic landing Hero

    Cinematic landing Hero

    5.7K
  • Sign In

    Sign In

    4.6K
  • AI prompt Box

    AI prompt Box

    3K
  • Glassmorphism Trust Hero

    Glassmorphism Trust Hero

    2.8K
  • Limelight Nav

    Limelight Nav

    2K
  • Ai chat input

    Ai chat input

    1.8K

More in Shaders

View all
  • Glass Fold

    Glass Fold

    279
  • Phosphor 30

    Phosphor 30

    293
  • Shader Animation

    Shader Animation

    3.7K
  • Wave

    Wave

    693
  • Black Hole

    Black Hole

    27
  • Shader Background

    Shader Background

    2K
  • Shader Lines

    Shader Lines

    2.3K
  • Liquid Glass Logo Reveal

    Liquid Glass Logo Reveal

    629