Skip to main content

KPU coursework

Purposeful Motion: Component Library

A documented library of eight functional micro-interactions: motion for clarity, feedback and delight, not decoration.

Role
Interaction and motion designer
Timeline
October 2025
Tools
HTML, CSS, JavaScript, Figma
Type
KPU coursework
Purposeful Motion component library overview with floating UI components

The problem

Motion is usually treated as the last polish pass. This library argues it is a functional tool that adds clarity and feedback and reduces uncertainty.

My role and constraints

I designed, built and documented eight components, each mapped to a design principle and a real UX concern.

Process

Each component is specified like a design token: loader (1s linear loop), success (circle, check, confetti), error shake (0.5s), toggle (0.3s), floating input (0.3s), expandable card (0.4s), modal (0.5s) and drag and drop.

Eight motion components with timing, easing and scenario
Eight components with timing, easing and scenario.
Storyboard of a form validation error and floating input
Storyboard: validation error and floating input.

Live interactions

Loader · 1s linear loop
Working…
Signals a background task is running.
Success · 0.3 + 0.3 + 1s
Circle → check → confetti. Celebrates completion.
Error · 0.5s shake
Draws the eye to invalid input instantly.
Toggle · 0.3s slide
Off
Smooth, legible ON / OFF state change.
Floating input · 0.3s
Label lifts on focus, context stays visible while typing.
Expandable card · 0.4s
Reveals hidden detail without losing place.
Modal · 0.5s fade/scale
Fade + scale focuses attention; scrim traps it.
Drag & drop · spring
  • Chest day
  • Back day
  • Leg day
  • Rest
Reorder with smooth transforms, try dragging.

What I learned

Documenting the “why” beside the “how” turns a pile of effects into a system a team can reuse.