What an interactive developer does: motion, real-time 3D and the craft behind websites for luxury brands.
About me
From school to studio
At Epitech there are no lectures, only projects. You read the docs, test, fail and start again: the best training for a job where tools change every year.
[20XX–20XX]
Epitech
Project-based computer science school.
[20XX]
[Internship / work-study]
[How you joined 60fps]
Today
Interactive Developer, 60fps
Interactive websites and real-time 3D for luxury brands.
Today
0160fpsA studio for the luxury world
043D in the browserFrom a model to a web page
02Interactive websitesMotion as craftsmanship
05One model, two livesFrom a browser tab to a monument
033D, the fundamentalsNo maths, promised
06What comes nextDigital twins and a virtual studio
01
60fps
A studio for the luxury world
0160fps
A creative digital production studio: 25 in-house developers, 3D modelers and project managers building websites, global platforms and installations for:
OmegaLonginesChanelCartier
0160fps
What luxury expects
Detail
Every pixel, every easing curve is reviewed. Then reviewed again.
Brand
Strict guidelines. The product must look exactly as it does in the boutique.
Performance
Flawless on a phone as well as on a 5K screen.
Confidentiality
Products under embargo, launch dates that never move.
02
Interactive websites
Motion as craftsmanship
02Our name is the goal
16.7 ms
60 frames per second leaves 16.7 milliseconds to compute and draw each image. Miss it and the page stutters.
An interactive site reacts to scroll, to the pointer, to time. Every one of those reactions has to fit inside that budget.
02Interactive websites
Same movement, different feeling
We animate with GSAP. The code is short: the craft is in the timing and the easing curve.
LinearMechanical, feels cheap
Ease outFast start, soft landing
Expo in-outCalm, deliberate
02Project
Longines Zulu
A custom navigation built around the watch, with GSAP-driven transitions and 3D.
3DGSAPCustom navigation
The site is no longer online: screen recording.
03
3D, the fundamentals
No maths, promised
033D, the fundamentals
What is a 3D model?
01Points
A cloud of positions in space. On its own, just dust.
02Mesh
Connect the points into triangles and you get a surface.
03Material
How the surface reacts to light: metal, glass, colour, roughness.
04Shader
A tiny program the graphics card runs for every pixel, 60 times a second. Here we invent looks that don't exist.
Rendered live in this slide
04
3D in the browser
From a model to a web page
043D in the browser
Four steps, one tight budget
01
Model
Built by 3D artists in tools like Blender. Millions of polygons.
02
Optimise
Fewer polygons, compressed textures, one light glTF file.
03
Load
A few megabytes, downloaded with the page.
04
Render
WebGL and Three.js draw it on the graphics card, 60 times a second.
The challenge: make it look like a photograph, on a phone, without anyone noticing it loaded.
04Project
The Watch
A studio prototype: a site built around a fictional watch, rendered in real time.
PrototypeReal-time 3DThree.js
04Project
Bleu de Chanel
The bottle in real-time 3D, integrated directly into the product page.
Real-time 3DE-commerceChanel
chanel.com can't be embedded: screen recording.
04Project
Cartier Watches and Wonders 2025
Watches and Wonders is the Geneva fair where watchmakers unveil their new pieces. Cartier's digital experience for the 2025 edition, with a launch date that never moves.
Real-time 3DLaunch
05
One model, two lives
From a browser tab to a monument
05One model, two lives
Same model, two ways to render it
Real time
In the browser. 16.7 ms per image, on any device.
Offline render
Path-traced light. Minutes, sometimes hours, per image.
05One model, two lives
How big can it get?
HD1,920 px across
4K3,840 px across
35Kabout 35,000 px across
For displays on Parisian monuments, one frame is about 18 times wider than HD. Every scratch on the model shows.
05Project
Omega ClearSpace
3D renders and animations for Omega's ClearSpace story.