Skip to content

component

Fire Background WebG

By Karim Saif

Details

Summary

Fire effect to your Framer project

Description

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.

Introduction

Fire effect to your Framer project

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150119798/248/299/49/99/15
  • All · #1979