djiiz.MAKE · EXPLAIN · EXPLORE← Work

JOURNAL D’EXPÉRIENCES

MAKE

Oria

Refaire un site à partir d’une carte de fidélité ?

challenge accepted !

Lire la suite
Oria
MON RÔLE
Creatif compulsif
LE FORMAT
Site web
LE TERRAIN DE JEU
Direction artistique - Motion - Interaction

Live prototype

https://oria-maquette.netlify.app/

Oria est une pizzeria napolitaine située à Bordeaux. Elle propose une partie épicerie, une façade reconnaissable et toute une personnalité incarnée par son propriétaire à l’accent chantant des Pouilles (Italie).

Quand j’ai découvert Oria, leur site faisait déjà le travail : commander, réserver, consulter la carte. Tout passait par Delicity, mon idée n’était pas de remplacer leur fonctionnement, mais de proposer une expérience plus personnelle autour de leur univers.

Breif bien reçu !
Brief bien reçu !

Une identité et du scroll en action.

Je n’avais qu’une carte de visite, et je trouvais ça bien suffisant comme point de départ, parce que ca m’a tout de suite evoqué ce que je pourrais en faire, la prendre en photo, la redessiner pour avoir les lignes, passer dans un generateur d’image pour avoir la coloration et j’avais déjà une base assez solide pour dérouler le reste.

Home Sweet Home !
Home Sweet Home !

La façade est devenue le point de départ du projet. Puis comme un souvenir qui fait click, j’avais déja fait une animation en rotoscoping à l’époque, pour une maquette ca faisait beaucoup, mais je me suis inspiré de cette technique, si je decris exactement quel type de mouvement je veux faire à la camera et que je lui donne suffisamment de références…
j’ai testé avec Seedance 2.5, un modèle image-to-video / prompt-to-video, et en quelques essais j’avais la suite du concept.

Le plan caméra dessiner sur un post it !
Le plan caméra dessiner sur un post it !

A partir de là, l’idée c’est que ce mouvement soit piloté directement par le visiteur à partir de sa navigation sur l’écran, avec une version adaptée au mobile. La technique reste volontairement invisible, j’ai ajouté une flèche pour indiquer qu’il fallait soit cliquer soit faire défiler histoire de rendre l’expérience aussi fluide que possible, les gens viennent la pour acheter des pizzas !

J’ai ensuite exporté l’animation image par image pour reconstruire le mouvement directement dans le navigateur et le laisser sous le contrôle du visiteur.

Le scroll fait avancer ou reculer la séquence. C’est plus léger qu’une vidéo classique, mais surtout beaucoup plus intéressant dans l’expérience : le visiteur ne regarde plus simplement l’animation, il la pilote.

C’était exactement l’idée que je cherchais depuis le début : entrer dans le menu comme on entrerait physiquement dans le lieu.

javascript
Coté tech:

Le script extract.py sonde la source avec `ffprobe`, extrait toutes les images avec
`ffmpeg -vsync 0`  puis encode deux séries en WebP et écrit un 
`assets/oria-sequence/manifest.json`.
C'est ce manifeste que le JavaScript lit pour afficher la bonne image selon la position
du scroll : la vidéo « avance » et « recule » avec le défilement de la page.

Du décor au réel

L’objectif n’était pas de fabriquer un concept fictif autour d’une pizzeria, mais de proposer une interprétation visuelle cohérente d’un lieu qui existe déjà.

Ce projet est finalement devenu un exercice assez complet de direction artistique : partir d’un établissement réel, construire une identité digitale autour de lui, puis utiliser la technique pour donner du mouvement à cette intention.

Mon rôle

Direction artistique, UX/UI, illustration générative et retouche, conception du mouvement de caméra, prototypage, génération vidéo, intégration front-end et animation scroll-driven.

Stack

PROMPT
HTML, CSS, JavaScript, Canvas, ffmpeg, Python, Netlify, Procreate et outils de génération image/videos
Djiiz (2026)