Animaciones web: cursores, efectos hover y bordes de luz

Cursores, bordes, estelas y envoltorios que dan vida a cualquier elemento.

Cuándo usarlas: Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.

• AnimatedContent — Envoltorio que anima cualquier contenido al entrar en pantalla.
• Antigravity — Campo de partículas 3D que se repelen del cursor.
• BlobCursor — Cursor orgánico en forma de gota con inercia y morphing elástico.
• BorderBeam — Haz de luz que recorre el borde de un contenedor.
• ClickSpark — Chispas de partículas en el punto donde haces clic.
• Confetti — Lanza confeti para celebrar una acción.
• CoolMode — Partículas que salen al hacer clic en un botón.
• Crosshair — Cursor de mira con líneas que siguen al ratón y distorsionan enlaces.
• Cubes — Rejilla de cubos 3D que se inclinan hacia el cursor.
• CursorGrid — Rejilla cuyas celdas se iluminan alrededor del cursor.
• DitherVeil — Foto impresa en dither de 1 bit que el cursor “quema” hasta el color.
• ElasticLine — Línea elástica que se estira con el ratón.
• ElasticMesh — Superficie de malla elástica que se estira bajo el puntero.
• ElectricBorder — Borde eléctrico con arcos de energía y brillo ajustable.
• FadeContent — Envoltorio de fundido con desenfoque al entrar en pantalla.
• Float — Envoltorio que hace flotar suavemente su contenido.
• GlareHover — Reflejo de luz realista que cruza un elemento al pasar el ratón.
• GlowCursor — Estela de luz por shader que sigue al puntero con pulso y brillo.
• GooeySvgFilter — Filtro SVG que une elementos como gotas.
• GradualBlur — Desenfoque progresivo en capas para bordes cinematográficos.
• Gravity — Elementos que caen con física real y puedes lanzar.
• HalftoneReveal — Trama de semitono de imprenta que se aclara alrededor del cursor.
• ImageTrail — Estela de imágenes que sigue al cursor, con varias variantes.
• LaserFlow — Haz láser que fluye y se derrama sobre una superficie.
• Lens — Lupa que amplía imágenes o vídeos al pasar el ratón.
• LogoLoop — Carrusel infinito de logos que se pausa al pasar el ratón.
• MagicRings — Anillos mágicos concéntricos que siguen al ratón.
• Magnet — Los elementos se sienten atraídos por el cursor y vuelven con muelle.
• MagnetLines — Campo de agujas que apuntan hacia el cursor.
• MetaBalls — Metabolas líquidas que se fusionan y separan.
• MetallicPaint — Pintura metálica líquida aplicada sobre cualquier logo.
• Noise — Grano fílmico animado para dar textura.
• OrbitImages — Imágenes que orbitan siguiendo una trayectoria SVG.
• OrbitingCircles — Iconos orbitando alrededor de un centro.
• ParallaxFloating — Imágenes flotantes con parallax al mover el ratón.
• PixelSwap — Los píxeles cubren, intercambian y revelan contenido.
• PixelTrail — Estela de píxeles detrás del cursor.
• PixelTransition — Transición pixelada entre dos contenidos al hover.
• RippleDistortion — Distorsión de agua que deja una estela al pasar el puntero.
• Screensaver — Elementos que rebotan por la pantalla como un salvapantallas.
• ScrollExpand — Un marco de imagen que crece a pantalla completa con el scroll.
• ShapeBlur — Forma geométrica que se difumina según la distancia al ratón.
• ShineBorder — Borde con un brillo de degradado animado.
• SmoothCursor — Cursor con física de muelle que gira según la dirección.
• SplashCursor — Simulación de fluido que salpica al mover el cursor.
• StarBorder — Borde con destellos que orbitan alrededor del contenido.
• StickerPeel — Pegatina que se despega de la esquina con sombra 3D.
• Strands — Hebras luminosas que ondulan y se entrelazan.
• SwarmCursor — Enjambre de partículas que persigue al cursor.
• TargetCursor — Cursor de cuatro esquinas que se ajusta a los elementos objetivo.