ICONIC BEAM is a high-performance visual experiment featuring 10 unique CSS-driven nodes optimized for hardware-accelerated smoothness.
One-line pitch: A collection of 10 bespoke animation nodes that leverage CSS Houdini and conic gradients to create surgical-precision lighting effects.
Built for the modern web with zero dependencies (Tailwind via CDN for layout). Each node is a standalone visual study in motion, color, and GPU-accelerated rendering.
Most web loaders and background effects are either too heavy (Lottie/Video) or too simple. ICONIC BEAM hits the sweet spot:
- Lightweight: Pure CSS/JS logic.
- High Fidelity: Conic gradients provide a depth that standard linear gradients can't match.
- Performant: Uses
@propertyfor sub-pixel smooth animations.
|
|
|
Variant Catalog
- PULSE: High-freq neon blue
- TWIN FIRE: Dual-axis combustion
- TRIPLE NEON: Multi-spectrum overlap
- GLACIAL: Minimalist white resonance
- RADAR: Tactical sweep
- POLICE: High-alert tactical flash
- GHOST: Subtle Slate-gray echo
- STAR: Multi-point gold sparkle
- VOID: Slow-decay pink resonance
- TOXIC: High-energy green/lime decay
The core of the effect relies on the CSS Houdini @property API, allowing us to animate custom variables that would otherwise be static.
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}By animating the --angle across a conic-gradient, we achieve a "spinning beam" effect that is rendered directly by the GPU's painting engine rather than a heavy JS loop.
No build steps. No npm install. Just open the file.
git clone https://github.com/AVANT-ICONIC/iconic-beam.git
cd iconic-beam
open index.html.
├── README.md # The file you are reading
├── index.html # The entire application logic
└── video.gif # Hero showcase
- No Mystery Logic: The CSS is readable and commented.
- No Heavy Assets: Everything is procedurally generated.
- No Jitter: Tested for 60fps+ on modern displays.
Distributed under the MIT License.
Built by AVANT ICONIC.
If these nodes light up your project, a star is a fair trade.