CAIStart a project
All work

Concept / DemoPremium

Rookwork

Custom ring studio

The Rookwork home page: the 3D ring on a cool grey ground beside the headline Made at the bench, for one hand
Screen recording of the live Rookwork demo, about 15 seconds, no sound.Try it yourself

Rookwork is CAI’s Premium example: a fictional custom ring studio built to show what the top tier does when the product deserves to be seen in 3D. One ring, modelled in code rather than filmed or pre-rendered, carries the whole page: it is presented, taken apart and explained as you scroll, then handed to you to design.

Explore live demo
Status
Concept / Demo: a fictional business, not a client
Tier
Premium
Business
Custom ring studio (fictional)
Pages
Home with 3D sequence, consultation
Built with
Astro, Three.js, WebGL

What it demonstrates

  • A real-time 3D ring (Three.js), not a video or a fixed render, from the first screen to the configurator
  • Scroll-driven sequence: the ring turns, then separates into stone, setting and band, each labelled and explained
  • A working configurator: metal, cut, stone and band change the ring as you choose, turned by drag or by keyboard buttons
  • The chosen ring carries into the consultation form on the next page
  • Falls back to a rendered still when WebGL is unavailable, and holds still for visitors who prefer reduced motion
  • Concept notice on every page: no invented reviews, prices, awards or staff

Selected views

The Rookwork ring separated into stone, setting and band, with labels beside each part and the heading A ring is three things, made well
A ring is three thingsScrolling takes the live ring apart: stone, setting and band, each labelled and explained.
The Rookwork configurator panel with metal, cut, stone and band options beside the 3D ring, now in rose gold with a sapphire
Design yoursEvery choice changes the 3D ring immediately. Here: 18k rose gold and a sapphire.
The Rookwork consultation page with the form already filled in with 18k rose gold and sapphire from the configurator
The choice carries forwardThe consultation form arrives filled in with the ring just designed. As a concept, it sends nothing.

On a phone

Designed for a phone first, not shrunk to fit one. Captured at 390 pixels wide, the size of a current mid-size phone.

The Rookwork home page on a phone, with the 3D ring above the headline
The ring leads on a phone
The Rookwork configurator on a phone, with the ring above the options panel
Configurator on a phone

Concept / DemoPremium

Explore the live demo

Open the complete working site: scroll the 3D sequence, take the ring apart, design your own and carry it into the consultation form.

Explore live demoStart a project

Rookwork is a fictional business. Its forms check your answers and then stop: nothing is sent or stored. The 3D needs WebGL; without it the site shows a rendered still and keeps working.

Every site here is a concept built by CAI to show what each tier produces. The businesses are fictional, and each site says so on its own pages. They are complete, working sites: every page, form, menu and layout is real.