Componentes de Animations

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

• AnimatedBeam — Hub radial de nodos conectados a un centro por los que fluyen haces de luz en secuencia, como integraciones que convergen en tu producto. Cada haz es un tramo brillante que viaja por su conexión; el retardo escalonado por nodo crea el ritmo. Solo SVG + CSS, sin refs externas ni librerías.
• TickerClock — Un dial de ticks radiales por el que viaja una onda de pulso —cada tick se ilumina y se estira en secuencia alrededor del círculo— con una aguja que gira en bucle. El retardo de cada tick se deriva de su posición, creando una animación orquestada. Solo CSS, sin librerías.
• PulseGrid — Rejilla de puntos que estalla en anillos desde el centro hacia fuera: una onda escalonada los hace florecer en secuencia, se asientan y el ciclo se repite tras una breve pausa. Solo CSS —el retardo de cada punto se deriva de su distancia al centro—, sin librerías de animación. Ideal como fondo vivo o pieza de hero.
• ScrollGauge — Barra de progreso de lectura fijada arriba o abajo que se llena según el scroll, con degradado. Mide la ventana o un contenedor.
• PathFlow — Texto o elementos que circulan en bucle a lo largo de un trazado SVG (onda, círculo, infinito, arco). Marquee no lineal, difícil de encontrar sin dependencias.
• DvdBounce — Un elemento rebota por el contenedor al estilo del salvapantallas de DVD, cambiando de color en cada rebote. Divertido y nostálgico.
• ConfettiBurst — Explosión de confeti con física propia en Canvas (gravedad, deriva, giro y desvanecido), disparable al clic, al montar o en bucle. Para estados de éxito y checkout.
• TrailIntro — Componente Animations clean-room, sin dependencias.
• ImageEntrance — Componente Animations clean-room, sin dependencias.
• GridIntro — Componente Animations clean-room, sin dependencias.
• Timeline — Componente Animations clean-room, sin dependencias.
• ParallaxScroll — Componente Animations clean-room, sin dependencias.
• HeroParallax — Componente Animations clean-room, sin dependencias.
• DeviceScroll — Componente Animations clean-room, sin dependencias.
• LottieSpinner — Componente Animations clean-room, sin dependencias.
• LottieDots — Componente Animations clean-room, sin dependencias.
• LottieCheck — Componente Animations clean-room, sin dependencias.
• TargetCursor — Componente Animations clean-room, sin dependencias.
• Strands — Componente Animations clean-room, sin dependencias.
• StickyReveal — Componente Animations clean-room, sin dependencias.
• StickerPeel — Componente Animations clean-room, sin dependencias.
• StarBorder — Componente Animations clean-room, sin dependencias.
• SplashCursor — Componente Animations clean-room, sin dependencias.
• ShapeBlur — Componente Animations clean-room, sin dependencias.
• ScrollZoom — Componente Animations clean-room, sin dependencias.
• ScrollBeam — Componente Animations clean-room, sin dependencias.
• Ribbons — Componente Animations clean-room, sin dependencias.
• PixelTransition — Componente Animations clean-room, sin dependencias.
• PixelTrail — Componente Animations clean-room, sin dependencias.
• OrbitImages — Componente Animations clean-room, sin dependencias.
• Noise — Componente Animations clean-room, sin dependencias.
• MetallicPaint — Componente Animations clean-room, sin dependencias.
• MetaBalls — Componente Animations clean-room, sin dependencias.
• MagnetLines — Componente Animations clean-room, sin dependencias.
• Magnet — Componente Animations clean-room, sin dependencias.
• MagicRings — Componente Animations clean-room, sin dependencias.
• LogoLoop — Componente Animations clean-room, sin dependencias.
• LaserFlow — Componente Animations clean-room, sin dependencias.
• ImageTrail — Componente Animations clean-room, sin dependencias.
• GradualBlur — Componente Animations clean-room, sin dependencias.
• GlareHover — Componente Animations clean-room, sin dependencias.
• GhostCursor — Componente Animations clean-room, sin dependencias.
• FadeContent — Componente Animations clean-room, sin dependencias.
• ElectricBorder — Componente Animations clean-room, sin dependencias.
• Cubes — Componente Animations clean-room, sin dependencias.
• Crosshair — Componente Animations clean-room, sin dependencias.
• ClickSpark — Componente Animations clean-room, sin dependencias.
• BlobCursor — Componente Animations clean-room, sin dependencias.
• Antigravity — Componente Animations clean-room, sin dependencias.
• AnimatedContent — Componente Animations clean-room, sin dependencias.