Senzu trae un catálogo de efectos de front con receta por stack (Astro, Next/React, Vue/Inertia): se piden en
llano («ponle un parallax», «que caiga el logo y se rompa la pantalla») o con /efecto, y el agente abre SOLO
la receta de ese efecto. Todos tienen versión para «reducir movimiento» y su coste en móvil decidido.
Archivos HTML autocontenidos: se abren con doble clic y son la base que el agente adapta al proyecto.
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.
- Demo:
intro-rotura.html
- Receta: fisica-impacto.md §intro o loader con caída y pantalla rota
- Dependencias: ninguna
- Interacción: Botón «Saltar intro» y Escape
- Con «reducir movimiento»: Sin intro
- En móvil: Menos trozos y objeto más pequeño
- Pruébala:
?intro=1 (la fuerza aunque ya se viera en la sesión) · ?intro=1&modo=loader (modo loader: las grietas avanzan con la carga y se rompe al terminar)
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.
- Demo:
objeto-cae.html
- Receta: fisica-impacto.md §objeto que cae encima de todo
- Dependencias: matter-js 0.20.0 (MIT; CDN jsdelivr, al ver el destino)
- Interacción: Arrastrar y lanzar el objeto
- Con «reducir movimiento»: Aparece ya apoyado, sin cargar el motor
- En móvil: Destino propio (data-fisica-destino-movil): los bloques se apilan
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.
- Demo:
pagina-desmorona.html
- Receta: fisica-impacto.md §la página se desmorona
- Dependencias: matter-js 0.20.0 (MIT; CDN jsdelivr, al pulsar el botón)
- Interacción: Botón «Activar gravedad», arrastrar, Escape o «Recomponer»
- Con «reducir movimiento»: Sin botón de gravedad
- En móvil: Igual, con las paredes de la pantalla
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.
- Demo:
web-rota.html
- Receta: fisica-impacto.md §la web se rompe como un cristal
- Dependencias: ninguna
- Interacción: Botón «Romper la web» (rompe donde pulsas), Escape la salta, «Volver» la recompone
- Con «reducir movimiento»: Fundido a lo de detrás, sin rotura
- En móvil: Menos trozos y temblor más corto
- Pruébala:
?auto=1 (un objeto cae a los 0,8 s y rompe la web (modo intro))
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Parallax multicapa (multi-layer parallax) |
gsap-scrolltrigger → scrolltrigger-patterns.md §5 Parallax por capas |
Todos |
Desactivar (capas estáticas) |
Medio |
| Parallax de imagen en contenedor (image parallax in container) |
gsap-scrolltrigger → effects-pro.md §Parallax de imagen en contenedor |
Todos |
Imagen fija |
Bajo |
| Zoom parallax (scrub) (parallax zoom) |
gsap-scrolltrigger → scrolltrigger-patterns.md §11 Imagen con zoom |
Todos |
Imagen a escala 1 |
Medio |
| Sección fija con pin (sticky pinned section) |
gsap-scrolltrigger → scrolltrigger-patterns.md §3 Pin + scrub timeline |
Todos |
Sin pin, contenido en flujo |
Medio |
| Stacking cards (stacked cards) |
gsap-scrolltrigger → effects-pro.md §Stacking cards completo |
Todos |
Cards apiladas sin pin |
Medio |
| Scroll horizontal (horizontal scroll) |
gsap-scrolltrigger → scrolltrigger-patterns.md §4 Horizontal scroll section |
Todos |
Scroll vertical normal |
Alto |
| Scroll-velocity (skew on scroll) |
gsap-scrolltrigger → effects-pro.md §Scroll velocity skew |
Todos |
Desactivar skew |
Medio |
| Header que se oculta (header hide-show) |
gsap-scrolltrigger → scrolltrigger-patterns.md §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 → scrolltrigger-patterns.md §6 Progress bar de lectura |
Todos |
Mantener (informativo) |
Bajo |
| Progress de lectura (circular) (circular progress) |
gsap-scrolltrigger → common_patterns.md §11.2 Circular Progress Indicator |
Todos |
Mantener (informativo) |
Bajo |
| Smooth scroll (Lenis) (smooth scrolling) |
gsap-scrolltrigger → useLenis.ts §7 Lenis con React) |
Todos |
Desactivar Lenis (scroll nativo) |
Medio |
| Cambio de tema por sección (section theme switch) |
gsap-scrolltrigger → scrolltrigger-patterns.md §14 Cambio de tema/color de fondo por sección |
Todos |
Cambio instantáneo sin tween |
Bajo |
| Scrollspy (active nav on scroll) |
gsap-scrolltrigger → scrolltrigger-patterns.md §15 Navegación activa |
Todos |
Mantener (informativo) |
Bajo |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Reveal por líneas (text reveal by lines) |
gsap-scrolltrigger → scrolltrigger-patterns.md §10 Texto por líneas con SplitText |
Todos |
Texto visible sin animar |
Bajo |
| Reveal por caracteres (text stagger by chars) |
gsap-scrolltrigger → common_patterns.md §5.4 Text Stagger |
Todos |
Texto visible sin animar |
Medio |
| Scramble (scrambled text) |
gsap-scrolltrigger → common_patterns.md §7.2 Scrambled Text Effect |
Todos |
Mostrar texto final directo |
Bajo |
| Typewriter (máquina de escribir) |
gsap-scrolltrigger → common_patterns.md §7.3 Typewriter Effect |
Todos |
Mostrar texto final directo |
Bajo |
| Texto degradado con brillo (gradient text) |
ui-ux-pro-max → modern-look.md §7 |
Todos |
Mantener (es estático) |
Bajo |
| Contador numérico (number counter) |
gsap-scrolltrigger → scrolltrigger-patterns.md §7 Contador numérico |
Todos |
Mostrar valor final directo |
Bajo |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Image reveal cortina (curtain reveal) |
gsap-scrolltrigger → common_patterns.md §8.1 Image Curtain Reveal |
Todos |
Imagen visible sin animar |
Bajo |
| Image reveal clip-path (scale reveal) |
gsap-scrolltrigger → common_patterns.md §8.2 Image Scale Reveal |
Todos |
Imagen visible sin animar |
Bajo |
| Before/after slider (comparación de imágenes) |
gsap-scrolltrigger → effects-pro.md §Before after slider |
Todos |
Mantener (control manual) |
Bajo |
| Video scrubbing por frames (canvas) (canvas image sequence) |
gsap-scrolltrigger → scrolltrigger-patterns.md §13 Hero con video scrubbing por frames |
Todos |
Poster estático |
Alto |
| Video scrubbing con currentTime (video.currentTime scrub) |
gsap-scrolltrigger → effects-pro.md §Video scrubbing con currentTime |
Todos |
Poster estático o play normal |
Alto |
| Galería con filtros animados (Flip gallery filters) |
gsap-scrolltrigger → effects-pro.md §Filtros de galería con Flip |
Todos |
Filtrar sin animación |
Medio |
| Marquee infinito (infinite marquee) |
gsap-scrolltrigger → effects-pro.md §Marquee infinito |
Todos / solo React |
Pausar o desacelerar mucho |
Medio |
| Galería infinita (infinite gallery) |
gsap-scrolltrigger → effects-pro.md §Galería infinita |
Todos |
Galería estática con scroll nativo |
Alto |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Cursor personalizado (custom cursor) |
gsap-scrolltrigger → effects-pro.md §Cursor personalizado |
Todos |
Cursor nativo (sin follower) |
Bajo (desactivar en táctil) |
| Botón magnético (magnetic button) |
modern-web-design → interaction_patterns.md §1.3 Magnetic Button |
Todos |
Hover simple sin atracción |
Bajo (desactivar en táctil) |
| Zoom de imagen en hover (image zoom on hover) |
modern-web-design → interaction_patterns.md §5.1 Image Zoom on Hover |
Todos |
Sin zoom |
Bajo |
| Spotlight card (borde sigue al ratón) (mouse-tracking spotlight) |
ui-ux-pro-max → modern-look.md §6 Spotlight card |
Todos |
Sin spotlight (borde estático) |
Bajo (desactivar en táctil) |
| Botón shine-glow (shiny button) |
ui-ux-pro-max → modern-look.md §7 Botones y texto con brillo |
Todos |
Hover simple sin barrido |
Bajo |
| Tilt 3D en cards (3D tilt with glare) |
lightweight-3d-effects → tilt_patterns.md §Glare Effect |
Todos |
Card plana sin tilt |
Bajo (desactivar en táctil) |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Aurora (mesh en CSS puro) |
ui-ux-pro-max → modern-look.md §4 Aurora |
Todos |
Gradiente estático (sin drift) |
Bajo |
| Grano-noise overlay (film grain) |
ui-ux-pro-max → modern-look.md §4 |
Todos |
Mantener (es estático) |
Bajo |
| Fondo animado Vanta (Vanta.js background) |
lightweight-3d-effects → vantajs_effects.md |
Todos |
Fondo estático (gradiente CSS) |
Alto |
| Aurora de librería (library aurora background) |
animated-component-libraries → react_bits_components.md §Aurora |
solo React |
Gradiente estático |
Alto |
| Mesh gradient en shader propio (custom mesh gradient shader) |
threejs-webgl → shaders-basics.md §Mesh gradient / aurora en shader propio |
Todos |
Gradiente estático |
Alto |
| Partículas ligeras (lightweight particles) |
threejs-webgl → shaders-basics.md §6.4 Partículas |
Todos / solo React |
Sin partículas o estáticas |
Medio |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Transiciones de página SPA (Vue) (SPA page transitions) |
gsap-scrolltrigger → vue.md §5 Transiciones de página |
Vue/Nuxt |
Fade corto o corte directo |
Bajo |
| Transiciones de página SPA (Next) (SPA page transitions) |
gsap-scrolltrigger → next.md §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 → astro.md §5 Transiciones de página con GSAP |
Astro |
Fade corto o corte directo |
Bajo |
| Transiciones de página MPA (Barba.js page transitions) |
barba-js → transition_patterns.md |
MPA/estático |
Corte directo sin transición |
Medio |
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Hover distortion WebGL (WebGL image distortion) |
threejs-webgl → shaders-basics.md §6.3 Hover distortion sobre una imagen |
Todos |
Imagen plana <img> |
Alto |
| Displacement 2D (PixiJS displacement filter) |
pixijs-2d → filters_effects.md §DisplacementFilter |
Todos |
Imagen plana sin filtro |
Alto |
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 |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Animación ligada al scroll (scroll-driven animation) |
front-activation → css-moderno.md §Animación ligada al scroll |
Todos |
Estado final estático |
Bajo |
| Reveal al entrar en pantalla (CSS) (view() reveal) |
front-activation → css-moderno.md §Reveal al entrar en pantalla |
Todos |
Sin animación (visible) |
Bajo |
| View Transitions entre páginas (cross-document view transitions) |
front-activation → css-moderno.md §View Transitions entre páginas |
MPA: Astro, Blade, WordPress |
Sin transición |
Bajo |
| Entradas con @starting-style (entry transitions) |
front-activation → css-moderno.md §Entradas con starting-style |
Todos |
Aparición instantánea |
Bajo |
| Tooltips y menús anclados (anchor positioning) |
front-activation → css-moderno.md §Anchor positioning |
Todos |
Mantener (sin animación) |
Bajo |
| Galería con scroll-snap (scroll snap gallery) |
front-activation → css-moderno.md §Scroll-snap con estado |
Todos |
Mantener |
Bajo |
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 |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Blob orgánico (organic blob) |
front-activation → formas-svg.md §Blob orgánico |
Todos |
Forma estática |
Bajo |
| Separadores de onda, curva o diagonal (section dividers) |
front-activation → formas-svg.md §Separadores entre secciones |
Todos |
Mantener (estático) |
Bajo |
| Morph de clip-path (clip-path reveal) |
front-activation → formas-svg.md §Morph de clip-path |
Todos |
Recorte final directo |
Bajo |
| Máscara de imagen con forma (shaped image mask) |
front-activation → formas-svg.md §Máscaras de imagen con forma |
Todos |
Mantener (estático) |
Bajo |
| Dibujado de trazo (SVG line drawing) |
front-activation → formas-svg.md §Dibujado de trazo |
Todos |
Trazo completo |
Bajo |
| Morph entre formas o iconos (shape morph) |
front-activation → formas-svg.md §Morph entre formas |
Todos |
Cambio instantáneo |
Bajo |
| Texto sobre una curva (text on path) |
front-activation → formas-svg.md §Texto sobre una curva |
Todos |
Sin rotación |
Bajo |
Cuando la tipografía ES el diseño. Una pieza protagonista por página; nunca animar párrafos de lectura.
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Fuente variable animada (variable font animation) |
front-activation → tipografia-cinetica.md §Fuente variable animada |
Todos (fuente con ejes) |
Peso fijo |
Bajo |
| Vídeo dentro del texto (video text mask) |
front-activation → tipografia-cinetica.md §Vídeo dentro del texto |
Todos |
Poster fijo (vídeo pausado) |
Medio |
| Texto que se resalta al leerlo (highlight on scroll) |
front-activation → tipografia-cinetica.md §Texto que se resalta al leerlo |
Todos |
Resaltado ya aplicado |
Bajo |
| Split-flap (panel de aeropuerto) (split-flap text) |
front-activation → tipografia-cinetica.md §Split-flap |
Todos |
Palabra final directa |
Bajo |
| Titular gigante con scroll (oversized scrolling headline) |
front-activation → tipografia-cinetica.md §Titular gigante con scroll |
Todos |
Titular estático |
Medio |
| Texto que rodea una forma en movimiento (Pretext) (text wrap around moving shape) |
front-activation → tipografia-cinetica.md §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 → tipografia-cinetica.md §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 → tipografia-cinetica.md §Altura exacta para listas y masonry |
Todos (navegador) |
Mantener |
Bajo |
| Texto multilínea en canvas o WebGL (Pretext) (canvas text wrapping) |
front-activation → tipografia-cinetica.md §Texto en canvas o WebGL con saltos de línea |
Todos (canvas, Three, Pixi) |
Mantener |
Medio |
Respuestas de 150-300 ms que informan de algo. Si no informa, es decoración.
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Estados de botón (cargando → hecho) (button states) |
front-activation → microinteracciones.md §Estados de botón |
Todos |
Cambio de estado sin transición |
Bajo |
| Toggle y checkbox animados (animated toggle) |
front-activation → microinteracciones.md §Toggle y checkbox animados |
Todos |
Sin transición |
Bajo |
| Skeleton con brillo (shimmer skeleton) |
front-activation → microinteracciones.md §Skeleton con brillo |
Todos |
Skeleton estático |
Bajo |
| Like con explosión (like burst) |
front-activation → microinteracciones.md §Like con explosión |
Todos |
Cambio de icono sin partículas |
Bajo |
| Toasts apilables (stacked toasts) |
front-activation → microinteracciones.md §Toasts apilables |
Todos |
Aparición instantánea |
Bajo |
| Loader con marca (branded loader) |
front-activation → microinteracciones.md §Loader con marca |
Todos |
Loader estático o texto |
Bajo |
| Menú a pantalla completa (fullscreen menu) |
front-activation → microinteracciones.md §Menú a pantalla completa |
Todos |
Apertura instantánea |
Bajo |
| Hamburguesa que se transforma (morphing burger) |
front-activation → microinteracciones.md §Hamburguesa que se transforma |
Todos |
Cambio de icono directo |
Bajo |
| Preloader con porcentaje real (real-progress preloader) |
front-activation → microinteracciones.md §Preloader con porcentaje |
Solo con assets pesados (3D, vídeo) |
Barra sin animación |
Bajo |
| Intro de marca (brand intro) |
front-activation → microinteracciones.md §Intro de marca |
Todos |
Sin intro |
Medio |
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 |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Intro con caída y pantalla rota (falling object + shattered screen intro) |
front-activation → fisica-impacto.md §Intro o loader |
Todos |
Sin intro |
Medio (menos trozos) |
| Loader que se agrieta con la carga y se rompe al terminar (cracking loader) |
front-activation → fisica-impacto.md §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 → fisica-impacto.md §La web se rompe como un cristal |
Todos |
Fundido a lo de detrás |
Medio (menos trozos) |
| Pantalla o sección que se rompe (screen shatter) |
front-activation → fisica-impacto.md §Pantalla que se rompe |
Todos |
Sin rotura (estado final) |
Medio |
| Objeto que cae encima de todo y se apoya (object drop onto page) |
front-activation → fisica-impacto.md §Objeto que cae |
Todos (3D: react-three-rapier) |
Aparece ya apoyado |
Medio (2D) · Alto (3D) |
| La página se desmorona (page gravity collapse) |
front-activation → fisica-impacto.md §La página se desmorona |
Todos |
Sin botón |
Medio |
| Arrastrar y lanzar con inercia (drag and throw) |
front-activation → fisica-impacto.md §Arrastrar y lanzar |
Todos |
Arrastre sin inercia |
Bajo |
| Confeti con física (physics confetti) |
front-activation → fisica-impacto.md §Confeti |
Todos |
Sin confeti (disableForReducedMotion) |
Bajo |
| El producto explota en partículas (particle explode) |
front-activation → fisica-impacto.md §El producto explota + skill threejs-webgl |
Todos (canvas) |
Imagen fija |
Alto |
| Tela, cuerda, gelatina (verlet cloth & rope) |
front-activation → fisica-impacto.md §Tela, cuerda y gelatina |
Todos (canvas) |
Estático |
Bajo |
Coste ALTO: máximo uno por página, lazy, con fallback estático en móvil. Solo si aporta al mensaje.
| Efecto |
Skill y receta |
Stacks |
Con «reducir movimiento» |
Coste en móvil |
| Fluido que sigue al ratón (fluid simulation) |
front-activation → webgl-avanzado.md §Fluido que sigue al ratón |
Todos (canvas) |
Fondo estático |
Alto |
| Metaballs (metaballs shader) |
front-activation → webgl-avanzado.md §Metaballs |
Todos (canvas) |
Imagen estática |
Alto |
| Dithering, ASCII y píxel (dither-ascii-pixel post) |
front-activation → webgl-avanzado.md §Dithering, ASCII y píxel |
Todos |
Imagen procesada estática |
Alto |
| Globo 3D ligero (3D globe (cobe)) |
front-activation → webgl-avanzado.md §Globo 3D |
Todos |
Globo sin rotación |
Medio |
| Liquid glass (refractive glass) |
front-activation → webgl-avanzado.md §Liquid glass |
Todos (refracción solo Chromium) |
Cristal sin distorsión |
Medio |
| Ruido animado en shader (animated shader noise) |
front-activation → webgl-avanzado.md §Ruido animado en shader |
Todos |
Grano estático |
Medio |
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.
