Selected work / Architecture in motion
ArtScienceIn Bloom.
A Three.js study of Singapore’s ArtScience Museum, with an interactive model and a 20-second unfolding film.
The idea
Architecture, imagined in motion.
A Three.js interpretation of Singapore’s ArtScience Museum, presented over reflective water. A 20-second timeline moves through emergence, unfolding and a final bloom.
Dimensions are approximate and the unfolding is fictional. The model is an artistic study, not a measured architectural or engineering reconstruction.
00 · 10 · 20 / Selected moments
Three moments from the film.
Move through the selected stills.
02 / 00 seconds
Emergence
The opening frame establishes the water, circular platform and first visible pieces.
Open full image ↗
03 / 10 seconds
Unfolding
The midpoint of the timeline reveals a different arrangement of the sculptural pieces.
Open full image ↗04 / 20 seconds
In bloom
The final frame gathers the sculptural form above its reflected image.
Open full image ↗Inside the project
One form. Two ways to explore it.
A directed film
A playhead, restart control and scrubber let visitors follow the transformation or choose a moment.
An interactive model
The original offers an Explore mode alongside the film. Open it to move beyond these selected stills.
A lightweight selection
This page keeps three images and a rebuild recipe. The full experience stays on GPT Sites.
Make something of your own
Your building.
Your transformation.
Take this structure into Codex: a recognizable building, a fictional transformation, a shared timeline, and a way to explore.
Reconstructed recipe · Not the original prompts
An end-to-end recreation has not been tested.
01BriefChoose a building and a transformation
Build an accessible Three.js architectural study of [BUILDING], with an interactive model and a 20-second unfolding film. Inspect the repository and its instructions first; preserve existing work. Ask for the audience, visual references, known dimensions, available assets and intended transformation. Treat dimensions as approximate unless supported by measured sources. Treat unfolding as a fictional animation, not an engineering claim. Begin with one recognizable static model and a readable HTML shell before adding motion. Do not invent the original ArtScience source code or claim this recipe reproduces it exactly.
02Geometry & sourcesModel the recognizable form
Use authoritative architectural references to identify the building’s silhouette and major masses. Record source URLs and distinguish sourced facts from modeling assumptions. Create procedural geometry where practical, with named groups and pivot points for the animated pieces. For an ArtScience-inspired study, explore a central body and ten sculptural fingers, varying their shapes rather than repeating one identical petal. Keep geometry, materials and animation parameters separate. Use original or licensed assets; do not assume a public screenshot grants an asset reuse license. Keep the approximate-dimensions and fictional-unfolding labels visible.
03TimelineMake one deterministic film
Implement a pure scene-update function driven by time from 0 to 20 seconds. Design three chapters: emergence, unfolding and the final bloom. Let camera position, piece transforms and lighting derive from the same time value so scrubbing and replay are consistent. Use deliberate easing and avoid abrupt camera changes. Add play/pause, restart and a keyboard-operable scrubber with visible elapsed time. Respect prefers-reduced-motion by starting on a still frame and letting the visitor choose playback. Do not autoplay sound. Test both forward playback and jumping between arbitrary timestamps.
04Interaction & lightAdd exploration over reflective water
Stage the model over reflective water with restrained cool light and a quiet horizon. Balance geometry complexity, shadows, reflection quality and pixel ratio for mobile performance. Add an Explore mode with orbit controls and a clear return to the film camera. Keep essential controls and captions in accessible HTML, with visible focus states and usable touch targets. Provide a still-image fallback for unsupported WebGL or loading errors. If adding a film download, use a real encoded artifact with verified duration and playback; never put a dead export button in the interface.
05Checks & handoffVerify and leave a rebuild kit
Run the repository’s production build and required checks. Review desktop and narrow mobile layouts, keyboard controls, reduced motion, WebGL failure, film scrubbing, replay and return from exploration. Check the public link in an unauthenticated session. If a 20-second video is supplied, verify its duration and playability rather than inferring them from the button text. Record what was actually tested. Leave a README, source and lockfile, modeling assumptions, citations and asset provenance. Select three representative stills for a lightweight portfolio showcase. Keep secrets, dependency folders and generated caches out of the kit. Ask before retiring any hosting; a showcase is not an exact source backup.