Many generative art tools use a JavaScript requestAnimationFrame loop to update positions. This consumes CPU cycles on the main thread.
AuraWall generates a static <style> block with unique @keyframes for each shape. Once injected, the browser's GPU takes over. This ensures 60fps even on mobile devices while keeping the JS thread free for UI interactions.
Each shape receives a random trajectory vector. Using CSS transform: translate(), elements float organically across the canvas.
transform: translate()Scale transformations are applied in sinusoidal rhythm. By offsetting the animation delay for each layer, we create a 'breathing' effect.
transform: scale()Slow rotation around the shape's center. Creates subtle movement without distracting from the main content.
transform: rotate()Animation of the turbulence filter's seed attribute to create a dynamic 'TV static' effect.
seed attributeinterface AnimationSettings {
enabled: boolean;
// Velocidade global (0.1 - 2.0)
speed: number;
// Intensidade de movimento
intensity: number; // 0-100
// Tipos de movimento ativos
flow: boolean; // Translação X/Y
pulse: boolean; // Escala
rotate: boolean; // Rotação
noiseAnim: boolean; // Seed do ruído
}
// Exemplo de keyframes gerados:
@keyframes shape-0-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(15px, -10px); }
}
@keyframes shape-0-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}Optimized for maximum fluidity. All animations run on the GPU via CSS Compositor, freeing the main thread for interactivity.
Consistent frame rate across all animations
Minimal main thread JavaScript usage
Perfect Performance score