La del video. Ejecútala primero, exactamente como está escrita, para ver el efecto completo antes de personalizar cualquier cosa.
Estás creando un sitio web de una sola página, cinematográfico al hacer scroll y digno de un premio, que se evaluará frente a trabajos de nivel Awwwards. Trabaja de forma autónoma de principio a fin: genera los recursos con el conector de Higgsfield y luego crea y ejecuta el sitio con tu agente de código. No te detengas en un plan. No uses recursos de marcador de posición.
THE PRODUCT (fictional luxury brand): OBSCURA MK I, a mythic mechanical camera. Matte black brass body, engraved dials, glass lens elements. Tagline: "Light, remembered." The site has one hero moment: as the visitor scrolls, the camera EXPLODES into roughly forty floating components (lens elements as glass discs, fanned iris blades, prism, shutter curtain, gears, screws), a prism splits white light into a spectral rainbow flare across the void, then scrolling onward REASSEMBLES it back into a whole camera.
THE TECHNIQUE (this is the secret, follow it exactly): The viral "3D scroll" effect is NOT Three.js and NOT WebGL. It is a canvas image-sequence scrub: short cinematic video clips are split into frames, and scroll position drives which frame is painted onto a full-viewport canvas. Smooth, deterministic, works everywhere.
RECURSOS (conector Higgsfield): 1. Genera UNA imagen ancla 16:9: "Ultra premium product photograph of a mythic mechanical camera, matte black metal with brass engraved dials and glass lens, floating centered in a pure black void, single dramatic top light, subtle gold rim light, photorealistic, luxury watch advertisement lighting, no text, no watermark." Usa el mejor modelo de imagen actual del catálogo. 2. Usando esta imagen ancla como referencia en CADA clip (esto fija la identidad del producto), genera tres clips de imagen a video de 10 segundos, 1080p, 16:9, con el mejor modelo actual de imagen a video: CLIP A "orbit": the camera floats in the black void and slowly rotates 360 degrees, gentle drift, nothing else moves. CLIP B "explode": the camera smoothly disassembles outward into its individual components which hang suspended in space, glass lens elements, fanned aperture blades, gears, dials, screws, a glass prism near the center splitting a beam of white light into a rainbow spectrum flare, slow, elegant, constant speed, ends fully exploded and holding. CLIP C "macro": slow macro glide across the engraved brass dial, over the glass lens with faint spectral refractions, ending on the OBSCURA engraving. No hace falta un clip extra para el reensamblaje: desplazarse por el CLIP B hacia atrás ES el reensamblaje. 3. Descarga los tres MP4 al proyecto.
FRAMES: Usa ffmpeg para extraer cada clip en una secuencia JPEG: 150 frames por clip, 1600px de ancho, calidad 3, con nombres como frames/orbit/frame_0001.jpg, etc. Confirma que los archivos existan antes de escribir el código del sitio.
EL SITIO (HTML/CSS/JS puro, sin frameworks): index.html, styles.css, app.js. Cargador: pantalla negra, barra de progreso fina dorada y porcentaje que precarga CADA fotograma antes de desbloquear el scroll. Scroll suave: Lenis vía CDN. Cada capítulo de arrastre es una sección fija de 100vh cuyo progreso del scroll se asigna a su secuencia de fotogramas con suavizado lerp, drawImage con cálculo de ajuste cover. Estructura: 1. HERO: el orbit se reproduce con arrastre mientras "OBSCURA" aparece en fade en una gran serif editorial, con las letras espaciadas; antetítulo "THE MK I. LIGHT, REMEMBERED." en mayúsculas pequeñas con espaciado. 2. MANIFIESTO: texto poético breve, una línea revelada por paso de scroll. 3. LA EXPLOSIÓN: el clip B se reproduce hacia adelante con arrastre; cuatro etiquetas pequeñas aparecen en fade cerca de los componentes, con líneas guía doradas delgadas (ELEMENT I: 9 lentes de vidrio. IRIS: 12 láminas. PRISM: espectro completo. 214 piezas en total.) 4. REENSAMBLAJE: el clip B se reproduce hacia atrás con arrastre y termina con la línea "Every part, remembered." 5. MACRO: el clip C se reproduce con arrastre a través de los detalles. 6. ESPECIFICACIONES: cuadrícula minimalista de dos columnas con separadores delgados, especificaciones ficticias. 7. CTA: "Request the MK I", campo de correo electrónico, letra pequeña. Dirección de arte: fondo #050505, texto color hueso #EDEAE4, acento de latón #B08D57, arcoíris espectral SOLO donde aparece la luz del prisma; serif display enorme (Cormorant Garamond) combinada con una grotesca espaciada; enorme espacio negativo; sin cajas, tarjetas ni sombras proyectadas. Móvil y movimiento reducido: por debajo de 768px o con prefers-reduced-motion, reemplaza el arrastre en canvas por los MP4 como videos de fondo en bucle. Rendimiento: requestAnimationFrame, vuelve a dibujar solo cuando cambie el índice del fotograma, objetivo de 60fps.
VERIFICAR: abre el sitio publicado y confirma que el cargador llega al 100 por ciento y se desbloquea, que los tres capítulos de arrastre realmente se pueden arrastrar, que la reconstrucción en reversa funciona, que aparecen las etiquetas y que no hay errores en la consola. Corrige lo que esté fallando y luego dame la URL activa y un resumen de los recursos generados y los créditos gastados.