front-activation · Senzu v2.8.0

Efectos que funcionan, con su receta.

Pruébalos aquí antes de pedírselos a tu agente. Cada efecto dice qué hacer con movimiento reducido, cuánto cuesta en móvil y dónde está la receta. La guía completa está en la documentación.

Demos

Escape solo llega a la demo cuando tiene el foco: haz clic dentro. Los botones de la propia demo («Saltar intro», «Recomponer») funcionan siempre.

Física e impacto

Intro con caída y pantalla rota

Un objeto cae, golpea la pantalla, se agrieta y el cristal se rompe en trozos que caen dejando ver la web. También como loader que se agrieta mientras carga.

Dependencias: Ninguna: HTML, CSS y JavaScript propios.
Reducir movimiento: Sin intro
Móvil: Menos trozos y objeto más pequeño
Interacción: Botón «Saltar intro» y Escape

Modointroloader

la fuerza aunque ya se viera en la sesión

Abrir a pantalla completa

Ver la receta en GitHub

Física e impacto

Objeto que cae encima de todo

Un objeto elegido cae por encima de la web, choca con los bloques reales, se apoya en el destino y se puede coger y lanzar.

Dependencias: matter-js 0.20.0 · MIT · CDN jsdelivr, al ver el destino
Reducir movimiento: Aparece ya apoyado, sin cargar el motor
Móvil: Destino propio (data-fisica-destino-movil): los bloques se apilan
Interacción: Arrastrar y lanzar el objeto

Abrir a pantalla completa

Ver la receta en GitHub

Física e impacto

La página se desmorona

Con un botón, los elementos de la página caen con gravedad y se apilan; se arrastran y se lanzan, y Escape los devuelve a su sitio.

Dependencias: matter-js 0.20.0 · MIT · CDN jsdelivr, al pulsar el botón
Reducir movimiento: Sin botón de gravedad
Móvil: Igual, con las paredes de la pantalla
Interacción: Botón «Activar gravedad», arrastrar, Escape o «Recomponer»

Abrir a pantalla completa

Ver la receta en GitHub

Física e impacto

La web se rompe como un cristal

La página se ve normal; un clic o un objeto que cae la golpea, se agrieta y se parte en trozos que son la propia web (texto real, sin capturas) y caen girando en 3D. Detrás aparece lo que elijas.

Dependencias: Ninguna: HTML, CSS y JavaScript propios.
Reducir movimiento: Fundido a lo de detrás, sin rotura
Móvil: Menos trozos y temblor más corto
Interacción: Botón «Romper la web» (rompe donde pulsas), Escape la salta, «Volver» la recompone

Abrir a pantalla completa

Ver la receta en GitHub

Catálogo

93 efectos en 13 categorías. Cada receta enlaza a su archivo en Senzu v2.8.0; tu agente la aplica con la skill indicada.

Scroll13 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Parallax multicapamulti-layer parallax	`gsap-scrolltrigger`5 Parallax por capas	Todos	Desactivar (capas estáticas)	Medio
Parallax de imagen en contenedorimage parallax in container	`gsap-scrolltrigger`Parallax de imagen en contenedor	Todos	Imagen fija	Bajo
Zoom parallax (scrub)parallax zoom	`gsap-scrolltrigger`11 Imagen con zoom	Todos	Imagen a escala 1	Medio
Sección fija con pinsticky pinned section	`gsap-scrolltrigger`3 Pin + scrub timeline	Todos	Sin pin, contenido en flujo	Medio
Stacking cardsstacked cards	`gsap-scrolltrigger`Stacking cards completo	Todos	Cards apiladas sin pin	Medio
Scroll horizontalhorizontal scroll	`gsap-scrolltrigger`4 Horizontal scroll section	Todos	Scroll vertical normal	Alto
Scroll-velocityskew on scroll	`gsap-scrolltrigger`Scroll velocity skew	Todos	Desactivar skew	Medio
Header que se ocultaheader hide-show	`gsap-scrolltrigger`8 Sticky header que se oculta al bajar	Todos	Mantener (sin animación de entrada)	Bajo
Progress de lectura (barra)reading progress bar	`gsap-scrolltrigger`6 Progress bar de lectura	Todos	Mantener (informativo)	Bajo
Progress de lectura (circular)circular progress	`gsap-scrolltrigger`11.2 Circular Progress Indicator	Todos	Mantener (informativo)	Bajo
Smooth scroll (Lenis)smooth scrolling	`gsap-scrolltrigger`7 Lenis con React)	Todos	Desactivar Lenis (scroll nativo)	Medio
Cambio de tema por secciónsection theme switch	`gsap-scrolltrigger`14 Cambio de tema/color de fondo por sección	Todos	Cambio instantáneo sin tween	Bajo
Scrollspyactive nav on scroll	`gsap-scrolltrigger`15 Navegación activa	Todos	Mantener (informativo)	Bajo

