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
Float32Arraybuffers 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
ResizeObserverinstances 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
