Lab
Glass jellyfish
- Year
- 2026
- Built with
- Three.js, Custom transmission shader, Procedural geometry
- Where it lives
- On the home page
A real-time glass jellyfish you can turn, recolour and slow down, running live in the browser.
Runs live 3D in your browser. It is happiest on a laptop or a recent phone.
A little moment of wonder.
How it works
It started as a question: how far can real glass go in an ordinary web page, without a video and without a 3D model file? Every part of the jellyfish is made in code when the page loads, and the glass bends whatever sits behind it in the scene.
- The bell, the inner anatomy, the ruffled arms and the thin tentacles are all generated in code, with a swimming cycle driving them.
- The glass works in two passes. The scene behind the jellyfish is drawn to a small hidden image first, then a transmission shader bends that image through the bell and arms.
- Four palettes, separate glass and tissue colours, opacity, reflectivity, current and size, all live. Drag or use the arrow buttons to turn it, including while it is paused.
- It only loads when it is near the screen, stops drawing when it is off screen or in a background tab, caps the pixel ratio and starts paused if your device asks for reduced motion.
- Design and build
- Tea Break Studio
- Transmission shader
- Adapted from pmndrs Drei, MIT licence