The ribbon,
taken apart.
A study of Stripe’s flowing band.
One folded surface. Colour, threads, light.
Light makes the fold.
Highlights gather where the surface turns. Fine grain softens the colour, giving a mathematical surface the feel of silk.
Sharp blue, zenith blue, pink, orange, chartreuse and apple green.
Try Mesh with Fold at 0.
Then bring the fold back to 100.
What’s happening underneath
Geometry. A grid is bent back over itself. Smooth noise moves the vertices, and twists give the fold its sweeping outline.
Material. A colour palette follows the surface. Stretched noise makes the fine threads; the change in the surface’s screen-space coordinates drives the highlights.
Rendering. This independent study uses WebGL directly. Stripe’s implementation uses Three.js with custom shaders, a palette image, and a separate desktop blur and grain pass.
Pause freezes time. Step advances one frame. Reduced motion starts paused. The animation also sleeps when this page is hidden or the ribbon is out of view.