# Sticky zoom hero

https://fieldbook.lizardi.mx/es/components/sticky-zoom-hero

Categoría: Desplazamiento
![Imagen fija del componente Sticky zoom hero de Fieldbook, de la categoría Desplazamiento.](https://fieldbook.lizardi.mx/thumbs/sticky-zoom-hero.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/sticky-zoom-hero-5b161f67c4.mp4 (5 s, silent)

Sticky zoom hero: Un panel de héroe que permanece fijado mientras te desplazas, empujando su fondo hacia ti hasta que se difumina y entrega la página al texto a continuación.

## Frameworks

react, vue, svelte, astro, html

## Controles de la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

| Nombre | Tipo | Valor inicial | Opciones o restricciones |
| --- | --- | --- | --- |
| headline | text | ABOVE THE TREELINE | Hasta 40 caracteres |
| accent | color | #FF6A1F | Los metadatos no indican otro límite. |
| maxScale | number | 2 | De 1.1 a 3.5; paso 0.1 |
| maxBlur | number | 14 | De 0 a 40; paso 1 |
| textLift | number | 80 | De 0 a 200; paso 10 |

## Notas de uso

Sticky zoom hero se presenta con el formato de vista previa «página completa» y el tema «oscuro».

### ¿Para qué frameworks está disponible Sticky zoom hero?

Sticky zoom hero está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

### ¿Qué dependencias tiene Sticky zoom hero?

Los metadatos de React indican estas dependencias npm además de React: motion.

### ¿Qué detalles de accesibilidad se observan en Sticky zoom hero?

El código React de Sticky zoom hero incluye: atributos y manejadores (aria-hidden, aria-label, tabIndex); roles explícitos (region). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

### ¿Cómo maneja Sticky zoom hero el movimiento reducido?

Sticky zoom hero consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: effectiveBlur: reduced ? 0 : Math.min(40, Math.max(0, maxBlur)); effectiveLift: reduced ? Math.min(24, Math.max(0, textLift)) : Math.min(200, Math.max(0, textLift)); effectiveScale: reduced ? Math.min(1.06, Math.max(1, maxScale)) : Math.min(3.5, Math.max(1.1, maxScale)). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

## Instalación mediante MCP

Conecta tu cliente, llama a get_component para obtener la implementación y después a get_install_command para consultar las instrucciones. Elige un framework de la lista, integra el código y verifica su funcionamiento en tu aplicación.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "sticky-zoom-hero",
    "framework": "react"
  }
}
```

[Para agentes](https://fieldbook.lizardi.mx/es/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Componentes abiertos relacionados

- [Blur fade reveal](https://fieldbook.lizardi.mx/es/components/blur-fade-reveal)
- [Parallax plate gallery](https://fieldbook.lizardi.mx/es/components/parallax-plate-gallery)
- [Curtain scroll reveal](https://fieldbook.lizardi.mx/es/components/curtain-scroll-reveal)
- [Progressive edge blur](https://fieldbook.lizardi.mx/es/components/progressive-edge-blur)
- [Scroll snap word list](https://fieldbook.lizardi.mx/es/components/scroll-snap-word-list)
- [Scroll Progress Text Reveal](https://fieldbook.lizardi.mx/es/components/scroll-progress-text-reveal)