Texto6 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Reveal por líneastext reveal by lines	`gsap-scrolltrigger`10 Texto por líneas con SplitText	Todos	Texto visible sin animar	Bajo
Reveal por caracterestext stagger by chars	`gsap-scrolltrigger`5.4 Text Stagger	Todos	Texto visible sin animar	Medio
Scramblescrambled text	`gsap-scrolltrigger`7.2 Scrambled Text Effect	Todos	Mostrar texto final directo	Bajo
Typewritermáquina de escribir	`gsap-scrolltrigger`7.3 Typewriter Effect	Todos	Mostrar texto final directo	Bajo
Texto degradado con brillogradient text	`ui-ux-pro-max`7	Todos	Mantener (es estático)	Bajo
Contador numériconumber counter	`gsap-scrolltrigger`7 Contador numérico	Todos	Mostrar valor final directo	Bajo

Imagen y media8 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Image reveal cortinacurtain reveal	`gsap-scrolltrigger`8.1 Image Curtain Reveal	Todos	Imagen visible sin animar	Bajo
Image reveal clip-pathscale reveal	`gsap-scrolltrigger`8.2 Image Scale Reveal	Todos	Imagen visible sin animar	Bajo
Before/after slidercomparación de imágenes	`gsap-scrolltrigger`Before after slider	Todos	Mantener (control manual)	Bajo
Video scrubbing por frames (canvas)canvas image sequence	`gsap-scrolltrigger`13 Hero con video scrubbing por frames	Todos	Poster estático	Alto
Video scrubbing con currentTimevideo.currentTime scrub	`gsap-scrolltrigger`Video scrubbing con currentTime	Todos	Poster estático o play normal	Alto
Galería con filtros animadosFlip gallery filters	`gsap-scrolltrigger`Filtros de galería con Flip	Todos	Filtrar sin animación	Medio
Marquee infinitoinfinite marquee	`gsap-scrolltrigger`Marquee infinito	Todos / solo React	Pausar o desacelerar mucho	Medio
Galería infinitainfinite gallery	`gsap-scrolltrigger`Galería infinita	Todos	Galería estática con scroll nativo	Alto

Interacción y hover6 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Cursor personalizadocustom cursor	`gsap-scrolltrigger`Cursor personalizado	Todos	Cursor nativo (sin follower)	Bajo (desactivar en táctil)
Botón magnéticomagnetic button	`modern-web-design`1.3 Magnetic Button	Todos	Hover simple sin atracción	Bajo (desactivar en táctil)
Zoom de imagen en hoverimage zoom on hover	`modern-web-design`5.1 Image Zoom on Hover	Todos	Sin zoom	Bajo
Spotlight card (borde sigue al ratón)mouse-tracking spotlight	`ui-ux-pro-max`6 Spotlight card	Todos	Sin spotlight (borde estático)	Bajo (desactivar en táctil)
Botón shine-glowshiny button	`ui-ux-pro-max`7 Botones y texto con brillo	Todos	Hover simple sin barrido	Bajo
Tilt 3D en cards3D tilt with glare	`lightweight-3d-effects`Glare Effect	Todos	Card plana sin tilt	Bajo (desactivar en táctil)

Fondos6 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Auroramesh en CSS puro	`ui-ux-pro-max`4 Aurora	Todos	Gradiente estático (sin drift)	Bajo
Grano-noise overlayfilm grain	`ui-ux-pro-max`4	Todos	Mantener (es estático)	Bajo
Fondo animado VantaVanta.js background	`lightweight-3d-effects`	Todos	Fondo estático (gradiente CSS)	Alto
Aurora de libreríalibrary aurora background	`animated-component-libraries`Aurora	solo React	Gradiente estático	Alto
Mesh gradient en shader propiocustom mesh gradient shader	`threejs-webgl`Mesh gradient / aurora en shader propio	Todos	Gradiente estático	Alto
Partículas ligeraslightweight particles	`threejs-webgl`6.4 Partículas	Todos / solo React	Sin partículas o estáticas	Medio

Transiciones y navegación4 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Transiciones de página SPA (Vue)SPA page transitions	`gsap-scrolltrigger`5 Transiciones de página	Vue/Nuxt	Fade corto o corte directo	Bajo
Transiciones de página SPA (Next)SPA page transitions	`gsap-scrolltrigger`6 ScrollTrigger y rutas de Next	Next/React	Fade corto o corte directo	Bajo
Transiciones de página SPA (Astro)SPA page transitions	`gsap-scrolltrigger`5 Transiciones de página con GSAP	Astro	Fade corto o corte directo	Bajo
Transiciones de página MPABarba.js page transitions	`barba-js`	MPA/estático	Corte directo sin transición	Medio

