Crystal cluster

In the middle of a dark warm room, a small cluster of teal crystals hangs in the air, one tall one and two smaller ones leaning off it, every facet flat-shaded so each catches the key light differently. A thin light-gold line traces the whole silhouette at the same width from every angle. Behind it a gold beam rises to the top of the card, five soft columns of light that sway, flicker and carry two bright bands drifting upward, with a pool of glow at the base. The cluster bobs a little, leans toward the pointer, and the beam brightens while the pointer is over the card.

The outline is a hull, not a post effect. Each crystal gets a child mesh with the same geometry, drawn back faces only and before the crystal, whose vertices are pushed out along their normals in clip space by a fixed number of pixels over the drawing-buffer size. Because the offset is in screen space, the line stays 4 pixels wide whatever the angle or distance, and only the part outside the silhouette shows.

The beam is one tall additive plane behind the cluster with all the work in its fragment shader. Its brightness is a sum of five gaussians across x with weights 0.3, 0.75, 1, 0.3 and 0.3, widening with height, inside an envelope that rises fast from the base and fades out above the middle. Value noise scrolling upward and a slow pulse make it flicker, and two sine bands looping up it read as energy rising. Depth testing lets the crystals hide the beam where they overlap it. A canvas radial gradient on an additive plane is the soft glow behind them.

• Build the cluster from flat-shaded octahedrons, and give each a back-face hull child whose vertices are offset in clip space by OUTLINE_PX over the drawing-buffer size, drawn first.
• Draw the beam on a tall additive plane behind the cluster, with five widening gaussian columns, a vertical envelope, upward-scrolling noise, a slow pulse, two rising bands and a base pool, with depth testing on.
• Put a canvas radial-gradient texture on a wide additive plane just behind the cluster for the glow.
• Each frame, ease the cluster toward its rest pose plus a lean toward the pointer, bob it on a sine, and brighten the beam with the pointer's nearness to the centre.
• Update the outline's size uniform on resize, so its width stays constant.
• Stop on webglcontextlost; on destroy dispose every geometry, material and texture, then renderer.dispose() and renderer.forceContextLoss().
• Under reduced motion, draw the rest pose once.

• CRYSTAL_COLOR (#2fb6a8): The crystals' colour.
• OUTLINE_COLOR, OUTLINE_PX (#ffef7a, 4): The outline's colour and width in pixels.
• BEAM_CORE, BEAM_GOLD (#ffe63a, #ffd21e): The beam's core and edge colours.
• PULL (0.4): The most the cluster leans toward the pointer, in radians.
• BACKDROP (a dark warm radial gradient): The room behind the canvas.