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)
- Titular fijo de dos líneas
- Imágenes que cruzan al scroll
- Letras que se abren con estela
- Fotograma fijo con movimiento reducido
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 · 616 B
- LICENCIAS-Y-AVISOS.md · 4 KB
- manifest.json · 4 KB
- package-lock.json · 37 KB
- package.json · 318 B
- prompt.md · 4 KB
- public/ · 179 KB
- README.md · 3 KB
- src/ · 10 KB
- vite.config.js · 174 B
Qué puedes personalizar
- Las dos líneas del titular (`src/main.jsx`)
- Las imágenes y su proporción (`src/items.js`)
- Recorrido horizontal y tamaño de las imágenes (propiedades `from`, `to` y CSS)
- Tipografía (`src/scroll-type.css`, `public/fonts/`)
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/ScrollType.jsx`, `src/scroll-type.css`, `src/items.js` y `public/fonts/`; instala `gsap` y monta `<ScrollType lines={[…]} items={items} />`. El recorrido de scroll crece con el número de imágenes.
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
- 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 02: proyecto React + GSAP ejecutable, estilos, assets propios, instrucciones y licencias (9 entradas). Prompt alineado con el paquete.