Hossain Jahed

Spooky Smoke Animation

Shaders 749

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.7K
  • 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

    293
  • Phosphor 30

    Phosphor 30

    294
  • Shader Animation

    Shader Animation

    3.7K
  • Wave

    Wave

    693
  • Shader Lines

    Shader Lines

    2.3K
  • Radial Shader

    Radial Shader

    143
  • Old Television Shader

    Old Television Shader

    408
  • Black Hole

    Black Hole

    28