Three.js Armillary Sphere Hero with Scroll Animation
Overview
A sticky hero section for React and Next.js with a brass armillary sphere built in code. Nested rings turn on their own gimbal axes, the cursor adds inertia, and on scroll they align and settle into one flat band behind the heading.
The rings are thin lathe bands with softened corners, each one parented to the ring outside it and hinged on an axis at 90 degrees to the last, like a real gimbal. They turn at slow, different speeds and in opposite directions. Brushed brass comes from MeshPhysicalMaterial with anisotropy and a generated roughness map, and the engraved scale on the outer ring is one InstancedMesh of tick marks, with longer marks every five and fifteen.
Details
- Category
- Hero
- Interaction
- On Scroll + Mouse Move + On Load
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 070 / 3D
Three.js Pearl Necklace with Verlet Rope Physics
Mouse Move · On Click · On Load
No. 053 / Hero
3D Gold Ring Hero with Scroll Rotation on Canvas, No WebGL
On Load · On Scroll · Mouse Move · On Click
No. 026 / Studio
VYRO Painted Loud Studio
On Load · On Scroll · On Hover · Mouse Move
(02)FAQ
Three.js Armillary Sphere Hero with Scroll Animation — FAQ
01What does it need from my page?
npm install three gsap @gsap/react, and Tailwind CSS v4. Three.js loads through a dynamic import, in the browser only. There are no images, textures or model files. Pass your display font as the CSS variable --armillary-display.
02Can I change the number of rings or the tick marks?
rings takes 3 to 7 and they size themselves to nest. ticks sets how many marks go around the outer ring, and every fifth and fifteenth is drawn longer, so a multiple of 15, like the default 120, looks tidy.
03How long is the scroll?
length sets the section height in screens, 3.2 by default. A longer section brings the rings to rest more slowly.
04What happens with reduced motion?
The section shrinks to one screen and shows the end state: the rings settled into their band behind the heading, as one still frame with no animation loop.
05What happens on a phone, or without WebGL?
On a phone the rings keep their slow turning with no cursor, and swiping scrolls the page as normal. Without WebGL, or on a software renderer, a line drawing of the instrument stays behind the heading.