About ASCII Flame Fire

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.