Case study — E-commerce
Maison DIVINO
An online store for oil-painting iPhone cases — designed and coded from scratch, with a film-led home page, a 3D viewer for every phone, and a checkout built on Stripe.
The brief
Sell a phone case the way you'd sell a painting.
Maison DIVINO is the studio's own brand. It makes iPhone cases printed with oil-painting scenes — polo, clay courts, regattas, the Riviera — finished with a raised brushstroke texture.
The product is tactile and visual, so the website had to do what a product grid can't: show the texture, show the case on the customer's exact phone, and place each design in the world it was painted from.
That ruled out a store template. The storefront was written by hand, which kept every detail — from the film on the home page to the way the cart is priced — under the studio's control.
- 10
- Painted designs
- 16
- iPhone models
- 160
- Design–phone pairings
- 0
- Templates used
The collection
A catalogue that reads like a gallery wall.
Ten designs on a quiet, paper-toned grid. Names set in a display serif, prices kept small, nothing competing with the paintings.
What was built
Three things a template couldn't do.
Filmed where each painting belongs
Every design has its own scene: the polo case on a field at dusk, the motorboat case on a lake. Short film loops play in place of static product shots.
Each video ships in wide and tall cuts with a poster frame, so phones load a small file and the page never waits on the film.
Your phone, your case, in 3D
Sixteen iPhone models have sixteen different camera layouts. A 3D viewer built with Three.js lets customers pick their phone and turn the case in their hands before buying.
Each case is cut for its own phone — the camera, the buttons, the port — so what the customer turns on screen is what arrives in the box.
A checkout that can't be talked down
The bag is priced on the server, from the catalogue — never from numbers sent by the browser. A Cloudflare Pages Function builds the order and hands the customer to Stripe Checkout.
Card details go straight to Stripe. The store never sees them, and there is no separate server to maintain.
Art direction
One scene per design.
Under the surface
Quiet palette, fast pages.
The interface stays out of the way: warm paper tones, near-black ink, one display serif. The colour comes from the paintings.
Images are served as WebP in several sizes, with tiny blurred previews that appear instantly while the full picture loads. The site runs on Cloudflare Pages, with security headers set at the edge.
Stack
- HTML & CSSHand-written
- JavaScriptNo framework
- Three.js3D viewer
- Stripe CheckoutPayments
- Cloudflare PagesHosting
- Pages FunctionsCheckout logic
- WebP & MP4Media pipeline
- Edge headersSecurity
Status: the storefront is live at maisondivino.com in preview. Checkout is built and switches on at launch.