3D2 efectos

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Hover distortion WebGLWebGL image distortion	`threejs-webgl`6.3 Hover distortion sobre una imagen	Todos	Imagen plana `<img>`	Alto
Displacement 2DPixiJS displacement filter	`pixijs-2d`DisplacementFilter	Todos	Imagen plana sin filtro	Alto

CSS nativo moderno6 efectos

Lo más ligero: sin JS, en el hilo de composición. Empieza aquí antes de meter una librería; siempre dentro de @supports.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Animación ligada al scrollscroll-driven animation	`front-activation`Animación ligada al scroll	Todos	Estado final estático	Bajo
Reveal al entrar en pantalla (CSS)view() reveal	`front-activation`Reveal al entrar en pantalla	Todos	Sin animación (visible)	Bajo
View Transitions entre páginascross-document view transitions	`front-activation`View Transitions entre páginas	MPA: Astro, Blade, WordPress	Sin transición	Bajo
Entradas con @starting-styleentry transitions	`front-activation`Entradas con starting-style	Todos	Aparición instantánea	Bajo
Tooltips y menús ancladosanchor positioning	`front-activation`Anchor positioning	Todos	Mantener (sin animación)	Bajo
Galería con scroll-snapscroll snap gallery	`front-activation`Scroll-snap con estado	Todos	Mantener	Bajo

Formas y SVG7 efectos

Siluetas, cortes y máscaras: lo que más aleja de la web de cajas. Una familia de formas por proyecto, fijada en el MASTER.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Blob orgánicoorganic blob	`front-activation`Blob orgánico	Todos	Forma estática	Bajo
Separadores de onda, curva o diagonalsection dividers	`front-activation`Separadores entre secciones	Todos	Mantener (estático)	Bajo
Morph de clip-pathclip-path reveal	`front-activation`Morph de clip-path	Todos	Recorte final directo	Bajo
Máscara de imagen con formashaped image mask	`front-activation`Máscaras de imagen con forma	Todos	Mantener (estático)	Bajo
Dibujado de trazoSVG line drawing	`front-activation`Dibujado de trazo	Todos	Trazo completo	Bajo
Morph entre formas o iconosshape morph	`front-activation`Morph entre formas	Todos	Cambio instantáneo	Bajo
Texto sobre una curvatext on path	`front-activation`Texto sobre una curva	Todos	Sin rotación	Bajo

Tipografía cinética9 efectos

Cuando la tipografía ES el diseño. Una pieza protagonista por página; nunca animar párrafos de lectura.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Fuente variable animadavariable font animation	`front-activation`Fuente variable animada	Todos (fuente con ejes)	Peso fijo	Bajo
Vídeo dentro del textovideo text mask	`front-activation`Vídeo dentro del texto	Todos	Poster fijo (vídeo pausado)	Medio
Texto que se resalta al leerlohighlight on scroll	`front-activation`Texto que se resalta al leerlo	Todos	Resaltado ya aplicado	Bajo
Split-flap (panel de aeropuerto)split-flap text	`front-activation`Split-flap	Todos	Palabra final directa	Bajo
Titular gigante con scrolloversized scrolling headline	`front-activation`Titular gigante con scroll	Todos	Titular estático	Medio
Texto que rodea una forma en movimiento (Pretext)text wrap around moving shape	`front-activation`Texto que rodea una forma en movimiento	Todos (navegador)	Forma quieta, una sola maquetación	Medio
Titular que se reajusta al cambiar el ancho (Pretext)reflowing headline	`front-activation`Titular que se reajusta mientras cambia el ancho	Todos (navegador)	Sin animación de ancho	Bajo
Altura exacta para listas y masonry (Pretext)exact text height	`front-activation`Altura exacta para listas y masonry	Todos (navegador)	Mantener	Bajo
Texto multilínea en canvas o WebGL (Pretext)canvas text wrapping	`front-activation`Texto en canvas o WebGL con saltos de línea	Todos (canvas, Three, Pixi)	Mantener	Medio

Microinteracciones, menús y entrada10 efectos

