CONCEPT · SELF-INITIATED · 2026
THE FIRST 8 SECONDS, RECORDED FROM THE LIVE SITE
Fenouil
- CATEGORY
- Brand studio portfolio
- SERVICES
- Strategy, Identity, Design, Dev, Motion
- TYPE
- Concept, self-initiated
- SCOPE
- 3 pages, 12 project sheets
- YEAR
- 2026
- LIVE SITE
- View Live Site
A studio site that shows you the work before it asks you to read.
Fenouil is a brand studio in Marseille that names and draws hotels, wine, food and beauty brands. I made it up, because I wanted to build the site I'd want if I ran a small studio, starting from the name and the wordmark.
The studio, its team and its twelve projects are invented, and the pictures come from Midjourney. I designed and built everything else, and the site is live.
THE PROBLEM
Most studio sites hide the work.
They open on a manifesto, and the projects sit two scrolls down as small thumbnails that all lead to the same template page. That's backwards for a studio whose whole pitch is how its work looks.
On Fenouil, pictures fill the first screen, and every picture you see opens its own project.
THE APPROACH
Where the motion goes.
Most of the motion on the site lives in three places, and each one gets you to a picture faster.
01
A loader that opens the name
The wordmark splits between FEN and OUIL, and three frames of work flash through the gap before it grows into the hero. It waits until the video can play, so a slow connection gets a longer hold on the name instead of a blank hero.
02
A projects page you drag through
All twelve projects sit on one curved wall. You drag it with a mouse or a finger, or move it with the wheel or the arrow keys, and it keeps going in every direction.
03
Click a picture, get the project
The picture you click flies into the project sheet in one second and stays the same image the whole way, so you don't lose your place. The sheet has the brief, the team, the city and a link to the next project.
STYLE GUIDE
A Marseille port, in five colours.
The whole system is five colours, two typefaces, five durations and two easing curves. Paper and navy do almost all the work. Pastis only goes on navy, where it reads at 8.8 to 1, because on paper it would drop to 1.5 to 1.
WORDMARK
BESLEY 800 · TRACKED +35 · 7 PATHS
A script draws each letter as one path straight from the font, so the loader can split the word at the exact seam and rebuild it at any size. The favicon is the F in pastis on navy.
Paper
#F5F0E4
PAGE
Ink
#15264B
TYPE, THE FOOTER
Muted
#5E6A80
LABELS, CAPTIONS
Surface
#E9E1CF
PANELS
Pastis
#E8C457
THE ONE ACCENT
13.1 : 1
INK ON PAPER
AAA
4.8 : 1
MUTED ON PAPER
AA
8.8 : 1
PASTIS ON INK
AAA
DISPLAY AND READING
BESLEY, ROMAN + ITALIC
We brand what you pour, plate and check into.
Besley sets everything from the headlines to the captions. The italic is the only emphasis on the site, and it always falls on the last words of a line.
LABELS
DM MONO 400
MARSEILLE, SINCE 2014
NAMING, IDENTITY, SIGNAGE
DRAG TO EXPLORE
For labels and metadata, the things you skim past on a first read.
MOTION
TEXT RISES OUT OF A LINE MASK
DURATION LADDER, SECONDS
Every animation on the site uses one of these five.
FENOUIL.BLOOM · 1.1s
The seam lands on the reel.
CUBIC-BEZIER(0.76, 0, 0.12, 1)
FENOUIL.MOVE · 1.0s
A picture flies into its project.
CUBIC-BEZIER(0.62, 0, 0.16, 1)
UNDER THE HOOD
- STACK
- Astro, static HTML
- MOTION
- GSAP, self-hosted
- FONTS
- Besley + DM Mono, Latin subset
- HOSTING
- Cloudflare Pages
How fast it loads.
A made-up studio has no sales numbers, so here's what I can measure on the live home page. On a throttled phone it scored between 88 and 97 over five runs, and most of its 1.1 MB is the reel.
- With reduced motion turned on, or ?skipanim in the address, you get the finished page with no loader and no reveals.
- Every duration comes from one file, so I can retune the timing of the whole site in one place.
- Every word of the site lives in one file, and the pages render from it.
- The site is kept out of search on purpose, which is the only thing Lighthouse marks it down for.
WHAT'S REAL
- REAL
- The design, the wordmark, the code, the motion, the live site.
- INVENTED
- The studio, its people, its twelve projects and their clients.
- GENERATED
- Every picture and clip, made with Midjourney and upscaled.
CREDITS
- SOLO BUILD
- Strategy, identity, design, development, motion
- PROJECTS GRID
- Built on Osmo's Infinite Dome Grid (Jesper Landberg)
- TYPE
- Besley and DM Mono, SIL Open Font License
- PICTURES
- Midjourney
WANT THIS FOR YOUR STUDIO OR PRODUCT?
Let's build something worth showing.
