ASCII Flame Fire

ASCII Fire Simulation

ASCII Flame for Framer

Bring retro terminal aesthetics and nostalgic atmospheric physics to your Framer websites. Created by @karimsaif , this component generates a dynamic, procedural ASCII fire simulation that renders real-time thermal propagation, rising embers, floating sparks, and customizable character density entirely inside HTML typography grids.

🌌 What It Does

🔥 Procedural Heat Propagation Mechanics

• Cellular Thermal Array: Uses two-dimensional Float32Array buffers to calculate upward heat transfer, cooling decay, and lateral wind drift across a dynamic monospace character grid.

• Responsive Grid Auto-Fitting: Utilizes dynamic canvas text measurement and real-time ResizeObserver instances to calculate ideal character column and row counts based on container dimensions.

✨ Particle Systems & Ember Physics

• Embers & Sparks: Renders independent, lightweight particle systems that simulate slow-rising ash embers and fast-drifting sparks with custom velocity, life span, and heat decay vectors.

• Turbulent Jitter & Pulse: Simulates organic air movement and draft variations via configurable noise generators and rhythmic sinusoidal intensity pulses.

🎨 Customization Options

All properties are directly configurable through Framer’s Property Panel:

• Simulation Mechanics: Fine-tune Intensity (base fuel heat), Thickness (fuel row depth), Decay (cooling rate), Turbulence (flicker randomness), and optional rhythmic Pulse mode.

• Wind Dynamics: Set Wind Direction (None, Left, Right) and adjust Wind Force to push rising flames sideways.

• Particle Controls: Toggle rising Embers and high-velocity Sparks independently.

🚀 Best Used For

• 🎮 Retro terminal-style landing pages & developer portfolios

• 🕹 Gaming, cyberpunk, or indie studio website heroes

• 🎃 Seasonal event banners & atmospheric dark-mode sections

• 💻 Interactive code playground visual backgrounds

Made with 💛 by @Karim Saif for Framer Marketplace