Video cube
The ice cuboids from TwelveLabs, rebuilt in three.js. Three blocks of frozen glass, each with a nature clip behind it, clear on one side and frosted on the other, with their brand gradient running through. Pick a gradient or make your own, then download it as a video. Clips from mixkit.co.
How it's built
One three.js scene, three render passes and a 1×256 color ramp. Every image here is a frame from the real renderer.
1.The shape
I fitted it to the reference rather than judging it by eye. Through an orthographic camera, a rounded box's outline is just its inner box's outline grown by the corner radius, which is quick to compute. So I searched box size, rotation and spacing until the three outlines covered the reference: 97.5% overlap.
- Box
- 1.64 × 1.17 × 1.86
- Corners
- 0.3
- Tilt
- 34°
- Turn
- 44°
2.Three passes
Each cuboid's silhouette goes into its own color channel of a quarter-resolution texture, which then gets a gaussian blur. The last pass draws every cuboid from its blurred mask: where the blur falls off becomes the rim, the edge just outside becomes the glow, and the ice and the clip fill the inside. Drawn back to front, they overlap like glass. There's no lighting and no face shading, which is why it reads as one smooth block.
3.Clips on the face
With an orthographic camera, a face lands on screen as an exact parallelogram. Inverting its two edge vectors turns any pixel into face coordinates, so each clip sits on the right face like a screen. It shows through a rounded window that frosts out at its edges and spills a little past the corner into the ice.
4.The gradient
twelvelabs.io builds its colors as a 1×256 ramp texture in WebGL. I use the same ramp and the same stops. Each cuboid samples its own stretch of it, and the last stop tints the rim. Any gradient you pick or make goes through the same ramp, so it all stays in one look.
5.Loading and export
- On the wall
- A still frame. No three.js, no video.
- In the viewer
- three.js (137 KB gzipped) loads in the background while you look at another piece. The scene starts on a still of itself and fades in once all three clips are playing.
- Clips
- Three 6 second loops, 640×360, muted, 1.3 MB together. Free stock from mixkit.co.
- Download
- Records one loop of the canvas at 2× with MediaRecorder. MP4 (H.264) where the browser supports it, WebM where it doesn't.