Quick summary
A self-contained WebGL component that arranges images and video as planes coiled around a vertical cylinder. Three motion sources add together — a gentle idle drift, scroll scrub, and pointer drag — and a custom shader gives every plane rounded corners, a cover-fit crop and a blurred back face.
It was generalized out of a real production build, so there are no hardcoded IDs or media paths left in it. Integration is three steps: copy three files in, give a container a real height, and call it with your media array. Three.js is bundled, so there is nothing to install.
Who this skill is for
This is for anyone with a body of visual work and nowhere interesting to put it.
- Photographers, designers and studios who want a gallery that is itself a piece of craft
- Developers who need a WebGL component that drops into an existing stack without a rewrite
- Anyone building a portfolio where a grid would undersell the work
What problem this skill solves
A media gallery is the most-built and least-loved component on the web, and the interesting versions are almost never reusable.
- A standard grid says nothing about the work — every portfolio using one looks like every other one
- The impressive WebGL galleries are usually welded to the site they were built for, with hardcoded IDs and media paths
- Rolling your own means shader work, pointer-versus-scroll arbitration and mobile video handling, none of which is the thing you actually wanted to build
What you get with this skill
The download is a finished component with its dependency bundled, plus a demo that proves it works before you wire anything in.
- The engine as a single ES module, generalized from a real production build with no hardcoded media
- Three.js bundled alongside it, so there is nothing to install and no version to reconcile
- A complete working demo that renders with zero external assets — open it and the component is running
- A customization reference covering every option, framework integration, and the rendering problems people hit
Steps overview
| Step | What happens |
|---|---|
| Copy the engine in | Three files, kept together |
| Add a container with real height | The one integration gotcha, handled up front |
| Initialize with your media | One call, one array |
| Open the bundled demo first | Confirm it works before wiring real media in |
| Tune the coil | Shape, speed and colour, from a documented option table |
| Add scroll-scrub if you want it | Optional, and feature-detected |
Design & branding system
The component is opinionated where it needs to be and configurable everywhere else, so it can carry a brand without being rebuilt.
- A custom shader gives each plane rounded corners, a cover-fit crop and a blurred back face — so the coil reads as objects rather than as flat cards
- An optional colour wash, with a cool grey-blue default and a single setting to return to true colour
- Three motion sources that add together rather than fight: idle drift, scroll scrub and pointer drag
- Hover darkens and zooms a tile, and a real click is distinguished from the end of a drag — which is the detail that makes it feel finished
Output & performance budget
It is one WebGL canvas with a bundled dependency and a deliberate mobile strategy.
- Three.js is bundled rather than installed, so there is no build step and no dependency to keep in sync
- Video tiles take an optional poster, and on touch devices the poster is shown so the video is never downloaded until the visitor opens it
- One canvas per container. Several spirals on one page each get their own initialization
- No framework requirement — the same module works in plain HTML, React, Next or Vue
How this skill pays off
A gallery that people play with is a gallery people remember.
- Scroll and drag both spin it, so the visitor is handling the work rather than scrolling past it
- Each tile can link anywhere, which turns the gallery into navigation instead of a dead end
- It is a component, not a site — so it upgrades a portfolio you already have rather than replacing it
Other information about this skill
Worth knowing before you download it.
- The container must have a non-zero height. This is the single most common integration failure and it looks exactly like the component being broken
- WebGL needs a real GPU context. Some headless browsers and screenshot tools cannot create one and will log a context error — that is the environment, not the component
- Portrait media suits the default plane aspect; landscape media wants the aspect set explicitly
- GSAP is optional. Everything except scroll-scrub and the reveal works without it
Output examples
The component as it runs on this site, captured live at both sizes.
