Componente

Una columna de fotos cuyos marcos se abren al entrar en pantalla y se cierran al salir, con parallax dentro de cada máscara; el texto de cada sección queda fijo en el centro y se sustituye limpiamente. Para portadas por capítulos.

Tipo de recurso: Componente. No es un sitio completo.

Interacción: Scroll

Hazlo tuyo

US$6Pago único · Sin suscripción

Personaliza este diseño para tu negocio o tu próximo cliente.

Comprar ahora

Más diseños. Más posibilidades.

Crea para ti y tus clientes con acceso al catálogo Pro.

Desde US$19/mes

Ver plan Pro

¿Ya tienes acceso? Inicia sesión

El video es una vista previa. La demo interactiva se incluye con la compra o con Pro.

Qué hace especial

Scroll

Qué incluye

Prompt para recrear y personalizar el diseño con IA.
Código y archivos del sitio: imágenes, fuentes y licencias.
Demo interactiva e instrucciones.
Uso en sitios propios y proyectos finales de clientes.

Secciones y pantallas de la demo (4)

Portada con indicación de scroll
Secciones con marco recortado y parallax
Textos fijos que se sustituyen
Números de sección

Contenido del paquete (10)

Proyecto listo para ejecutar (React + Vite): componente, estilos, instrucciones y avisos de licencias. Si el efecto usa imágenes o tipografías propias, van incluidas y se listan en sus avisos. Sin node_modules.

index.html · 540 B
LICENCIAS-Y-AVISOS.md · 4 KB
manifest.json · 3 KB
package-lock.json · 37 KB
package.json · 331 B
prompt.md · 4 KB
public/ · 232 KB
README.md · 3 KB
src/ · 70 KB
vite.config.js · 208 B

Qué puedes personalizar

Títulos, textos y fotos de cada sección (`src/content.js`, `public/assets/`)
Parallax (propiedad `parallax`) y tamaño del marco (`src/clipped-sections.css`)
Color de los números de sección

Cómo empezar

Copia el prompt y descarga los archivos.
Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
Revisa el resultado y publícalo en tu dominio.

Descarga el paquete y copia el prompt: indica la carpeta raíz, todos los archivos que hay que copiar (incluidos el contenido de ejemplo y `public/assets/`), la instalación con `npm ci` y el mismo montaje de la demo. Resumen: Copia `src/ClippedSections.jsx`, `src/clipped-sections.css` y `src/fonts/`; instala `gsap` y monta `<ClippedSections sections={[…]} />`.

El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.

Detalles técnicos y requisitos

Requisitos

Node.js 20.19+ o 22.12+ y npm para ejecutar la demo y compilar (Vite).
Un proyecto React 19 (o uno nuevo con Vite) donde montar el componente; GSAP se instala desde npm.
Tus propias imágenes y textos para sustituir el contenido de ejemplo.
No incluido: herramienta de IA (y sus créditos), dominio y hosting.

Tecnologías

React
Vite
GSAP

Implementadas en el paquete que descargas.

React 19 · GSAP 3 · Vite

Herramientas de IA sugeridas

ClaudeCodexv0Cursor

Compatibles con las instrucciones del diseño; no es una prueba registrada.

Compatibilidad probada: Sin prueba registrada todavía.

Paleta y tipografía

#000000#FFFFFF#F3F0E8#E3EEE8#29634A#202321

Inter Tight 500 (OFL, incluida)

Composición: Escena a pantalla completa (100svh); medido a 1434 px y 390 px de ancho

Licencia y versiones

Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia

Procedencia: Código escrito para Arrmma (React + GSAP). Imágenes generadas con IA para Arrmma; tipografía Inter Tight (OFL) cuando se incluye.

Versión: v1.0.1 · Publicado 1 nov 2026
Versiones: v1.0.1 · 2026-11-03 — Componente: paquete 1.0.1 con package-lock.json, prompt e instrucciones de integración corregidos (10 entradas).
v1.0.0 · 2026-11-02 — Componente 05: proyecto React + GSAP ejecutable, estilos, assets propios, instrucciones y licencias (9 entradas). Prompt alineado con el paquete.