Canvas Diamond with Real Dispersion and Drag to Rotate
Overview
A diamond hero section for React and Next.js, drawn in Canvas 2D with no WebGL. A hand-built 57-facet brilliant assembles from flying shards, flashes, throws rainbow beams across the page and keeps turning. Drag or use the arrow keys to spin it.
The stone is geometry written out by hand: 33 crown facets and 24 pavilion facets, each one flat, rotated in plain JavaScript. For every facet facing the camera, the light going in is followed as a beam. Flat facets keep parallel light parallel, so the part of a beam that lands on the next facet is found exactly with convex polygon clipping, up to four bounces deep. Each result is one hard-edged shard with one flat colour, read from a function that describes a dark room with narrow lights. At every exit the red, green and blue channels leave at their own angles, which is where the coloured flecks come from. The frame budget is about 1000 shards.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
No. 097 / Gallery
Hanging Cards on a Wire, Clothesline Gallery with Canvas Physics
On Load · Drag · Mouse Move · On Click
(02)FAQ
Canvas Diamond with Real Dispersion and Drag to Rotate — FAQ
01What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. There are no images, textures or model files, and no Three.js. Pass your display font as the CSS variable --gem-display.
02Why Canvas 2D and not WebGL?
So it runs the same when the browser has no GPU to use. With hardware acceleration switched off, WebGL falls back to a software renderer that manages about 6 frames a second on this effect. Here the stone is a list of up to about 1000 flat polygons a frame, which any browser can draw, and the soft light on the page is painted per pixel at a very low resolution and stretched.
03How heavy is it?
The work is about 10 to 13 ms a frame at 1280 by 800 on a 4 core laptop with acceleration off, almost all of it in the shards. It measures its frame time once the stone has settled and uses fewer shards if a machine can't keep up. Phones start with about 300 to 500, since the stone covers far fewer pixels. The loop stops when the section is off screen or the tab is hidden.
04Can I change the amount of colour?
fire scales how far the channels split. 1 is the default, a little above real diamond, and 0 gives a colourless stone. background and ink set the page and the type.
05How does it work with a keyboard or a touch screen?
The stone sits in a focusable slider, and the arrow keys spin it. On touch, a sideways drag turns it, and a vertical swipe scrolls the page as normal.
06What happens with reduced motion?
There's no entrance and no loop. The stone is one finished frame with all the text showing, and dragging or the arrow keys still turn it, one redraw at a time and without inertia.