Aera Clinic
Clinical calm built from evidence, boundaries, and humane pacing.
Challenge
A fictional preventive-health clinic that distinguishes medical services from wellness language and routes care safely.
Breathing whitespace, measured diagnostic diagrams, warm coral actions.
Soft serif headings with an accessibility-first humanist sans.
A care-path selector reorganizes the page around the visitor’s actual need.
Daylight, privacy, and grounded attention.
Scene-by-scene experience
The route has a job at every depth.
Need
Route the visitor safely.
Check-up, ongoing care, recovery, and urgent-care boundary.
Approach
Explain what happens.
Assessment, clinician review, plan, and follow-up.
Evidence
Separate claims from support.
Service claims paired with source and limitation notes.
Team
Establish credentials.
Role, registration, scope, and availability.
Book
Request an appropriate appointment.
Need, preferred time, access requirements, and privacy note.
Motion record
- trigger
- Care-path selection
- duration
- 0.4s
- delay
- 0ms
- easing
- [0.16,1,0.3,1]
- transform
- content crossfade, height auto, y 8→0
- scroll
- No scroll hijacking or wellness parallax
- desktop
- Inline pathway comparison
- mobile
- Accessible radio-card stack
- reducedMotion
- Immediate content update with focus management
Responsive behavior
Designed across the actual range.
390px prioritizes urgency boundaries and readable forms; 768px uses paired cards; 1024px+ opens editorial space; no information is hidden solely for aesthetics.
Implementation: Next.js and Motion; medical claims require real review before any production use.