Back to portfolio

Craft

Interaction studies, design essays, and explorations in interface craft. Building things that feel alive through thoughtful motion and attention to detail.

Inspired by Emil Kowalski, Jordan Singer, Rauno FelberMotion grammar for humane interfaces

Interaction Studies

Explorations in micro-interactions that reward learning and create delightful moments. Each study focuses on a specific interaction pattern or motion principle.

Like Button Feedback

Spring physics • Haptic feedback

Combines scale feedback with color transition and particle burst. The spring animation creates a satisfying tactile feeling that rewards engagement.

Download Progress

Morphing states • Progress indication

Button morphs to show download progress with fluid fill animation. State changes feel connected and provide clear feedback about system status.

Share Menu

Staggered reveal • Elastic motion

Share menu appears with staggered spring animations. Each item enters with a slight delay, creating rhythm and drawing attention to options.

Playback Control

Morphing icon • Smooth transitions
0:0010:00

Play button morphs to pause state with layered animations. Progress bar updates smoothly to maintain the feeling of continuous playback.

Spring Physics

Exploring natural motion through spring animations. These examples show how different spring configurations create distinct feelings and personality in interfaces.

Spring Configurations

Gentle
Stiffness: 100 • Damping: 20 • Mass: 1
Snappy
Stiffness: 400 • Damping: 10 • Mass: 0.5
Bouncy
Stiffness: 300 • Damping: 8 • Mass: 1
Smooth
Stiffness: 200 • Damping: 25 • Mass: 1

Magnetic Button

Mouse interaction • Attraction force

Button is attracted to cursor within proximity. Spring physics create natural magnetic behavior that feels responsive without being jarring.

Stacked Cards

Staggered animation • Z-index layers
First Card
Second Card
Third Card

Click cards to cycle through stack. Each card has natural spring motion and slight rotation to create depth. Hover reveals the layered structure.

Elastic Input

Focus states • Smooth scaling
0 characters

Input field scales gently on focus with elastic spring physics. The accent line grows smoothly, and character count appears with spring animation.

Project Highlights

Selected projects showcasing the intersection of design and engineering. Each project explores different aspects of craft, from motion design to editorial layout.

Whakapapa

AI-powered genealogy with spring animations

A cultural genealogy platform that uses spring physics for natural navigation. Built with Next.js, Framer Motion, and Claude AI for cultural storytelling.

Next.jsFramer MotionSupabaseClaude AI

Project Preview

Strawhouse Gallery

Award-worthy gallery experience

An art gallery website that transforms browsing into an experience. Editorial layout with subtle animations and careful typography hierarchy.

Next.jsSanity CMSFramer MotionTypeScript

Project Preview

Vape Quit Coach

AI behavior change with editorial design

A 4.8★ iOS app combining AI coaching with thoughtful interface design. Dark editorial cards and spring interactions reduce friction in behavior change.

React NativeExpoAI CoachingEditorial Design

Project Preview

Design Essays

Thoughts on craft, motion, and the intersection of design and engineering. Documenting lessons learned and principles discovered while building interfaces that feel alive.

More essays coming soon. Following in the footsteps of Rauno, Emil, and the design engineers who document their craft.

Inspired by the craft of

"The design engineer's job is to implement intuition in code. Not to simulate physics perfectly, but to capture the feeling of physics. The essence, not the equations."
— From "The Invisible Details of Interaction Design"

Interested in design engineering or building interfaces that feel alive?

© 2026 Maxwell Young • Design Engineer • Auckland, NZ