Fennel & Fable Academy is a fictional online art school that sells illustration and children’s-book courses: six self-paced classes (£79–£149) and three live cohorts (£290–£390), plus an All-access membership (£24 a month or £199 a year). It opens light (warm paper white, butter, sky, mint and rose colour fields, ink-navy text, one fennel-green brand colour and a highlighter yellow), with sky, blush and a dark night on the palette knob. Fonts: Fraunces (soft, high optical size) for display, Onest for text and Caveat for a few handwritten notes, like a teacher’s pencil in the margin.
One motion language: entrances power3.out 0.5–1.2 s, state changes and wipes expo.inOut 0.6–1.1 s, scroll-linked pieces ease: 'none' with scrub, Lenis smooth scroll. The headline lines rise out of masks and a yellow highlighter swash draws under “working artists”. The hero card shows the next live cohort computed from today (first Monday of the month at least a week away), a countdown, places left and the enrolment deadline. The studio photo then opens to near full-bleed as you scroll.
The catalogue filters by level and topic with GSAP Flip; every card has a real photo, format, lessons, hours, level, price and next start date. The signature is Find your course: three questions (where you are, what you want to make, hours a week) and a pencil path draws through the recommended courses to the thing you will make, with total weeks, price and the All-access alternative. The syllabus explorer for the flagship course has ten expanding weeks (40 lessons with minutes, live critiques), an “explored” bar and two free lessons that play a 45-second preview with captions in the player. Then: how the learning works (four self-drawing doodles), teachers (artwork peek follows the cursor; no faces), a parallax student-work gallery, pricing with a monthly/yearly toggle, sample reviews on tilted index cards, a working FAQ (refunds, access, software and kit, certificates, missed sessions, age), and a free mini-lesson signup whose five shapes assemble into a character, with a success state.
Images: twelve real photographs (watercolour brushwork, an illustrator’s desk, sketchbooks, charcoal and pencil drawing, a tablet, a palette, a laptop playing a lesson) are Unsplash demo images for the live preview only, not included, listed in public/assets/fennel-fable-studio/LICENSE.txt, with one shared warm, soft grade. People appear only as hands or blurred ambience. Ratings, reviews, student counts, publishing credits and student work captions are samples.
Gotchas: cohort dates, the countdown and places left are computed in the browser from today’s date; replace with your LMS data. The course path is an SVG whose viewBox is set to the map’s pixel size each render, so the curve passes exactly through the stop markers; it redraws on resize without animation. Flip uses absolute: true so the grid can reflow while cards leave. The lesson player is simulated (no video file): it runs on the GSAP ticker and stops on ml:pause. Under reduced motion there is no Lenis, no masks, no scrub or parallax; counters, swash, doodles and the path are drawn at once.
medium 
medium 
medium 
medium