PliegueEstudio creativo
- Scroll animado
- Escenas 3D
Qué hace especial
- Hero con video
- Fichas modales
- Intro en vídeo a 2× con fundido a negro, SKIP y fallback al póster
- Esfera con distribución Fibonacci y perspectiva 1150 px
- Arrastre con ratón o dedo e inercia (factor 0.94)
- Transición de esfera a cuadrícula
- Apertura y cierre del visor; Escape cierra
- prefers-reduced-motion respetado
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)
- Intro cinematográfica ojo → bosque con SKIP
- Esfera de 21 fotografías con arrastre e inercia
- Wordmark, titular «I See Through the Wild» y tarjeta del fotógrafo
- Menú: The Archive, Field Notes, Studio y Contact
- The Archive: cuadrícula de fotografías
- Visor a pantalla completa con título, lugar y nota
Qué puedes personalizar
- Marca, titular, bio, ciudades y correo (config/site.js)
- Opciones del menú
- Las 21 fotografías: título, lugar, nota y archivos
- Vídeo de la intro, póster y avatar
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 sitio/ (index.html, config/site.js y media/). Sírvelo con cualquier servidor estático, por ejemplo `python3 -m http.server`. Cambia marca, textos y fotografías desde config/site.js sin tocar el motor de la esfera.
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
- Cualquier servidor estático; no necesita Node, npm ni build.
- Las tipografías se cargan desde Google Fonts.
- Demo de portafolio: Field Notes, Studio y Contact no incluyen páginas o servicios conectados.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- HTML, CSS y JavaScript
Implementadas en el paquete que descargas.
HTML, CSS y JavaScript sin dependencias · Vídeo H.264 con póster WebP · Imágenes WebP responsive (520/640/760 + visor)
Herramientas de IA sugeridas
ClaudeCodexCursor
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
#000000#f4f2ef#8c8783
- Playfair Display (titulares)
- Inter (interfaz)
Composición: Escritorio 1440 · tableta 768 · móvil 390; tarjetas 520/640/760 px y visor hasta 1600 px
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: los 89 archivos que sirve la demo de Arrmma (código de esfera, intro y carga de imágenes del original aprobado) (index.html, config/site.js, 84 tarjetas e imágenes de visor, avatar, vídeo de la intro y póster); Playfair Display e Inter (OFL) desde Google Fonts. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.1.1 · Publicado 4 nov 2026
- Versiones
- v1.1.1 · 2026-11-05 — Compatibilidad de capas 3D en Safari. Conserva fotografías, geometría, cámara e inercia.
- v1.1.0 · 2026-11-05 — Restaura el comportamiento de la esfera y la intro del original aprobado (ethan-vale.vercel.app) con los assets nuevos: tarjetas reducidas por canvas según el ancho como el original (en lugar de srcset), esperas de la intro 1300 ms y sin corte forzado del vídeo a los 4 s.
- v1.0.0 · 2026-11-05 — Primera versión: sitio estático aprobado con 21 fotografías, avatar, vídeo de la intro, prompt, README y licencias.