Overview
This self-hosted case study preserves the animation language and interaction logic behind a production experience without relying on an external site remaining unchanged.
Back to work
Purposeful Motion System
The Heart
Rebuilt the layered heartbeat hero and its original point-wave study as a responsive, self-hosted motion demo.
Scoped contributionProduction assets adapted
- Role
- Interaction engineering contributor
- Evidence
- Homepage-matched demonstration
Users
- Audience visitorsunderstand the emotional rhythm of the page quickly
- Creative and production teamssee motion support the concept without overwhelming content
- Future reviewersinspect preserved interaction behavior even if the live site changes
Problem
The interaction needed emotional rhythm without blocking content, reducing accessibility, or becoming decorative noise.
Ownership
Interaction engineering contributor responsible for heartbeat timing, reveal behavior, and responsive motion. This portfolio version is a self-hosted reconstruction of that contribution.
Constraints
- Motion had to support the story rather than compete with content.
- The module needed reduced-motion support.
- The evidence had to remain reviewable even if the original production site changed.
Decisions
Decisions that shaped the work
Key decisions
- Used a self-hosted animation recreation instead of relying on a production link
- Kept reduced-motion support in place
- Focused on rhythm, timing, and story support over decorative complexity
Evidence
Work in context
Portfolio evidence note
Self-hosted reconstruction using public production homepage assets and Logan Hart's original The Wave CodePen source, adapted only for the React lifecycle and embedded portfolio context.
Interactive evidence
Workflow demo
Explore the preserved interaction without depending on a production site.
Reflection
What I learned
Lessons
- Motion is strongest when it clarifies the story or emotional state.
- Self-hosted demos make motion work reviewable after production sites change.