Case · Web
PLAY MATTER: A 3D metal sculpture that can be scattered and reassembled
An AI-assisted interactive web page built with Three.js. Drag and rotate colorful metal sheets, long-press to scatter them, and release to reassemble. You can also switch between knots, blooms, or generate text by typing short words.
Open the pageOpens boloop-playmatter.pages.dev in a new tab. It is a separate site, not part of this one.
Image credit: Tink
Try it out!
- Drag the sculpture to rotate the view. Long-press the stage or "Hold to scatter" to disperse the sheets, and release to bring them back together.
- Click on Knot, Bloom, or Your word to switch between knot, radial bloom, and text forms.
- Type 1–5 English letters or numbers, click the arrow, and let the same set of sheets form your short word.
- Once the stage is focused, use the spacebar to scatter, arrow keys to rotate, and "Pause motion" to stop automatic movement.
- Record sculpture can capture up to 8 seconds of silent canvas video, excluding page text and controls. Recording availability depends on your browser.
This is an AI-assisted interactive visual experiment using Three.js with procedurally generated geometry, materials, and lighting. Three.js and its official addons are licensed under MIT. The image is an actual screenshot of the webpage.
The page requires browser support for WebGL. Desktop and narrow-screen previews have been tested, but performance on actual devices and low-end GPUs remains unmeasured.