Tiempo congelado como en un sitio web: una ola de whisky queda suspendida en medio de la colisión, y el desplazamiento te hace orbitar alrededor del momento. El tiempo solo avanza cuando la página lo indica.
Estás creando un sitio de una sola página, de nivel premiado, con «cinematografía al desplazarse». Trabaja de forma autónoma de principio a fin: genera los recursos con el conector Higgsfield y luego construye y ejecuta el sitio con el asistente de código. Sin planes ni placeholders.
EL PRODUCTO (destilería ficticia): STILL No. 8, un single malt de dieciocho años. Eslogan: "Time, held." El concepto es TIEMPO CONGELADO: una ola de whisky ámbar queda capturada en plena colisión alrededor de la botella en posición vertical, con cientos de gotas suspendidas en el aire. El scroll no mueve el tiempo, mueve la CÁMARA, que orbita el instante congelado. En un capítulo, el tiempo se libera brevemente, la ola choca durante medio segundo en cámara superlenta y luego vuelve a congelarse.
LA TÉCNICA (sigue exactamente): El efecto de desplazamiento 3D NO es Three.js. Es un barrido de una secuencia de imágenes en canvas: clips de video divididos en cuadros, donde la posición del desplazamiento determina qué cuadro se dibuja en un canvas que ocupa todo el viewport.
RECURSOS (conector Higgsfield): 1. UNA imagen ancla 16:9: "A whisky bottle standing in a pure black void, a dramatic wave of amber whisky frozen mid-crash wrapping around it, hundreds of droplets suspended motionless in the air, one shaft of warm light from above, ultra sharp, photorealistic advertising photography, no text, no watermark." Mejor modelo de imagen del catálogo. 2. Con la imagen ancla como referencia en cada clip, tres clips de imagen a video de 10 segundos, 1080p, 16:9: CLIP A "the orbit": the liquid stays perfectly frozen while the camera orbits 360 degrees around the bottle and the suspended wave, light glinting through the amber, nothing moves except the viewpoint. CLIP B "the release": time unfreezes, the wave continues its crash in extreme slow motion for a breath, droplets colliding and blooming, then freezes again in a new sculptural shape. CLIP C "the macro": the camera drifts through the droplet field close up, each droplet acting as a tiny lens refracting the bottle, one droplet trembling on the edge of falling. 3. Descarga los MP4.
FRAMES: ffmpeg, 150 frames por clip, 1600px de ancho, calidad JPEG 3, nombres como frames/orbit/frame_0001.jpg. Confirma que los archivos existan primero.
EL SITIO (HTML/CSS/JS puro, Lenis vía CDN, precargador con porcentaje, capítulos fijos de 100vh con barrido y suavizado lerp): 1. HERO: la órbita se reproduce con un barrido mientras "STILL" se define en una serif enorme; antetítulo "No. 8. TIME, HELD." Leyenda pequeña: "Scroll moves you. Not time." 2. THE RELEASE: se reproduce con un barrido el clip B; mientras se libera el tiempo, aparecen textos destacados con líneas guía ámbar delgadas: CASK No. 8, first fill sherry. 18 YEARS asleep. 46 PERCENT, non-chill filtered. 3. THE MACRO: el clip C se reproduce con un barrido a través del campo de gotas. 4. THE CREED: tres líneas cortas sobre la paciencia, una por paso de scroll. 5. TASTING: cuadrícula minimalista de dos columnas, nariz, paladar, final, separadores delgados. 6. CTA: "Request an allocation", campo de correo electrónico, letra pequeña. Dirección de arte: negro vacío #070605, texto color hueso #EDE7DA, acento ámbar #C87A1E que brilla solo dentro del líquido; serif enorme más mayúsculas con espaciado amplio; vasto espacio negativo. Móvil y movimiento reducido: alternativa con MP4 en bucle. Rendimiento: requestAnimationFrame, vuelve a dibujar solo cuando cambie el fotograma, 60fps.
VERIFICA: el cargador se desbloquea al 100 por ciento, la órbita de la escena principal mueve claramente la cámara alrededor de un splash congelado, el capítulo de lanzamiento se reproduce y vuelve a congelarse, la toma macro se desplaza entre las gotas y no hay errores en la consola. Después, proporciona la URL activa.