- Scroll animado
- Escenas 3D
Qué hace especial
- Scroll animado
- Audio interactivo
- Carrusel
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 (6)
- Hero con fondo de puntos interactivo, titular y disco
- Manifiesto en siete piezas que se mueven con el scroll
- Escena de la estatua que sostiene el disco
- Carrusel de cinco álbumes conceptuales
- Disco final con anillo de texto animado y reproductor de audio
- Contacto con mosaicos de puntos y rejilla que suena al recorrerla
Qué puedes personalizar
- Textos, álbumes, navegación y pistas
- Paleta
- Imágenes y audio en public/media/ (registrados en media.json)
- Nombre, monograma, logotipo, favicon y correo
- Palabras del anillo de texto
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: tu herramienta de IA trabaja sobre el proyecto de sitio/ (README con instalación, ejecución y dónde personalizar). Cambia textos, álbumes, pistas, imágenes y colores sin tocar la coreografía de scroll, el reproductor ni la rejilla sonora. Incluye tres grabaciones de dominio público o CC0; si usas otra música, que tenga derechos.
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 el proyecto (Vite).
- Hosting estático (sin backend ni variables de entorno).
- Tu nombre, logotipo y correo y, si cambias la música, audio con derechos.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- React
- Vite
- TypeScript
- Tailwind CSS
- Motion
- Canvas
- Web Audio
Implementadas en el paquete que descargas.
React 19 · Vite 8 · TypeScript · Tailwind CSS 4 · framer-motion · Canvas 2D · Web Audio API
Herramientas de IA sugeridas
ClaudeCodexv0
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
- Titulares, manifiesto, navegación y títulos (sustituye a IvyPresto / PP Editorial New, no incluidas): Fraunces
- Entradilla en cursiva: Instrument Serif
- Botón, anillo de texto e indicaciones: Fragment Mono
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: Paquete v1.1.0: código y assets de la versión aprobada (classical-sounds-seven.vercel.app, commit dfcad02): React, Vite, Tailwind y framer-motion, imágenes y gráficos del sitio, tipografías OFL y tres grabaciones de dominio público o CC0. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.1.0 · Publicado 29 oct 2026
- Versiones
- v1.1.0 · 2026-11-03 — Paquete de código y assets: proyecto ejecutable (React 19 + Vite 8), imágenes y gráficos, tipografías, audio y licencias (90 archivos). Prompt alineado con el paquete.
- v1.0.0 · 2026-10-30 — Publicación: preview en video, prompt breve y paquete descargable.