Aquí no hay explosiones: el scroll lleva a los visitantes por un museo oscuro construido para tu trabajo. Cada proyecto es una exposición sobre un pedestal iluminado. Completa los corchetes antes de pegar.
Estás creando MI portafolio personal como un sitio de una sola página, de nivel premiado, con efecto de «desplazamiento cinematográfico». Trabaja de forma autónoma de principio a fin: genera los recursos con el conector Higgsfield y luego construye y ejecuta el sitio con tu agente de código. Sin planes ni placeholders. Mis datos: NOMBRE: [TU NOMBRE]. TÍTULO: [p. ej., DISEÑADOR DE PRODUCTO]. PROYECTOS, de tres a cinco, cada uno con un resultado en una línea: [PROYECTO 1: RESULTADO] [PROYECTO 2: RESULTADO] [PROYECTO 3: RESULTADO]. CONTACTO: [CORREO ELECTRÓNICO].
EL CONCEPTO: mi portafolio es un museo privado de noche. Una vasta sala de exposiciones oscura, piso de piedra pulida, artefactos de vidrio brillantes sobre pedestales iluminados por reflectores, que se pierden en la oscuridad. El scroll no mueve la página, mueve al VISITANTE: la cámara se desliza hacia adelante por la sala, llega a una exposición tras otra y termina en una pared monumental grabada con mi nombre. El scroll es una caminata.
LA TÉCNICA (sigue exactamente estas instrucciones): El efecto de desplazamiento 3D NO es Three.js. Es 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 de viewport completo.
ACTIVOS (conector Higgsfield): 1. UNA imagen ancla 16:9: "Vast dark museum exhibition hall at night, polished black stone floor with soft reflections, a row of white marble plinths receding into darkness, each holding a glowing translucent glass sculpture under a single warm spotlight, cinematic, photorealistic, architectural photography, no people, 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 "el acercamiento": las altas puertas de bronce se abren ligeramente y la cámara se desliza lentamente hacia adelante por el salón oscuro; el primer pedestal iluminado emerge de la oscuridad. CLIP B "el recorrido": un dolly continuo y suave por el salón, pasando cerca de cuatro artefactos brillantes sobre pedestales, cada uno captando la luz de forma diferente, ritmo constante, sin cortes. CLIP C "la pared del nombre": la cámara sube y se inclina hacia arriba hasta una pared de piedra oscura monumental con un resplandor cálido a contraluz a lo largo de grandes letras grabadas, partículas de polvo en el haz de luz. 3. Descarga los MP4.
FRAMES: ffmpeg, 150 frames por clip, 1600px de ancho, calidad JPEG 3, nombres como frames/approach/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 suavizado lerp): 1. HERO: el acercamiento se reproduce con un barrido mientras [YOUR NAME] aparece en fade sobre las puertas, en una serif editorial de gran tamaño; antetítulo [TITLE] en mayúsculas con espaciado amplio; indicador de scroll "Enter". 2. LA CAMINATA: se reproduce con un barrido el clip B; mientras la cámara pasa junto a cada pedestal, aparece y desaparece al lado una leyenda del proyecto con una línea guía delgada de latón: nombre del proyecto, resultado en una línea, año, usando mi lista de proyectos. Sincroniza las leyendas con el paso de la cámara por los pedestales uno, dos, tres, cuatro. 3. EL MURO DEL NOMBRE: se reproduce con un barrido el clip C mientras se revela la pared grabada; superpón mi nombre en la misma serif, alineado con el grabado, y luego una línea: "Every piece, placed on purpose." 4. TRABAJOS SELECCIONADOS: una lista de índice limpia debajo del cine, una línea por proyecto, nombre más resultado más año, separadores delgados (deja espacios para las imágenes que agregaré después). 5. CONTACTO: "Visit the studio." en tamaño grande, con [EMAIL] como enlace dorado cálido. Dirección de arte: negro de museo #0B0B0C, resplandor cálido de exposición #F1E4C8, acento de latón #A98963; serif de display de gran tamaño más leyendas pequeñas en mono; silencio y espacio, sin tarjetas ni sombras. Móvil y movimiento reducido: reemplaza el barrido por los MP4 como videos de fondo en bucle. Rendimiento: requestAnimationFrame, vuelve a dibujar solo cuando cambie el índice del fotograma, 60fps.
VERIFICACIÓN: el loader se desbloquea al 100 por ciento, el recorrido se desliza de verdad por las vitrinas con subtítulos sincronizados con los pedestales, la pared de nombres se revela y no hay errores en la consola. Después, proporciona la URL activa.