Gribouille
Sculptural squiggles, worn like punctuation.
About
Gribouille is a Tallinn jewellery house built around one idea: the squiggle. Every earring is a single continuous line, bent, cured and polished by hand, in five colourways from Bleu Klein to Jaune oeuf.
Challenge
One product, a lot of personality and a small team. The brand needed a site that feels like walking into the shop, shows the earring on real people in every colour, and still opens fast on a phone. A stock-photo template and a heavy hero video were ruled out on day one.
Rendered live, not played.
The bar at the top of this page is a 3D object that your browser draws frame by frame, inside a photograph of the room. It makes a full turn about every 100 seconds, and a line of pink light runs across its studs: the same squiggle as the earring. Here is how it is put together.
The room
We generated the reception as a still image and graded it in the brand’s plum and pink. It comes in two versions: an empty plate for the live bar, and one with the bar already in it, which loads first. On a slow phone that still is the whole hero, and it still looks finished.
The camera
We traced the rug’s ellipse in the photo and worked back to the camera that took it: focal length, height and angle. With the camera solved, the 3D bar stands exactly on the rug at any screen size, from a wide monitor to a phone held upright.
The bar
Built in code, not in a 3D app: a black lacquer drum, chrome trims and 260 chrome studs in five rows. Your browser draws it with WebGL at the screen’s own resolution, so it stays pin-sharp where a video would go soft.
The light
A squiggle of pink light travels around the studs and slowly changes shape. Lit studs get a soft halo, the rug picks up the glow, and the brand name floats above it all.
- 260chrome studs, each lit on its own
- ~100 sfor one full turn of the bar
- 0video files
- 15 KBof code for the whole 3D hero
Built with good manners
- Pauses when you scroll past it or switch tabs.
- Drops to a lower resolution if a phone starts to struggle.
- Shows the still photo when WebGL is not available.
- Holds still for people who turn off motion in their settings.
We shot the campaign too.
No stock and no jewellery on mannequins. We cast the models, styled them in quiet oat, cream and sky knits so the only colour in the frame is the earring, and shot every colourway against its own backdrop. One shoot gave the brand its site, its ads and a season of posts.
Casting
Faces that hold up as a thumbnail and as a full-screen hero. Hair pulled back, so the ear is the stage.
Styling
Knitwear in oat, cream and sky. Nothing in the frame competes with a squiggle.
Light
One soft key light from the side, so the lacquer shows every curve of the line.
Colour
Every frame graded so Bleu Klein on screen matches Bleu Klein in your hand.
One shoot, every format.
We frame for every crop on set, so the same picture works as a shop tile, a feed post and a story without ever losing the earring.
Solution
One long page that moves like a visit: the reception, the earring in five moods, a close-up editorial, then the rooms and the door. A colour picker swaps the campaign photos as you choose, and cycles through them on its own when you don’t. A squiggle draws itself as you scroll, and the brand name drifts away while the bar keeps turning.
The colour picker: pick a dot and the photography follows. Left alone, it cycles through the colourways by itself.
The shop, visualised.
We imagined the rooms as well: a fitting lounge with walls that glow pink and a bar for Saturday appointments. Same plum, pink and chrome as the site, so the brand feels the same online and through the door.
Result
A brand site that feels like the shop, a photo library that covers the site, ads and social from a single shoot, and a hero that stays sharp on every screen without a single video file.