Respuestas de 150-300 ms que informan de algo. Si no informa, es decoración.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Estados de botón (cargando → hecho)button states	`front-activation`Estados de botón	Todos	Cambio de estado sin transición	Bajo
Toggle y checkbox animadosanimated toggle	`front-activation`Toggle y checkbox animados	Todos	Sin transición	Bajo
Skeleton con brilloshimmer skeleton	`front-activation`Skeleton con brillo	Todos	Skeleton estático	Bajo
Like con explosiónlike burst	`front-activation`Like con explosión	Todos	Cambio de icono sin partículas	Bajo
Toasts apilablesstacked toasts	`front-activation`Toasts apilables	Todos	Aparición instantánea	Bajo
Loader con marcabranded loader	`front-activation`Loader con marca	Todos	Loader estático o texto	Bajo
Menú a pantalla completafullscreen menu	`front-activation`Menú a pantalla completa	Todos	Apertura instantánea	Bajo
Hamburguesa que se transformamorphing burger	`front-activation`Hamburguesa que se transforma	Todos	Cambio de icono directo	Bajo
Preloader con porcentaje realreal-progress preloader	`front-activation`Preloader con porcentaje	Solo con assets pesados (3D, vídeo)	Barra sin animación	Bajo
Intro de marcabrand intro	`front-activation`Intro de marca	Todos	Sin intro	Medio

Física e impacto10 efectos

Objetos con gravedad, choques y cristal que se rompe. Demos que funcionan en references/recipes/demos/. Uno por página, con intención (al entrar una vez, al pulsar o al llegar), saltable, y el motor cargado solo cuando se usa.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Intro con caída y pantalla rotafalling object + shattered screen intro	`front-activation`Intro o loader	Todos	Sin intro	Medio (menos trozos)
Loader que se agrieta con la carga y se rompe al terminarcracking loader	`front-activation`Intro o loader	Solo con carga pesada real	Barra o texto de carga	Medio
La web se rompe como un cristal (trozos = la propia página)real page shatter	`front-activation`La web se rompe como un cristal	Todos	Fundido a lo de detrás	Medio (menos trozos)
Pantalla o sección que se rompescreen shatter	`front-activation`Pantalla que se rompe	Todos	Sin rotura (estado final)	Medio
Objeto que cae encima de todo y se apoyaobject drop onto page	`front-activation`Objeto que cae	Todos (3D: react-three-rapier)	Aparece ya apoyado	Medio (2D) · Alto (3D)
La página se desmoronapage gravity collapse	`front-activation`La página se desmorona	Todos	Sin botón	Medio
Arrastrar y lanzar con inerciadrag and throw	`front-activation`Arrastrar y lanzar	Todos	Arrastre sin inercia	Bajo
Confeti con físicaphysics confetti	`front-activation`Confeti	Todos	Sin confeti (`disableForReducedMotion`)	Bajo
El producto explota en partículasparticle explode	`front-activation`El producto explota + skill threejs-webgl	Todos (canvas)	Imagen fija	Alto
Tela, cuerda, gelatinaverlet cloth & rope	`front-activation`Tela, cuerda y gelatina	Todos (canvas)	Estático	Bajo

WebGL avanzado6 efectos

Coste ALTO: máximo uno por página, lazy, con fallback estático en móvil. Solo si aporta al mensaje.

Efecto	Receta	Stacks	Reducir movimiento	Coste en móvil
Fluido que sigue al ratónfluid simulation	`front-activation`Fluido que sigue al ratón	Todos (canvas)	Fondo estático	Alto
Metaballsmetaballs shader	`front-activation`Metaballs	Todos (canvas)	Imagen estática	Alto
Dithering, ASCII y píxeldither-ascii-pixel post	`front-activation`Dithering, ASCII y píxel	Todos	Imagen procesada estática	Alto
Globo 3D ligero3D globe (cobe)	`front-activation`Globo 3D	Todos	Globo sin rotación	Medio
Liquid glassrefractive glass	`front-activation`Liquid glass	Todos (refracción solo Chromium)	Cristal sin distorsión	Medio
Ruido animado en shaderanimated shader noise	`front-activation`Ruido animado en shader	Todos	Grano estático	Medio

Reglas al aplicar cualquier efecto

prefers-reduced-motion es obligatorio: implementa el fallback de la columna Reduced-motion con gsap.matchMedia() (ver gsap-scrolltrigger → references/es/performance-a11y.md §6) o media query CSS.
Anima solo transform y opacity; nada de top/left/width/height/filter en scroll (provocan layout/paint por frame).
Nada de scroll-jacking ni pin en páginas o secciones con formularios, checkout o contenido largo de lectura.
Presupuesto móvil: máximo un efecto de coste Alto por página; en móvil degrada o desactiva (ScrollTrigger.matchMedia / detección de puntero táctil) los efectos de coste Alto.
Limpieza al desmontar: gsap.context() + revert(), ScrollTrigger.kill(), lenis.destroy(), effect.destroy() (Vanta/Pixi/Three) en el unmount del componente.