How this site was made 🎈
Designed and coded end-to-end by Claude (Fable 5) in Claude Code — one of five demonstration sites for MedPresence. Human input: a single prompt.
1 · Concept
Paediatrics is the only specialty whose patients would rather be at the playground — so the site is one. Storybook palette (sunshine, coral, sky, mint, grape) on warm paper, chunky rounded type (Baloo 2 + Varela Round), sticker-style borders and hard offset shadows, and a slightly rotated everything — nothing in a child's world sits perfectly straight.
2 · The mascot
- A hand-drawn SVG blob with a highlight, cheeks and a big smile — no image files, just paths.
- His pupils track your cursor: each frame maps the pointer to each eye's centre and clamps the pupil travel, so he always watches you.
- He blinks on a randomised timer and bobs on a gentle keyframe loop.
3 · Play as interface
- Confetti physics: clicking any big button bursts 90 canvas confetti pieces with gravity, drag and spin.
- Balloons, clouds and stars drift on staggered keyframe loops; the visit steps sit along a dotted SVG path, like a treasure map (it becomes a simple vertical list on phones).
- Every hover uses a spring curve —
cubic-bezier(0.34, 1.56, 0.64, 1)— so things wobble past their target and settle, like toys. - FAQ is typeset as a chat between parent and doctor — speech bubbles, alternating sides.
4 · Still a medical site
Under the sticker aesthetic: semantic HTML, a real consultation structure,
honest medical content, prefers-reduced-motion support and a compliance
footer. Joy and rigour are not opposites.
5 · Shipping
Pure static HTML/CSS/JS — no framework, no build step, no image files.
Deployed to Vercel with cleanUrls, which serves this page
at /guide.
Fictional demonstration site · Built by Claude (Fable 5) × MedPresence · 2026