Autor: Theodore
Experimente ao vivo Sobre este projeto
Foldscape Memories (também intitulado Nature Memories · Duo dentro do repositório) é um site interativo que desdobra fotografias de viagem em memórias tridimensionais, construído com React, Three.js, GSAP e Vite. A apresentação do dispositivo nasce da réplica anterior do iPhone Duo dobrável feita pelo autor no navegador (SkentSun / iPhone Duo Depth Lab) — um mockup completo com telas interna e externa, sete poses e dois acabamentos, tudo animado — e este projeto acrescenta por cima a camada das memórias.
A página inicial abre com um dispositivo fechado e uma única fotografia. Role, e as fotos candidatas entram pela direita ao longo de um caminho cilíndrico e se dissolvem através da borda da tela externa; pressione Open memory e o dispositivo leva cinco segundos para se desdobrar e baixar a câmera enquanto o lugar da fotografia se ergue da tela. Há cinco memórias até agora: Round Island Light, um veleiro vermelho no gelo da Groenlândia, a casa costeira de Kálfeyri na Islândia, Santorini e o castelo de Osaka. Arraste para orbitar, role para ampliar, e Rewind dobra a fotografia de volta pela mesma linha do tempo. Um Wallpaper Studio separado no canto superior direito veste as telas interna e externa com uma imagem ou vídeo enviados e gera a profundidade no navegador.
As fotografias e os modelos GLB dos cinco casos acompanham o repositório, então visualizar não exige chave de API; a geração opcional de profundidade no navegador baixa um modelo de inferência sob demanda. O site está implantado na Vercel (saída de build dist/client) sob a licença MIT, com o modelo oficial da Apple e os ativos de papel de parede declarados separadamente no THIRD_PARTY.md e excluídos dessa licença.
Destaques
- A página inicial é uma galeria circular de fotos: role, arraste ou use as setas do teclado, e cada fotografia percorre um caminho cilíndrico até a borda do dispositivo e se dissolve na tela externa; rolar ao contrário refaz o mesmo caminho e pode parar em qualquer ponto.
- Open memory primeiro leva a foto selecionada até o dispositivo e espera a cena carregar, depois gasta cinco segundos desdobrando o aparelho, baixando a câmera e ajustando o zoom antes de uma órbita automática lenta de 4°/s; arraste para orbitar, role para ampliar, e Rewind percorre a linha do tempo ao contrário até a fotografia fechada.
- Cinco memórias — Round Island Light, um veleiro vermelho no gelo da Groenlândia, a casa costeira de Kálfeyri na Islândia, Santorini e o castelo de Osaka — cada uma é uma fotografia mais uma cena GLB incluída no repositório, então visualizar não exige nenhuma chave de API.
- O Wallpaper Studio (?view=wallpaper) troca os papéis de parede das telas interna e externa a partir de uma imagem ou vídeo enviados, calculando um mapa de profundidade rápido no navegador e refinando-o com um modelo pequeno para paralaxe e profundidade de campo guiadas pelo ponteiro; dois acabamentos, Star White e Night Sky; o som fica desligado por padrão e, quando ativado, é ruído de costa procedural mais um acorde ambiente original; com movimento reduzido, o movimento da cena, a órbita automática e a inércia são desativados.
Análise técnica
Ativos 3D · Cinco cenas GLB de memórias e um dispositivo dobrável reconstruído a partir do modelo da Apple
Cada uma das cinco memórias é uma fotografia mais uma cena GLB (lighthouse-memory-v2.glb tem cerca de 25 MB) guardada em public/scenes; em tempo de execução apenas a metade superior da foto é usada como capa, e o README observa que visualizar não requer chave de API da Tripo — a chave só é necessária ao produzir os ativos.
O dispositivo dobrável vem do USDZ oficial do iPhone Duo da Apple: scripts/prepare-model.mjs comanda o Playwright para carregar o USDZ na página de desenvolvimento, nomeia as metades móvel e fixa como folding-half / stationary-half, troca os materiais das telas interna e externa por superfícies brancas substituíveis e exporta um GLB binário via GLTFExporter (texturas limitadas a 512). Apenas a moldura metálica pode ser recolorida — telas, vidro, lentes e detalhes da dobradiça são intocáveis — e o THIRD_PARTY.md exclui os ativos da Apple da licença MIT do repositório.
Jornada da foto · Um único progresso do GSAP move a galeria, a foto física e a tela externa
A galeria circular é a Circular Gallery do React Bits portada de OGL para Three.js: mantém a malha subdividida em 100×50, a oscilação senoidal dos vértices baseada em velocidade e a amostragem de imagem com cantos arredondados, depois estende o arco em um caminho cilíndrico com profundidade e orientação, compartilhando uma PerspectiveCamera com o dispositivo. O GSAP Observer cuida da roda do mouse, do ponteiro e do toque mais o limiar de arrasto, enquanto uma Timeline coreografa a jornada como approach → receive-and-melt → settle; uma nova entrada interrompe a animação anterior e o arrasto pode amostrá-la ao contrário.
A fila de fotos, a malha da foto física e a imagem real da tela externa são movidas pelo mesmo progresso, com coordenadas de textura coincidentes na borda da tela: a malha externa é recortada onde entra na tela e a tela completa a imagem correspondente. As transições de capa usam o ramo Melt do Morph Slider (intensity 0.95 / scale 4.9 / aberration 0.35), com uTime guiado pelo progresso da jornada e não pelo relógio — é isso que torna possíveis o rebobinar e os quadros congelados.
Portal de tela · A visibilidade é decidida apenas pela tampa que realmente se move
A cena permanece construída sobre o plano totalmente desdobrado e nunca é reconstruída ou redimensionada por quadro; quanto se vê é decidido pelo ângulo entre a tela esquerda móvel e a direita fixa — abrir a tampa libera primeiro o espaço acima da tela direita, e a metade esquerda se revela quando a tampa passa da vertical e se aproxima da posição plana. Segure a tampa parada e a imagem se mantém; rebobinar refaz o mesmo volume. As faces de corte temporárias onde a tampa intersecta a cena são trianguladas a partir de interseções reais da malha com rejeição espacial, armazenadas em cache para planos inalterados com buffers de GPU reutilizáveis, preenchidas em gelo claro ou pedra neutra e ocultas nos extremos fechado e aberto; uma abordagem com stencil foi rejeitada porque as malhas entregues têm bordas abertas. O reflexo da água à esquerda só surge perto da posição plana para evitar uma silhueta dupla inclinada.
A passagem de otimização da inicialização de 16/09/2026 moveu esse recorte geométrico da dobradiça para um module worker: cada uma das cinco cenas levava antes 1–1,6 s de preparação síncrona, agora a thread principal gasta apenas 8–29 ms restaurando buffers transferíveis; cenas recém-montadas aplicam o estado de dobra atual antes de renderizar, as câmeras do reflexo da água veem apenas a cena natural e não o telefone e a galeria, e as predefinições e o worker de IA do Wallpaper Studio só carregam ao entrar nessa visualização.
Wallpaper Studio · Estimativa de profundidade no navegador e a óptica da dobra
Uma imagem enviada recebe primeiro um mapa de profundidade rápido e depois um modelo pequeno o refina (@huggingface/transformers rodando em depth.worker.js; o worker de IA só é criado quando você realmente pressiona gerar); primeiro plano e fundo são deslocados e desfocados pela diferença de profundidade, para que a imagem tenha espaço real conforme o ponteiro se move. Os cinco papéis de parede predefinidos trazem mapas de profundidade pré-gerados em 512×288, e a predefinição de vídeo usa o do seu quadro de pôster. As camadas das telas interna e externa são compostas em tempo de execução a partir de layouts JSON e 20 ícones SVG individuais em texturas de GPU transparentes, então trocar um ícone nunca significa redesenhar a tela inteira.
A dobra em si vive em parâmetros: coeficientes de raio de desfoque de 3,5 e 1,8 para as telas interna e externa, de modo que a externa desfoca primeiro quando a tampa fecha; a dobradiça fica totalmente dobrada em 96 %, deixando os últimos 4 % para a tela assentar em foco; o brilho escurece com a pose ao longo de uma curva senoidal, mais escuro em torno de 90°; e a paralaxe lateral projeta os vértices da tela em um “plano virtual totalmente desdobrado” antes da amostragem, então a geometria dobra enquanto o papel de parede desliza como se estivesse em um vidro plano à sua frente, sem nunca se distorcer em um trapézio.
