Volver a Labs
Experimentalmayo de 2026
Campo generativo interactivo
Experiencia visual que reacciona suavemente al cursor utilizando animaciones basadas en física y CSS nativo.
Framer MotionVanilla JSTailwind CSS
Interactive Demo
Campos de Fuerza CSS
Mueve el cursor sobre la cuadrícula. Renderizado 100% CSS nativo sin WebGL.
El Problema
Las animaciones complejas y dinámicas (como mallas que reaccionan al ratón) suelen requerir librerías muy pesadas como Three.js que hunden el rendimiento.
Nuestra Solución
Una rejilla generativa basada en divs optimizados y CSS variables actualizadas vía JavaScript puro para emular interacciones avanzadas.
Aprendizajes Clave
- requestAnimationFrame es vital para la fluidez a 60fps
- Evitar mutar el DOM de React durante el tracking del ratón previene cuellos de botella
Limitaciones
- No tiene verdaderas coordenadas Z (3D real)
- Para densidades mayores a 500 elementos se requeriría WebGL o Canvas
¿Quieres implementar algo así en tu empresa?
Aplicamos los descubrimientos de PASSO Labs directamente a los proyectos de nuestros clientes. Llevamos la innovación teórica a resultados de negocio reales.