Componentes de Backgrounds

Componentes de Backgrounds listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• KaleidoTunnel — Caleidoscopio de 4 pliegues sobre negro profundo: un anillo de pétalos cian que respira y florece en estallidos de mariposa, rodeado de filamentos arcoíris ondulados que corren sin fin hacia fuera por un túnel espectral, con aberración cromática en los bordes y glitch sutil de saltos de fase. Hecho con WebGL crudo y GLSL propio, sin ninguna librería: quad full-screen, pliegue caleidoscópico en polares, paleta coseno construida a mano y la escena muestreada tres veces con offsets RGB. El centro del caleidoscopio deriva con suavidad hacia el cursor y vuelve solo al salir. Respeta prefers-reduced-motion mostrando un fotograma estático en plena floración.
• MoltenStar — Estrella-anillo fundida que respira en la oscuridad: el limbo de una esfera de miles de partículas brilla intenso mientras el centro queda oscuro —look de eclipse/corona—, con gradiente cálido en el arco superior fundiendo a azul eléctrico en el inferior, superficie ondulada visible en el contorno y erupciones blanco-cálidas permanentes en los polos. Hecho con WebGL crudo y GLSL propio, sin ninguna librería: esfera de Fibonacci en gl.POINTS con blending aditivo, alfa por ángulo de visión, ruido de valor 3D precalculado por vértice y arcos paramétricos gobernados por envolventes. Al mover el cursor sobre la estrella, las protuberancias brotan justo en el punto de la esfera que tocas y decaen suavemente al salir. Respeta prefers-reduced-motion mostrando un fotograma estático representativo.
• GlyphStorm — Aguacero psicodélico de glifos ASCII: columnas de caracteres caen a distintas velocidades mientras cada raya cicla el arcoíris de neón — cabezas casi blancas con halo CRT y estelas que se disuelven en bruma de color sobre un vacío salpicado de estrellas. Hecho con Canvas 2D puro y un atlas de glifos pre-renderizado en un canvas offscreen: el glow se hornea una sola vez y el bucle de animación solo hace drawImage, sin ninguna librería. El cursor aparta las rayas cercanas con un empuje suave y cada columna vuelve a su carril al salir. Respeta prefers-reduced-motion pintando un fotograma estático representativo.
• HelixStrands — Doble hélice de ADN formada por decenas de miles de partículas que gira, se trenza y se mece en un espacio azul petróleo oscuro: cada hebra es una nube densa de bordes difusos que degrada de índigo a violeta, con peldaños tenues entre ellas y polvo estelar a la deriva. Implementada en WebGL puro con gl.POINTS y GLSL propio, sin ninguna librería: toda la animación (rotación, balanceo, niebla por profundidad y blending aditivo) ocurre en la GPU. La inclinación de la hélice sigue al cursor con easing suave y vuelve sola al centro. Respeta prefers-reduced-motion mostrando un fotograma estático.
• FilamentTree — Árbol fantasmal esculpido con miles de filamentos tenues sobre un vacío azul-negro: un tronco continuo que sube soltando ramas madre a alturas escalonadas, se abre arriba en una copa ancha de encaje y baja hasta un abanico de raíces, todo generado por recursión 3D con semilla fija. Cada rama se trenza en hebras helicoidales de partículas que giran despacio mientras un viento suave las mece (la amplitud crece con la altura). WebGL puro con puntos aditivos y proyección en perspectiva a mano, sin ninguna librería. El viento sigue la posición horizontal del cursor con easing y decae al salir; con prefers-reduced-motion se muestra un fotograma estático del árbol.
• StarTendrils — Núcleo estelar bioluminiscente que se abre en un abanico de filamentos-tentáculo a la deriva: miles de partículas ondulan lenta y orgánicamente en 3D, degradando de cian helado en el centro a violeta en las puntas, sobre un campo de estrellas con paralaje. WebGL puro con GLSL propio y gl.POINTS — toda la animación vive en el vertex shader, sin three.js ni ninguna librería. El cursor peina suavemente los filamentos, que vuelven a su deriva al salir. Con prefers-reduced-motion se muestra un fotograma estático representativo.
• AbyssGlow — Criatura bioluminiscente a la deriva en el vacío negro: un núcleo brillante quemado a blanco cálido con halo naranja suave, del que salen chorros gruesos y granulados de partículas azul acero salpicados de discos bokeh, sobre una capa de bokeh ambiental de discos grandes desenfocados flotando por todo el fondo. Miles de partículas GPU en WebGL puro (gl.POINTS con GLSL propio, rotación 3D proyectada a mano y mezcla aditiva), sin three.js ni ninguna otra librería. La criatura se orienta suavemente hacia el cursor y vuelve sola a su deriva al salir. Con prefers-reduced-motion muestra un fotograma estático representativo.
• SmokePillar — Cuerda densa de humo blanco hueso que serpentea en eses al ascender desde una ancha piscina de polvo posada en la base, apretándose con la altura hasta una cabeza incandescente casi blanca pura bajo un campo tranquilo de estrellas. Miles de partículas gl.POINTS calculadas íntegramente en la GPU con WebGL puro y GLSL propio, sin ninguna librería: la CPU no actualiza ni un buffer por frame. El viento lateral se inclina suavemente hacia el cursor y vuelve solo a su deriva natural al salir. Respeta prefers-reduced-motion mostrando un fotograma estático de la escena.
• CoronaDust — Sol eclipsado sobre negro puro: el núcleo queda oscuro tras un anillo de brasa de borde grumoso y todo el brillo vive en la corona, miles de motas de oro y ámbar que respiran y erupcionan en rayos con llamaradas periódicas por sectores. Hecho con WebGL crudo y GLSL propio, sin ninguna librería: un quad procedural para el disco y hasta 30k partículas en gl.POINTS con blending aditivo. Al acercar el cursor, los rayos de ese sector se intensifican y se estiran con easing suave. Respeta prefers-reduced-motion mostrando un fotograma estático representativo.
• TwinGalaxies — Una gran galaxia elíptica de puntos azul vivo y blanco, inclinada en perspectiva y llenando el encuadre casi de borde a borde, se pinta a sí misma sobre anillos concéntricos con cúmulos casi blancos y twinkle por partícula, mientras su gemela gris acero asoma más tenue al fondo. Implementado con WebGL crudo y GLSL propio: partículas gl.POINTS con blending aditivo, tilt 3D y perspectiva proyectados a mano en el vertex shader, sin three.js ni ninguna otra librería. El tilt de la escena sigue sutilmente al cursor con easing y decae al salir. Respeta prefers-reduced-motion mostrando un fotograma estático representativo.
• MoleculeField — Fondo ambiental de laboratorio: burbujas, moléculas con enlaces y puntos que flotan y laten con suavidad, más una hélice de ADN girando al fondo. Ideal para nichos de ciencia, salud o biotech. Solo React + CSS, sin librerías.
• GlyphMatrix — Panel de matriz de puntos estilo LED (Nothing Phone): una banda de brillo diagonal recorre la rejilla mientras cada punto centellea sutilmente. Fondo tecnológico y retro-digital. Canvas 2D, sin librerías.
• RetroGrid — Suelo synthwave en perspectiva que se desplaza sin fin hacia el horizonte, con las líneas desvaneciéndose al fondo. Fondo retro-futurista de un solo elemento, ideal para heros. Solo CSS —plano inclinado en 3D con scroll infinito—, sin librerías.
• Flock — Componente Backgrounds clean-room, sin dependencias.
• FluidWake — Componente Backgrounds clean-room, sin dependencias.
• EventHorizon — Componente Backgrounds clean-room, sin dependencias.
• DustSphere — Componente Backgrounds clean-room, sin dependencias.
• Globe — Globo terráqueo 3D de puntos que rota solo y se puede arrastrar con inercia, implementado en Canvas 2D propio (sin WebGL ni librerías). El componente-cartel de la sección de fondos.
• FlowField — Partículas que siguen un campo de flujo generado por ruido, dejando estelas suaves. Fondo premium y orgánico en Canvas.
• FlickerGrid — Rejilla de cuadrados que parpadean con opacidad aleatoria sobre Canvas. Se distingue de DotGrid (puntos estáticos) y LetterGlitch (caracteres).
• Vortex — Componente Backgrounds clean-room, sin dependencias.
• Spotlight — Componente Backgrounds clean-room, sin dependencias.
• ShootingStars — Componente Backgrounds clean-room, sin dependencias.
• RippleClick — Componente Backgrounds clean-room, sin dependencias.
• Pixelate — Componente Backgrounds clean-room, sin dependencias.
• MaskReveal — Componente Backgrounds clean-room, sin dependencias.
• GradientCard — Componente Backgrounds clean-room, sin dependencias.
• GradientBlobs — Componente Backgrounds clean-room, sin dependencias.
• GlowStars — Componente Backgrounds clean-room, sin dependencias.
• GeminiStream — Componente Backgrounds clean-room, sin dependencias.
• DottedGlow — Componente Backgrounds clean-room, sin dependencias.
• CanvasText — Componente Backgrounds clean-room, sin dependencias.
• BoxesGrid — Componente Backgrounds clean-room, sin dependencias.
• BeamLines — Componente Backgrounds clean-room, sin dependencias.
• BeamCollision — Componente Backgrounds clean-room, sin dependencias.
• AsciiImage — Componente Backgrounds clean-room, sin dependencias.
• Waves — Componente Backgrounds clean-room, sin dependencias.
• Threads — Componente Backgrounds clean-room, sin dependencias.
• SoftAurora — Componente Backgrounds clean-room, sin dependencias.
• Silk — Componente Backgrounds clean-room, sin dependencias.
• SideRays — Componente Backgrounds clean-room, sin dependencias.
• ShapeGrid — Componente Backgrounds clean-room, sin dependencias.
• RippleGrid — Componente Backgrounds clean-room, sin dependencias.
• Radar — Componente Backgrounds clean-room, sin dependencias.
• PrismaticBurst — Componente Backgrounds clean-room, sin dependencias.
• Prism — Componente Backgrounds clean-room, sin dependencias.
• PlasmaWave — Componente Backgrounds clean-room, sin dependencias.
• Plasma — Componente Backgrounds clean-room, sin dependencias.
• PixelSnow — Componente Backgrounds clean-room, sin dependencias.
• PixelBlast — Componente Backgrounds clean-room, sin dependencias.
• Particles — Componente Backgrounds clean-room, sin dependencias.
• Orb — Componente Backgrounds clean-room, sin dependencias.
• Meteors — Componente Backgrounds clean-room, sin dependencias.
• LiquidEther — Componente Backgrounds clean-room, sin dependencias.
• LiquidChrome — Componente Backgrounds clean-room, sin dependencias.
• LineWaves — Componente Backgrounds clean-room, sin dependencias.
• Lightning — Componente Backgrounds clean-room, sin dependencias.
• Lightfall — Componente Backgrounds clean-room, sin dependencias.
• LightRays — Componente Backgrounds clean-room, sin dependencias.
• LightPillar — Componente Backgrounds clean-room, sin dependencias.
• LetterGlitch — Componente Backgrounds clean-room, sin dependencias.
• LampGlow — Componente Backgrounds clean-room, sin dependencias.
• Iridescence — Componente Backgrounds clean-room, sin dependencias.
• Hyperspeed — Componente Backgrounds clean-room, sin dependencias.
• HeroHighlight — Componente Backgrounds clean-room, sin dependencias.
• GridScan — Componente Backgrounds clean-room, sin dependencias.
• GridMotion — Componente Backgrounds clean-room, sin dependencias.
• GridDistortion — Componente Backgrounds clean-room, sin dependencias.
• Grainient — Componente Backgrounds clean-room, sin dependencias.
• GradientBlinds — Componente Backgrounds clean-room, sin dependencias.
• Galaxy — Componente Backgrounds clean-room, sin dependencias.
• FloatingLines — Componente Backgrounds clean-room, sin dependencias.
• Ferrofluid — Componente Backgrounds clean-room, sin dependencias.
• FaultyTerminal — Componente Backgrounds clean-room, sin dependencias.
• EvilEye — Componente Backgrounds clean-room, sin dependencias.
• DotGrid — Componente Backgrounds clean-room, sin dependencias.
• DotField — Componente Backgrounds clean-room, sin dependencias.
• Dither — Componente Backgrounds clean-room, sin dependencias.
• DarkVeil — Componente Backgrounds clean-room, sin dependencias.
• ColorBends — Componente Backgrounds clean-room, sin dependencias.
• Beams — Componente Backgrounds clean-room, sin dependencias.
• Ballpit — Componente Backgrounds clean-room, sin dependencias.
• Balatro — Componente Backgrounds clean-room, sin dependencias.
• Aurora — Componente Backgrounds clean-room, sin dependencias.