3D Gold Ring Hero with Scroll Rotation on Canvas, No WebGL
Overview
A sticky hero section for React and Next.js with a gold ring modelled in code and rendered in real 3D by a small software renderer on a 2D canvas. It rushes in from the lens on load, its stones throw star glints, it keeps turning on its own, and scrolling turns it while the camera pushes in on the stones.
There are no model files and no WebGL. The band is a lathe with a comfort-fit section, and the stones are hand-built faceted geometry along the top half, with collars, claws and a line of millgrain beside them. A renderer of about 500 lines of TypeScript, in soft-3d.ts, transforms the triangles, rasterizes them into a typed array with a depth buffer and copies the result to a canvas. It runs with hardware acceleration off.
Details
- Category
- Hero
- Interaction
- On Load + On Scroll + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 033 / Hero
Three.js Armillary Sphere Hero with Scroll Animation
On Scroll · Mouse Move · On Load
No. 026 / Studio
VYRO Painted Loud Studio
On Load · On Scroll · On Hover · Mouse Move
No. 092 / Comparison
GSAP Comparison Table Section: Us vs Them with Flip
On Scroll · On Click
(02)FAQ
3D Gold Ring Hero with Scroll Rotation on Canvas, No WebGL — 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 Three.js is not used. Pass your display font as the CSS variable --band-display.
02Does it need a GPU?
No. Everything is drawn on the CPU into a 2D canvas, and it was tested at 60 frames a second in Brave at 1280x800 with hardware acceleration off. A frame takes about 9 ms of JavaScript on a 4-core laptop. If frames run long, it steps down its supersampling from 1.5 to 1, and it steps back up when there is room.
03Can I change the metal or the number of stones?
Yes. gold takes any CSS colour, so a pale value reads as white gold and a pink one as rose gold. stones sets how many sit along the top half, and their sizes scale so the row always fills it exactly. dark sets the colour of the stage before the lights come on.
04How long is the scroll?
length sets the section height in screens, 3.4 by default. A longer section turns the ring more slowly. The first line of the lines prop arrives with the ring. The others are spaced evenly across the scroll.
05What happens with reduced motion?
The section shrinks to one screen, with every line of the heading showing and the ring as a single finished frame part way through the push. No animation loop runs.
06What happens on a phone?
The ring sits above the heading and swiping scrolls the page as normal. With no cursor it keeps its own turn. The loop stops when the section is off screen or the tab is hidden.
07What if the script loads late?
The server sends the dark stage with the type held back. If JavaScript hasn't started after 2.5 seconds, CSS turns the lights on and shows the type by itself, and the ring rushes in over the lit page when the script arrives.