Inicio / Librería Librería de efectos y animaciones web 287 efectos para web ordenados por familia: texto, animaciones, componentes, microinteracciones, fondos y 3D. Todos en vivo, con código y explicados en español.
Animaciones de texto: entradas, destellos, descifrados y tipografía variable.
ASCIIText — Texto 3D renderizado como arte ASCII con ondas retro. AuroraText — Texto relleno con una aurora de colores animada. BlurText — Las palabras emergen del desenfoque hasta quedar nítidas. BreathingText — Texto que “respira” cambiando su peso. CircularText — Texto en órbita circular que acelera o se detiene al pasar el ratón. ComicText — Texto con estilo de cómic que entra con rebote. CountUp — Contador animado con separadores y decimales, ideal para métricas. CurvedLoop — Marquesina que fluye sobre una curva y se puede arrastrar. DecryptedText — Descifrado estilo hacker: glifos aleatorios hasta revelar el texto. DepthText — Tipografía extruida en capas con parallax 3D. DiaTextReveal — Una banda de color barre el texto antes de asentarse. DockText — Letras con magnificación tipo dock. EchoText — Copias fantasma siguen al texto hasta fundirse en una sola palabra. FallingText — Las palabras caen con gravedad y rebotan con física real. FoldText — Las líneas se despliegan como papel doblado que se abre. FuzzyText — Texto vibrante con interferencia analógica controlable al hover. GlitchText — Glitch RGB con separación de canales y temblor. GradientText — Degradado animado que recorre el texto en vivo. GradualSpacingText — Las letras se separan hasta su espaciado final. Highlighter — Subrayado dibujado a mano sobre el texto. Letter3dSwap — Letras que giran en 3D para cambiar de texto. LineShadowText — Texto con una sombra de líneas en movimiento. MaskedHeading — Titular gigante con imagen o malla de color vista a través de las letras. MorphingText — Palabras que se funden unas en otras. ParticleText — El texto se forma a partir de partículas que se dispersan y reagrupan. RotatingText — Rota entre varias frases con transiciones de muelle. ScaleLetterText — Las letras crecen al pasar el ratón. ScrambledText — Las letras cercanas al cursor se revuelven y vuelven a su sitio. ScrollAndSwapText — Texto que cambia de letras al hacer scroll. ScrollFloat — Las letras flotan hacia su posición al hacer scroll. ScrollReveal — El texto se desenfoca y revela palabra a palabra con el scroll. ScrollVelocity — Marquesina cuya velocidad depende de lo rápido que hagas scroll. ShinyText — Destello metálico que recorre el texto como un reflejo. Shuffle — Las letras barajan su posición antes de asentarse. SparklesText — Texto con destellos que aparecen alrededor. SplitFlapText — Panel de aeropuerto split-flap que cambia de frase con clacks mecánicos. SplitText — Divide el texto en letras o palabras para una entrada escalonada. StrokeText — Las letras se dibujan con trazo y después se rellenan. TextAlongPath — Texto que sigue un trazado curvo. TextAnimate — Texto con varias animaciones de entrada (fade, blur, slide…). TextCursor — Un texto que sigue al cursor dejando una estela de copias. TextCursorProximity — Las letras reaccionan a la cercanía del cursor. TextLoop — Marquesina continua que fluye por trayectorias SVG curvas. TextPressure — Tipografía variable que se ensancha y engorda según la cercanía del cursor. TextType — Máquina de escribir con cursor parpadeante y ritmo ajustable. TrueFocus — Un visor de enfoque salta entre palabras desenfocando el resto. UnderlineToBackground — Subrayado que se convierte en fondo al hover. VariableFontAndCursor — Tipografía variable controlada por la posición del cursor. VariableProximity — El peso de cada letra cambia según la distancia al puntero. VerticalCutReveal — Texto que se revela con un corte vertical. WarpText — Distorsión WebGL que dobla y refracta el texto alrededor del puntero. WavyText — Texto que entra con una ola. Cursores, bordes, estelas y envoltorios que dan vida a cualquier elemento.
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. Piezas de interfaz completas: navegación, galerías, tarjetas, carruseles.
AccordionGallery — Paneles que se expanden al hover revelando imágenes con parallax. AnimatedBeam — Haces de luz que conectan elementos, ideal para integraciones. AnimatedList — Lista que aparece elemento a elemento, como notificaciones. AnimatedList — Lista con entrada escalonada y navegación con teclado. BorderGlow — Borde con brillo de malla degradada que sigue la dirección del cursor. BounceCards — Abanico de tarjetas que entran rebotando. BoxCarousel — Carrusel en forma de cubo 3D. BubbleMenu — Menú de burbujas que se expande con elementos escalonados. CardNav — Barra de navegación que se expande en paneles de tarjetas. CardSwap — Pila de tarjetas que se intercambian solas. Carousel — Carrusel responsive con gestos táctiles y bucle. ChromaGrid — Rejilla en escala de grises que se colorea donde miras. CircularGallery — Galería curva infinita que se arrastra o se desplaza con scroll. Counter — Contador de rodillos animado con easing. CssBox — Caja 3D hecha solo con CSS que puedes rotar. CurvedInput — Campo de texto curvado con botón de envío. DecayCard — Tarjeta cuyo contenido se desintegra al pasar el ratón. DepthCarousel — Tarjetas en un raíl 3D con profundidad, arrastre y autoplay. Dock — Dock estilo macOS con magnificación por proximidad. DomeGallery — Cúpula 3D de imágenes que giras con el dedo. DragElements — Elementos que puedes arrastrar y lanzar. DriftWall — Muro infinito de tarjetas en perspectiva que se elevan al hover. ElasticSlider — Slider cuyo tirador se estira y vuelve con muelle. ElementAlongSvgPath — Elementos que se mueven siguiendo un trazado SVG. FlowingMenu — Menú con marquesina que entra por el borde más cercano. FlyingPosters — Pósters 3D que vuelan en bucle con el scroll. Folder — Carpeta que se abre para revelar su contenido. GlassIcons — Iconos con efecto de cristal esmerilado. GlassSurface — Superficie de cristal estilo Apple con distorsión en tiempo real. GooeyNav — Navegación cuyo indicador se deforma como una gota. InfiniteMenu — Esfera infinita de elementos navegable con arrastre. InfiniteSpiral — Hélice 3D infinita de imágenes. Lanyard — Credencial 3D colgante con física de péndulo realista. LineSidebar — Barra lateral cuyos elementos reaccionan a la cercanía del cursor. MagicBento — Bento grid con partículas, foco de luz y borde brillante. MagicCard — Tarjeta con un foco de luz que sigue al cursor e ilumina sus bordes. Marquee — Carrusel infinito para logos, opiniones o imágenes. MarqueeAlongSvgPath — Marquesina de imágenes que sigue una curva SVG. Masonry — Masonry responsive con reflujo animado. MediaBetweenText — Una imagen o vídeo que se abre entre dos palabras. ModelViewer — Visor de modelos 3D con órbita e iluminación. MorphSlider — Slider WebGL que funde imágenes con una transición líquida. NeonGradientCard — Tarjeta con un borde de neón en degradado. OptionWheel — Selector curvo tipo rueda que gira con scroll, arrastre o flechas. PillNav — Navegación en píldora con resaltado deslizante. PixelCard — Tarjeta que se revela con una expansión de píxeles. PixelImage — Imagen que se revela píxel a píxel. ProfileCard — Tarjeta de perfil holográfica con inclinación 3D. ReflectiveCard — Tarjeta metálica que refleja tu webcam y la luz. ScrollStack — Tarjetas que se apilan con profundidad al hacer scroll. SpecularButton — Botón de cristal con luz especular que recorre su borde. SpotlightCard — Tarjeta con foco de luz que sigue al cursor. Stack — Pila de fotos arrastrable con autoplay. StaggeredMenu — Menú a pantalla completa con entrada escalonada. Stepper — Asistente de pasos con transiciones animadas. Terminal — Terminal animado que escribe comandos. TiltedCard — Tarjeta 3D que se inclina hacia el puntero. Botones, interruptores, sliders e indicadores con física y feedback táctil.
AnimatedBadge — Etiqueta con brillo animado para novedades. AnimatedCircularProgressBar — Indicador circular de progreso animado. BellToggle — Botón de notificaciones con campana que suena al activarlo. BranchedMenu — Menú desplegable con ramas curvas hacia cada opción. CallChip — Chip de llamada a herramienta con progreso y contador en ms. CodeSlots — Campo de código de un solo uso (OTP) con animación por dígito. CometDial — Dial que se lanza con un gesto y deja una estela de cometa. DodgeField — El contenido huye del puntero dentro de un área. FlipCard — Tarjeta de dos caras que gira en 3D con clic o arrastre. FolderFloat — Carpeta que se abre y deja flotar sus notas. FuseButton — Botón con “deshacer” sobre una mecha que se consume. GlideSelect — Selector cuyo menú sale de su esquina con un resaltado que se desliza. HoldButton — Botón de “mantén para confirmar” con relleno líquido. InteractiveHoverButton — Botón cuya flecha y texto se transforman al pasar el ratón. JellyRadio — Grupo de opciones cuya selección se hincha como gelatina. LatticeLoader — Indicador de estado de agente IA con rejilla de puntos en ola. LiveButton — Botón con indicador “en directo”. PaperCrumple — Imagen que se arruga como papel al mantenerla pulsada. PeekRating — Valoración con estrellas que se levantan en ola al pasar. PromptBar — Caja de chat con fuentes @, comandos /, modelo y dictado. PulsatingButton — Botón que late para llamar la atención. PulseHeart — Botón de “me gusta” que late y cambia el contador. RainbowButton — Botón con un borde arcoíris animado. RefineFrame — Marco que muestra el progreso de una imagen generada sin saltos. RippleButton — Botón con onda al hacer clic. RubberSegment — Control segmentado con un selector de goma elástica. ScrubField — Campo numérico que se arrastra para cambiar el valor. ShimmerButton — Botón con un destello que recorre su borde. ShinyButton — Botón con un brillo que lo cruza. Shredder — Lista con trituradora: arrastra una fila para destruirla. SlideCommit — Desliza para confirmar, con estados de carga, éxito y error. SlingButton — Botón de enviar que se tensa como un tirachinas. SloshGauge — Indicador de depósito con líquido que se mueve con inercia. SpringCheck — Checkbox con muelle que marca, tacha y atenúa la tarea. SquishSwitch — Interruptor que se estira según la velocidad y se aplasta al llegar. StatusMark — Icono de estado de tareas que cambia de pendiente a hecho. SwipeRow — Fila que se desliza para revelar acciones. SwipeToast — Notificación que se descarta deslizando y se consume sola. TearTicket — Entrada cuya matriz se arranca a mano con fibras de papel. ThoughtLine — Cabecera de razonamiento de IA con pasos y temporizador. VoicePill — Botón de micrófono que se convierte en ecualizador al grabar. WakeSlider — Slider de barras que deja una estela según la velocidad. WarmTooltip — Tooltips agrupados: el primero espera y los siguientes aparecen al instante. Shaders WebGL/WebGPU a pantalla completa: auroras, fluidos, partículas, luz.
AcidSquares — Pasillo cristalino de cuadrados en profundidad. AnimatedGridPattern — Rejilla con celdas que se encienden al azar. Aurora — Auroras boreales procedurales. Balatro — El shader psicodélico de Balatro, interactivo. Beams — Haces de luz arquitectónicos cruzados. ColorBends — Bandas de color vibrantes que se doblan. CRTWarp — Plasma CRT con curvatura, scanlines y bloom. DarkVeil — Velo oscuro sutil generado por una red neuronal. Dither — Ruido dithered retro reactivo al ratón. DotField — Campo de puntos que se abomba con el cursor. DotGrid — Rejilla de puntos con física de choque. EvilEye — Ojo de fuego con iris animado que te sigue. FaultyTerminal — Terminal CRT con parpadeo y ruido. Ferrofluid — Ferrofluido magnético con líneas de contorno. FlickeringGrid — Rejilla de puntos que parpadean como un panel de datos. Floating3dParticles — Campo de partículas en pseudo-3D que rota. FloatingLines — Líneas 3D flotantes que reaccionan al cursor. Galaxy — Campo estelar con parallax y repulsión. GhostFibers — Fibras recursivas azules con bandas luminosas. Globe — Globo terráqueo 3D interactivo que gira solo. GradientBlinds — Persianas de degradado con foco de luz. GradientWaves — Olas raymarched hacia un horizonte brumoso. Grainient — Degradado con grano fílmico y distorsión. GridDistortion — Imagen en malla que se deforma con el cursor. GridMotion — Rejilla de elementos en perspectiva que sigue al ratón. GridScan — Sala de rejilla 3D con efecto de escaneo. Hyperspeed — Autopista a velocidad luz; mantén pulsado para acelerar. InteractiveGridPattern — Rejilla cuyas celdas se iluminan al pasar el ratón. Iridescence — Superficie iridiscente tipo nácar. LetterGlitch — Matriz de caracteres en glitch constante. Lightfall — Estelas de luz de colores que caen por un túnel. Lightning — Rayo eléctrico procedural. LightPillar — Pilar de luz volumétrico. LightRays — Rayos de luz volumétricos. LightTunnel — Túnel de fibra óptica con pulsos de luz. LineWaves — Patrón de líneas onduladas con distorsión de color. LiquidChrome — Cromo líquido reflectante. LiquidEther — Simulación de fluidos interactiva. Meteors — Lluvia de meteoros cruzando el fondo. MoltenMetal — Metal fundido con filamentos y núcleo incandescente. NovatrixBackground — Fondo WebGL de ondas de color. Orb — Orbe de energía — el “alma” de una IA. Particles — Sistema de partículas 3D configurable. PhotonBeam — Estelas de luz que recorren el fondo. PixelBlast — Píxeles dithered con ondas líquidas al clic. PixelSnow — Nieve pixelada que cae. Plasma — Plasma orgánico en espiral. PlasmaWave — Olas de plasma con interferencia doble. Prism — Prisma de cristal con dispersión de color. PrismaticBurst — Explosión de rayos prismáticos. Radar — Barrido de radar con anillos y haz giratorio. RetroGrid — Suelo de rejilla retro en perspectiva. Ripple — Ondas concéntricas para destacar un elemento. RippleGrid — Rejilla holográfica con ondas. Scanner — Bandas de interferencia como un osciloscopio. ShapeGrid — Rejilla animada de formas con estela al hover. SideRays — Rayos de luz que entran desde un lateral. Silk — Seda líquida con pliegues suaves. SlicedWaves — Barras luminosas que ondulan como un ecualizador. SoftAurora — Aurora suave con ruido Perlin 3D. Threads — Hilos ondulantes como una tela. Topography — Mapa topográfico vivo con curvas de nivel. WarpBackground — Tarjeta con un fondo de túnel que deforma el espacio. Waves — Líneas de ruido Perlin con tensión elástica. WebThreads — Hilos luminosos que convergen en un punto. Escenas 3D en tiempo real: Spline (diseño 3D sin código) y piezas originales en Three.js.
CubeWave — Suelo de cubos que ondula y crea una onda donde pasas el ratón. FloatingShapes — Formas brillantes flotando con parallax: el hero 3D clásico, listo para usar. GlassCards — Abanico de tarjetas de cristal que se abre al pasar el ratón. GlassKnot — Nudo de cristal real que refracta las formas de color que tiene detrás. Gyroscope — Giroscopio de anillos metálicos alrededor de un núcleo de luz; acelera al hover. Helix — Doble hélice de ADN en esferas: ciencia, salud, biotech. JellyCube — Cubo de gelatina que tiembla con el cursor y salta al hacer clic. LiquidBlob — Gota líquida iridiscente que se deforma, sigue al cursor y tiembla al hacer clic. OrbitSystem — Sistema de órbitas: esferas de colores en planos inclinados. ParticleSphere — 6.000 partículas en esfera que respiran y se apartan de tu cursor. Shader propio. PillRain — Lluvia de cápsulas con física de rebote. Clic para lanzarlas. Planet — Planeta con anillos y una luna en órbita que se inclina hacia ti. PressKey — Tecla 3D que se hunde con un muelle al pulsarla y cuenta tus clics. RoddMonogram — Monograma 3D metálico que sigue al cursor. Original de RODD, hecho con Three.js. SplineCube — El “hola mundo” de Spline: un cubo que puedes girar. Ideal para aprender la integración. SplineDesign — Tipografía 3D inflada con formas flotantes. Escena de ejemplo oficial de Spline. SplinePlayground — Pega la URL de tu escena de Spline y mírala en vivo con su código listo para copiar. SynthGrid — Paisaje synthwave: montañas de malla y sol retro que avanzan hacia ti. ToggleSwitch — Interruptor 3D con muelle y squash & stretch. Haz clic. WavePlane — Tela iridiscente que ondula y forma olas donde pasas el ratón.