Fire Background WebG

Fire Background WebGL

Bring a cinematic, GPU-powered fire effect to your Framer projects, with realistic procedural flames, glowing sparks, smooth animation, and interactive mouse movement.

Fire Background WebGL is a lightweight WebGL component designed for creating atmospheric hero sections, backgrounds, landing pages, portfolios, creative websites, and experimental interfaces without external libraries.

✨ Features

• 🔥 Procedural WebGL fire animation

• ✨ Dynamic floating sparks

• ⚡ Smooth GPU-powered rendering

• 🖱 Interactive mouse movement

• 🎛 Adjustable fire intensity

• 📏 Control fire height and width

• ✨ Customize spark amount and size

• ⏩ Adjustable animation speed

• 🎨 Custom background color

• 👁 Automatically pauses when outside the viewport

• 📱 Responsive canvas sizing

• 🖥 Retina/DPR-aware rendering

• ♿ Optional accessibility label

• 🧩 Works directly inside Framer

💬 Support

Need help, found a bug, or have an idea for an improvement?

Email: karimsaif010@gmail.com

X: @karimsaif0

I'm always happy to hear feedback, suggestions, and ideas for future components.