Live prototype
https://oria-maquette.netlify.app/
Oria is a Neapolitan pizzeria in Bordeaux. It has a deli section, a recognisable shopfront and a whole personality embodied by its owner, with his lilting accent from Puglia, Italy.
When I discovered Oria, their website already did the job: ordering, booking, browsing the menu. Everything ran through Delicity. My idea was to offer a more personal experience around their world while keeping their existing setup.
An identity, with scroll in action.
All I had was a business card, and that felt like plenty to start with. It immediately gave me ideas: photograph it, redraw it to get the outlines, run it through an image generator for the colours, and I already had a solid enough base to build the rest.
The shopfront became the starting point. Then something clicked: I had made a rotoscoped animation years earlier. That would have been a lot for a mockup, but I borrowed the thinking behind it. If I describe exactly how I want the camera to move and give it enough references…
I tested it with Seedance 2.5, an image-to-video / prompt-to-video model, and after a few attempts I had the next part of the concept.
From there, the idea was to let the visitor control the movement directly as they navigated the screen, with a version adapted for mobile. The technique stays deliberately invisible. I added an arrow to show that you could click or scroll, keeping the experience as smooth as possible. People are here to buy pizza!
I then exported the animation frame by frame to reconstruct the movement directly in the browser and put it under the visitor’s control.
Scrolling moves the sequence forwards or backwards. It is lighter than a conventional video, but above all it makes the experience much more interesting: the visitor controls the animation as they watch.
That was exactly the idea I had been looking for from the start: entering the menu as if you were physically walking into the place.
On the technical side:
The extract.py script probes the source with `ffprobe`, extracts every frame with
`ffmpeg -vsync 0`, then encodes two WebP sequences and writes an
`assets/oria-sequence/manifest.json`.
JavaScript reads this manifest to display the right frame for the scroll position:
the video moves “forwards” and “backwards” as you scroll through the page.
From the scene to the real place
The aim was to propose a coherent visual interpretation of a pizzeria that already exists.
The project became a pretty complete exercise in art direction: start with a real place, build a digital identity around it, then use technology to bring that intention into motion.
▸ My role
Art direction, UX/UI, generative illustration and retouching, camera movement design, prototyping, video generation, front-end integration and scroll-driven animation.
▸ Stack
HTML, CSS, JavaScript, Canvas, ffmpeg, Python, Netlify, Procreate and image/video generation tools