Autore: Theodore
Provalo dal vivo Su questo progetto
Foldscape Memories (intitolato anche Nature Memories · Duo all’interno del repository) è un sito interattivo che dispiega fotografie di viaggio in ricordi tridimensionali, costruito con React, Three.js, GSAP e Vite. La presentazione del dispositivo nasce dalla precedente replica nel browser dell’iPhone Duo pieghevole realizzata dall’autore (SkentSun / iPhone Duo Depth Lab) — un mockup completo con schermo interno ed esterno, sette pose e due finiture, tutto animato — e questo progetto aggiunge sopra il livello dei ricordi.
La home page si apre su un dispositivo chiuso e una singola fotografia. Scorri, e le foto candidate entrano da destra lungo una traiettoria cilindrica e si fondono attraverso il bordo dello schermo esterno; premi Open memory e il dispositivo impiega cinque secondi per dispiegarsi e abbassare la camera mentre il luogo della fotografia si alza dallo schermo. Per ora ci sono cinque ricordi: Round Island Light, una barca a vela rossa tra i ghiacci della Groenlandia, la casa costiera di Kálfeyri in Islanda, Santorini e il castello di Osaka. Trascina per orbitare, scorri per ingrandire, e Rewind ripiega la fotografia lungo la stessa timeline. Un Wallpaper Studio separato in alto a destra veste gli schermi interno ed esterno con un’immagine o un video caricati e genera la profondità nel browser.
Le fotografie e i modelli GLB di tutti i cinque casi sono inclusi nel repository, quindi la visione non richiede alcuna chiave API; la generazione opzionale della profondità nel browser scarica un modello di inferenza su richiesta. Il sito è distribuito su Vercel (output di build dist/client) con licenza MIT, mentre il modello ufficiale di Apple e gli asset degli sfondi sono dichiarati separatamente in THIRD_PARTY.md ed esclusi da quella licenza.
Punti salienti
- La home page è una galleria fotografica circolare: scorri, trascina o usa i tasti freccia, e ogni fotografia percorre una traiettoria cilindrica fino al bordo del dispositivo e si fonde nello schermo esterno; lo scorrimento inverso ripercorre lo stesso cammino e può fermarsi in qualsiasi punto.
- Open memory porta prima la foto selezionata sul dispositivo e attende il caricamento della sua scena, poi impiega cinque secondi per dispiegarlo, abbassare la camera e regolare lo zoom prima di una lenta orbita automatica a 4°/s; trascina per orbitare, scorri per ingrandire, e Rewind fa scorrere la timeline all’indietro fino alla fotografia chiusa.
- Cinque ricordi — Round Island Light, una barca a vela rossa tra i ghiacci della Groenlandia, la casa costiera di Kálfeyri in Islanda, Santorini e il castello di Osaka — ognuno una fotografia più una scena GLB inclusa nel repository, così la visione non richiede alcuna chiave API.
- Il Wallpaper Studio (?view=wallpaper) sostituisce gli sfondi dello schermo interno ed esterno a partire da un’immagine o un video caricati, calcolando nel browser una mappa di profondità rapida e affinandola con un piccolo modello per parallasse e profondità di campo guidate dal puntatore; due finiture, Star White e Night Sky; l’audio è disattivato per impostazione predefinita e, una volta acceso, è rumore di costa procedurale più un accordo ambient originale; con la riduzione del movimento si disattivano il movimento della scena, l’orbita automatica e l’inerzia.
Analisi tecnica
Asset 3D · Cinque scene GLB dei ricordi e un dispositivo pieghevole ricostruito dal modello di Apple
Ognuno dei cinque ricordi è una fotografia più una scena GLB (lighthouse-memory-v2.glb pesa circa 25 MB) conservata in public/scenes; in esecuzione solo la metà superiore della foto viene usata come copertina, e il README precisa che per la visione non serve alcuna chiave API di Tripo — la chiave serve solo quando si producono gli asset.
Il dispositivo pieghevole proviene dall’USDZ ufficiale dell’iPhone Duo di Apple: scripts/prepare-model.mjs guida Playwright per caricare l’USDZ nella pagina di sviluppo, nomina le metà mobile e fissa folding-half / stationary-half, sostituisce i materiali degli schermi interno ed esterno con superfici bianche sostituibili ed esporta un GLB binario tramite GLTFExporter (texture limitate a 512). Solo la cornice metallica può essere ricolorata — schermi, vetro, lenti e dettagli della cerniera sono intoccabili — e THIRD_PARTY.md esclude gli asset Apple dalla licenza MIT del repository.
Viaggio della foto · Un unico progresso GSAP guida la galleria, la foto fisica e lo schermo esterno
La galleria circolare è la Circular Gallery di React Bits portata da OGL a Three.js: mantiene la mesh suddivisa 100×50, l’oscillazione sinusoidale dei vertici basata sulla velocità e il campionamento dell’immagine con angoli arrotondati, poi estende l’arco in una traiettoria cilindrica con profondità e orientamento, condividendo una PerspectiveCamera con il dispositivo. GSAP Observer gestisce rotella, puntatore e input touch più la soglia di trascinamento, mentre una Timeline coreografa il viaggio come approach → receive-and-melt → settle; un nuovo input interrompe l’animazione precedente e il trascinamento può campionarla al contrario.
La coda delle foto, la mesh della foto fisica e l’immagine reale dello schermo esterno sono guidate dallo stesso progresso, con coordinate di texture coincidenti sul bordo dello schermo: la mesh esterna viene ritagliata dove entra nello schermo e lo schermo completa l’immagine corrispondente. Le transizioni di copertina usano il ramo Melt di Morph Slider (intensity 0.95 / scale 4.9 / aberration 0.35), con uTime guidato dal progresso del viaggio anziché dall’orologio — è questo a rendere possibili il riavvolgimento e i fermo immagine.
Portale dello schermo · La visibilità è decisa solo dal coperchio che si muove davvero
La scena resta costruita sul piano completamente dispiegato e non viene mai ricostruita o riscalata fotogramma per fotogramma; quanto si vede dipende dall’angolo tra lo schermo sinistro mobile e quello destro fisso — l’apertura libera prima lo spazio sopra lo schermo destro, e la metà sinistra si rivela quando il coperchio supera la verticale e si avvicina alla posizione piana. Tieni fermo il coperchio e l’immagine resta ferma; il riavvolgimento ripercorre lo stesso volume. Le facce di taglio temporanee dove il coperchio interseca la scena sono triangolate da intersezioni reali della mesh con scarto spaziale, memorizzate in cache per i piani immutati con buffer GPU riutilizzabili, riempite in ghiaccio pallido o pietra neutra e nascoste agli estremi chiuso e aperto; un approccio a stencil è stato scartato perché le mesh consegnate hanno bordi aperti. Il riflesso dell’acqua a sinistra compare solo vicino alla posizione piana per evitare una doppia silhouette inclinata.
La passata di ottimizzazione dell’avvio del 16/09/2026 ha spostato quel ritaglio geometrico alla cerniera in un module worker: ognuna delle cinque scene richiedeva prima 1–1,6 s di preparazione sincrona, ora il thread principale impiega solo 8–29 ms per ripristinare buffer trasferibili; le scene appena montate applicano lo stato di piegatura corrente prima del rendering, le camere del riflesso dell’acqua vedono solo la scena naturale e non il telefono o la galleria, e i preset e il worker IA del Wallpaper Studio si caricano solo entrando in quella vista.
Wallpaper Studio · Stima della profondità nel browser e l’ottica della piegatura
Un’immagine caricata riceve prima una mappa di profondità rapida, poi un piccolo modello la affina (@huggingface/transformers in esecuzione in depth.worker.js; il worker IA viene creato solo quando si preme davvero genera); primo piano e sfondo vengono spostati e sfocati in base alla differenza di profondità, così l’immagine acquista spazio reale al muoversi del puntatore. I cinque sfondi predefiniti includono mappe di profondità pregenerate a 512×288, e il preset video usa quella del suo fotogramma poster. I livelli degli schermi interno ed esterno vengono composti in esecuzione da layout JSON e 20 icone SVG singole in texture GPU trasparenti, così cambiare un’icona non significa mai ridisegnare l’intero schermo.
La piegatura stessa vive nei parametri: coefficienti del raggio di sfocatura di 3,5 e 1,8 per gli schermi interno ed esterno, così l’esterno si sfoca per primo quando il coperchio si chiude; la cerniera è completamente piegata al 96 %, lasciando l’ultimo 4 % allo schermo per assestarsi a fuoco; la luminosità si attenua con la posa lungo una curva sinusoidale, più scura intorno ai 90°; e la parallasse laterale proietta i vertici dello schermo su un «piano virtuale completamente dispiegato» prima del campionamento, così la geometria si piega mentre lo sfondo scivola come su una lastra di vetro piana davanti a te, senza mai deformarsi in un trapezio.
