Autor: Theodore
Pruébalo en vivo Sobre este proyecto
Foldscape Memories (titulado también Nature Memories · Duo dentro del repositorio) es un sitio interactivo que despliega fotografías de viaje en recuerdos tridimensionales, construido con React, Three.js, GSAP y Vite. La presentación del dispositivo nace de la réplica anterior en el navegador del iPhone Duo plegable hecha por el autor (SkentSun / iPhone Duo Depth Lab) —una maqueta completa con pantalla interior y exterior, siete posturas y dos acabados, todo animado— y este proyecto añade encima la capa de los recuerdos.
La página de inicio arranca con un dispositivo cerrado y una única fotografía. Al desplazarte, las fotos candidatas entran desde la derecha por una trayectoria cilíndrica y se funden a través del borde de la pantalla exterior; pulsa Open memory y el dispositivo tarda cinco segundos en desplegarse y bajar la cámara mientras el lugar de la fotografía se alza desde la pantalla. Por ahora hay cinco recuerdos: Round Island Light, un velero rojo entre los hielos de Groenlandia, la casa costera de Kálfeyri en Islandia, Santorini y el castillo de Osaka. Arrastra para orbitar, desplázate para hacer zoom, y Rewind vuelve a plegar la fotografía por la misma línea de tiempo. Un Wallpaper Studio independiente en la esquina superior derecha viste las pantallas interior y exterior con una imagen o vídeo subidos y genera la profundidad en el navegador.
Las fotografías y los modelos GLB de los cinco casos se incluyen en el repositorio, así que verlos no requiere clave de API; la generación opcional de profundidad en el navegador descarga un modelo de inferencia bajo demanda. El sitio está desplegado en Vercel (salida de compilación dist/client) bajo licencia MIT, con el modelo oficial de Apple y los activos de fondos declarados por separado en THIRD_PARTY.md y excluidos de esa licencia.
Puntos clave
- La página de inicio es una galería circular de fotos: desplázate, arrastra o usa las flechas del teclado, y cada fotografía viaja por una trayectoria cilíndrica hasta el borde del dispositivo y se funde en la pantalla exterior; el desplazamiento inverso recorre el mismo camino hacia atrás y puede detenerse en cualquier punto.
- Open memory lleva primero la foto seleccionada al dispositivo y espera a que cargue su escena; después dedica cinco segundos a desplegarlo, bajar la cámara y ajustar el zoom antes de una órbita automática lenta de 4°/s; arrastra para orbitar, desplázate para hacer zoom y Rewind recorre la línea de tiempo hacia atrás hasta la fotografía cerrada.
- Cinco recuerdos —Round Island Light, un velero rojo entre los hielos de Groenlandia, la casa costera de Kálfeyri en Islandia, Santorini y el castillo de Osaka—, cada uno una fotografía más una escena GLB incluida en el repositorio, de modo que verlos no requiere ninguna clave de API.
- El Wallpaper Studio (?view=wallpaper) cambia los fondos de la pantalla interior y exterior a partir de una imagen o vídeo subidos, calcula un mapa de profundidad rápido en el navegador y lo refina con un modelo pequeño para lograr paralaje y profundidad de campo guiados por el puntero; dos acabados, Star White y Night Sky; el sonido está apagado por defecto y, al activarlo, es ruido de costa procedural más un acorde ambiental original; con movimiento reducido se desactivan el movimiento de la escena, la órbita automática y la inercia.
Análisis técnico
Activos 3D · Cinco escenas GLB de recuerdos y un dispositivo plegable reconstruido a partir del modelo de Apple
Cada uno de los cinco recuerdos es una fotografía más una escena GLB (lighthouse-memory-v2.glb pesa unos 25 MB) guardada en public/scenes; en tiempo de ejecución solo se usa la mitad superior de la foto como portada, y el README señala que para verlos no hace falta una clave de API de Tripo: la clave solo se necesita al producir los activos.
El dispositivo plegable procede del USDZ oficial del iPhone Duo de Apple: scripts/prepare-model.mjs dirige Playwright para cargar el USDZ en la página de desarrollo, nombra las mitades móvil y fija folding-half / stationary-half, sustituye los materiales de las pantallas interior y exterior por superficies blancas reemplazables y exporta un GLB binario mediante GLTFExporter (texturas limitadas a 512). Solo se permite recolorear el marco metálico —pantallas, cristal, lentes y detalles de la bisagra quedan fuera— y THIRD_PARTY.md excluye los activos de Apple de la licencia MIT del repositorio.
Viaje de la foto · Un solo progreso de GSAP mueve la galería, la foto física y la pantalla exterior
La galería circular es la Circular Gallery de React Bits portada de OGL a Three.js: conserva la malla subdividida de 100×50, la oscilación sinusoidal de vértices basada en la velocidad y el muestreo de imagen con esquinas redondeadas, y extiende el arco a una trayectoria cilíndrica con profundidad y orientación, compartiendo una PerspectiveCamera con el dispositivo. GSAP Observer se encarga de la rueda, el puntero y la entrada táctil más el umbral de arrastre, mientras una Timeline coreografía el viaje como approach → receive-and-melt → settle; una nueva entrada interrumpe la animación anterior y el arrastre puede muestrearla en sentido inverso.
La cola de fotos, la malla de la foto física y la imagen real de la pantalla exterior se mueven con el mismo progreso, con coordenadas de textura coincidentes en el borde de la pantalla: la malla exterior se recorta donde entra en la pantalla y la pantalla completa la imagen correspondiente. Las transiciones de portada usan la rama Melt de Morph Slider (intensity 0.95 / scale 4.9 / aberration 0.35), con uTime gobernado por el progreso del viaje y no por el reloj, que es lo que hace posibles el rebobinado y los fotogramas congelados.
Portal de pantalla · La visibilidad la decide únicamente la tapa que se mueve de verdad
La escena permanece construida sobre el plano totalmente desplegado y nunca se reconstruye ni se reescala por fotograma; cuánto se ve lo decide el ángulo entre la pantalla izquierda móvil y la derecha fija: al abrir la tapa primero se libera el espacio sobre la pantalla derecha, y la mitad izquierda se revela cuando la tapa pasa la vertical y se acerca a la posición plana. Si mantienes la tapa quieta, la imagen se mantiene; el rebobinado recorre el mismo volumen. Las caras de corte temporales donde la tapa intersecta la escena se triangulan a partir de intersecciones reales de la malla con descarte espacial, se almacenan en caché para planos sin cambios con búferes de GPU reutilizables, se rellenan en hielo pálido o piedra neutra y se ocultan en los extremos cerrado y abierto; se descartó un enfoque con stencil porque las mallas entregadas tienen bordes abiertos. El reflejo del agua de la izquierda solo aparece cerca de la posición plana para evitar una doble silueta inclinada.
La pasada de arranque del 16/09/2026 trasladó ese recorte geométrico de la bisagra a un module worker: cada una de las cinco escenas necesitaba antes 1–1,6 s de preparación síncrona, y ahora el hilo principal solo dedica 8–29 ms a restaurar búferes transferibles; las escenas recién montadas aplican el estado de plegado actual antes de renderizar, las cámaras del reflejo del agua solo ven la escena natural y no el teléfono ni la galería, y los presets y el worker de IA del Wallpaper Studio se cargan solo al entrar en esa vista.
Wallpaper Studio · Estimación de profundidad en el navegador y la óptica del plegado
Una imagen subida recibe primero un mapa de profundidad rápido y luego un modelo pequeño lo refina (@huggingface/transformers ejecutándose en depth.worker.js; el worker de IA se crea solo cuando realmente pulsas generar); el primer plano y el fondo se desplazan y desenfocan según la diferencia de profundidad para que la imagen tenga espacio real al mover el puntero. Los cinco fondos predefinidos incluyen mapas de profundidad pregenerados de 512×288, y el preset de vídeo usa el de su fotograma de portada. Las capas de la pantalla interior y exterior se componen en tiempo de ejecución a partir de diseños JSON y 20 iconos SVG individuales en texturas GPU transparentes, de modo que cambiar un icono nunca implica redibujar toda la pantalla.
El propio plegado vive en parámetros: coeficientes de radio de desenfoque de 3,5 y 1,8 para las pantallas interior y exterior, de modo que la exterior se desenfoca primero al cerrar la tapa; la bisagra queda totalmente plegada al 96 %, dejando el último 4 % para que la pantalla se asiente en foco; el brillo se atenúa con la pose siguiendo una curva sinusoidal, con el mínimo alrededor de 90°; y el paralaje lateral proyecta los vértices de la pantalla sobre un «plano virtual totalmente desplegado» antes de muestrear, así que la geometría se pliega mientras el fondo se desliza como si estuviera en un cristal plano frente a ti, sin deformarse nunca en un trapecio.
