Experiment 13
Portal Effects
The hero cube as a window onto a page — ten ways to cut the hole and draw its edges, steered by the cursor or a phone's tilt, the way the hero is
Published: Oct 5, 2026
Experiment 13
The hero cube as a window onto a page — ten ways to cut the hole and draw its edges, steered by the cursor or a phone's tilt, the way the hero is
Published: Oct 5, 2026
Open to new projects, ideas, and conversations
Experiment 13
The hero cube as a window onto a page — ten ways to cut the hole and draw its edges, steered by the cursor or a phone's tilt, the way the hero is
Published: Oct 5, 2026
Each variant below is rated cheap, mid or heavy by how much work the GPU does every frame. Most of that work happens in passes, each one a full drawing of the tile, and in how often each pixel has to read an image during them. The counts are for the plain cube. The hero model is made of five pieces, so it takes five draw calls wherever the cube takes one.
Eight of the variants rely on a distance field, which records how far every pixel is from the shape's outline and from its nearest crease. That is what lets an effect stay at the edges while the middle of the picture stays clean. Building it means drawing the shape off-screen, marking its edge pixels, then spreading those marks across the tile over seven to ten short passes. It gets cheaper at lower resolutions, so each variant runs it only as sharp as it needs to be.
One draw and one picture read per pixel. The rings are eight points the shader adds up for each pixel, and how near an edge a pixel is comes from the face's own geometry, so there is no distance field and no extra pass.
The distance field at CSS resolution, plus the flow: an image of the whole tile carried along the current every frame, with two lookups of the current and three reads of the last frame per pixel, up to three times on a slow frame. The flow is most of the cost.
One draw with four picture reads per pixel: three for the colour-split refraction, one from a pre-blurred copy for the reflection. Filling the gaps as an arm parts adds two small passes.
The distance field at full resolution is most of the cost. The pixel edges and smoke run on one texel per 3 × 3 block, a ninth of the pixels, so their many reads stay cheap.
Four full-size passes and no distance field: the shape drawn into two images at once, edge detection reading nine pixels per pixel, a 24-read blur at half resolution, and the composite.
One draw plus the distance field at half CSS resolution, a sixteenth of the pixels on a 2× screen, since the burnt strip is a soft band. Three evaluations of 3D noise per pixel are the main cost.
The distance field at full resolution, then one composite that reads the picture up to ten times per pixel near the edge, for the pull, the ring and the halo.
The distance field at full resolution, and light shafts that read 96 times per pixel, run at half resolution to cut that to a quarter. The shafts are the most expensive loop in the experiment.
The distance field at full resolution, and a wave simulation stepped 120 times a second: two to four passes a frame, each cell reading its four neighbours.
The distance field at full resolution, one pass that moves all 8,192 particles (cheap, they are 8,192 pixels), and one instanced draw of their 16,384 triangles, whose cost is overdraw where they pile up.