Case study · 2026
Le jardin d'Ana
The site of a fictional sound therapy practitioner: a sound garden you can touch, guided breathing and shapes that breathe. Design, illustration and code.
- Role
- Design, illustration and development, solo. Code written with Claude.
- Stack
- Next.js · React · TypeScript · Payload CMS · MongoDB · GSAP · Web Audio API · Tailwind CSS
- Status
- Live demo, fictional content
01Context
Make people feel calm, rather than describe it.
A sound therapy session is something you hear and feel. On a screen, sound, slowness and the body are hard to convey.
I designed the site of Ana, a fictional practitioner, as a small garden: you listen to instruments, you breathe, and shapes move slowly around the text. The site makes you want a session through experience, not promises.
The need
A showcase site for a sound therapy practitioner: present her approach, sessions and prices, and receive booking requests. The content is fictional, but the site really works.
My role
Everything, solo: art direction, illustration, interface design, development and deployment. The code was written hand in hand with Claude, Anthropic's AI.
Constraints
No photos. Slow animations that stop when asked to. Text the practitioner can edit on her own, without touching code.
02Before / after
From stock photos to breathing shapes.
The first version relied on stock photos and standard cards. It looked like many other wellness sites. I reworked everything to give the site a voice of its own.
Before
After
What changed
- Photos give way to risograph-style illustrations.
- Rectangular cards become slowly moving organic shapes.
- Sound comes into the site: a sound garden and a guided breathing page.
- Text moves into a CMS and can be edited without touching code.
03Art direction
A garden palette, two soft typefaces.
The cream background and very dark green ink set a calm tone. Earth brown is for buttons, copper for decoration only. The large shapes use a very pale sage and sand. The deeper tones are kept for the illustrations, drawn in a risograph style: an ink line and a slightly offset flat colour.
Fraunces, a soft serif, carries the headings. Figtree, a rounded sans-serif, carries the body text and interface.
Colours
- Earth#8B5A2B
Buttons
White text 5.84:1
- Copper#B9774A
Decoration
Black text 5.80:1
- Sage#A9B78A
Illustrations
Black text 9.82:1
- Sand#D4A373
Illustrations
Black text 9.28:1
- Cream#FBF7EA — Background
- Pale sand#F3E6CC — Cards and section backgrounds
- Pale sage#E3E8CC — Large shapes
- Ink#2F3A2B — Text
Typefaces
Fraunces
Headings
Figtree
Body text and interface
04Interactions
A site you can hear, touch and breathe with.
Three rules guide the interactions: everything is slow, no sound plays without a gesture from the visitor, and everything stops if they asked for reduced motion.
A sound garden you can touch.
The scene brings together four instruments: a bowl, a gong, wind chimes and a tubalophone. Touch one, it plays, and a wave ripples out from it. Further down the home page, all five instruments, tuning fork included, can be played the same way.
Sounds are played with the Web Audio API. The tubalophone is fully synthesised; the other sounds are royalty-free recordings. Nothing plays without a gesture, and a button mutes the sound.
A wave that draws itself as you scroll.
A sound wave runs through the home page. It draws itself as you scroll, with GSAP, and links the sections like a thread you follow.
Shapes that breathe.
The organic backgrounds gently animate their outlines, each at its own pace, over 6 to 10 seconds. The large blob on the home page follows cardiac coherence: 5 seconds in, 5 seconds out.
If the visitor has turned on reduced motion in their system, everything stops.
The Breathe page guides a breathing exercise. You choose the session length and the length of the inhale and exhale (3 to 8 seconds), then follow the shape and the countdown.
Settings
Durations are set before starting.
2,5 s
Inhale: the shape grows, the countdown runs.
5 s
End of the inhale: the shape is at its largest.
7,5 s
Exhale: the shape gently shrinks.
05Responsive
The same calm on a phone.
On mobile, sections stack into one column and the shapes tighten around the text. The sound garden and the breathing page stay playable with a finger.
06Under the hood
A showcase site the practitioner can run on her own.
Behind the softness, a solid base: a CMS for the text, pages rendered on every visit and a secure deployment.
Under the hood
Next.js and React
Next.js 16, React 19 and TypeScript. Pages are rendered on every visit, so an edit in the admin shows up right away.
Payload CMS
Payload CMS 3 and MongoDB. All the site's text can be edited in a French-language admin interface.
Accessibility
At least 4.5:1 contrast on text, and no animation if the visitor asked for reduced motion.
Deployment
Heroku behind Cloudflare, security headers, automatic deployment from GitHub. The contact form is protected against spam.
In figures
5.45:1
minimum contrast
Cream text on the earth-brown buttons, the lowest of the text and background pairs measured on the 6 public pages, jardin.webjuno.com, October 2026
98
accessibility, out of 100
Home page (99 on the Breathe page). Lighthouse mobile, median of 3 runs, jardin.webjuno.com, October 2026
100
best practices, out of 100
Home page and Breathe page. Lighthouse mobile, median of 3 runs, jardin.webjuno.com, October 2026
610 KB
transferred for the home page
First load without cache, including 256 KB of preloaded garden sounds. Lighthouse mobile and Chrome, jardin.webjuno.com, October 2026
Components and illustrations
One visual language for the scene, the instruments, the vignettes and the portrait: an ink line, an offset flat colour. Each illustration is an SVG file.
The sound-garden scene. 
The instruments. 
The “Sound familiar?” vignettes. 
Ana, a fictional character.
Visit the live site
jardin.webjuno.comDemo site designed and built by Webjuno. All content is fictional.