WebGL Image Ring
Three concentric rings of images that spin with scroll and drag.
The WebGL Image Ring arranges a whole catalogue into three rings that orbit a single word. The rings never stop turning, neighbours spin in opposite directions, and the visitor's scroll pours speed into the rotation, blurring the collection into motion before it settles again. Film grain and a soft vignette give the whole scene the finish of a title sequence.
How it works
Every image is a small WebGL plane placed on one of three concentric rings, twelve on the innermost, then twenty four, then thirty six. The rings idle in a slow spin with neighbours turning in opposite directions, and scrolling or dragging feeds velocity into the rotation, so a hard flick sends the whole constellation whirling while the images lean back in depth. A finishing pass adds film grain, a subtle colour fringe on movement and a soft vignette, and the page opens with a circular reveal that wipes away a white loading screen.
When to use it
Dressed here as a Mayfair jewellery house, it suits brands with many small beautiful objects: jewellers, watchmakers, galleries, perfumers, record labels. It works as a homepage statement or a collection landing, and it needs at least two dozen images that read well at a small size.
Why it works
Orbit is a powerful metaphor, everything revolves around the brand name in the middle. Because the motion never fully stops, the page feels alive from the first frame, and because the visitor's own scroll whips the rings around, they get to play with the brand rather than just look at it. The grain and vignette push it from web page toward cinema.
Recommended for
- Jewellery and watches
- Perfume and beauty
- Galleries and collections
- Luxury brand statements
Common questions
What happens when the visitor scrolls?
Scroll and drag speed feed straight into the rotation of the rings, so gentle scrolling turns them lazily and a hard flick spins them fast, with the images pulling back in depth at speed before settling.
Why three rings instead of one?
The counter rotation between neighbouring rings is what makes the composition hypnotic. One ring reads as a loading spinner, three rings turning against each other read as a piece of motion design.
Where does the effect come from?
It follows a public CodePen experiment by the creative coder alphardex, released under CodePen's MIT licence for public pens, and was rebuilt in vanilla Three.js for this demo.