An interactive field guide to interface craft
Every detail, on purpose.
These are the principles behind the last three websites. Instead of describing them, this page lets you touch them: drag, flick, break and compare every principle live.
Motion
When to move, how fast, and which curve.
Easing
Enter with ease-out. Never ease-in.
Ease-in starts slow, so the first frames, the ones you notice most, feel sluggish. Ease-out moves immediately and settles gently. Press play and watch which one feels like it heard you.
- Rule UI motion lives between 150 and 300ms
- Rule never animate keyboard-triggered actions
Springs
Springs can be caught mid-flight.
A spring has no fixed duration: it carries the velocity you give it and can be grabbed again at any moment. Fling the puck and catch it before it settles. Then lower the damping and feel the overshoot appear.
- Damping 1.0 settles with no bounce, right for most UI
- Damping 0.7 bounces, only after a real throw
Choreography
A group should move like one gesture.
When an item leaves, its space closes at the same time as it fades, not after. When new items arrive, the stagger shrinks as it goes and the lead travels furthest. Shuffle to watch every card glide to its new place.
- Rule product UI stagger: 30–80ms, under 300ms total
- Rule uniform stagger reads as a metronome
Vocabulary
Name it, then you can ask for it.
“Make it bouncy” gets you anything. “Pop in” gets you exactly this. Hover or tap a tile to play its effect.
Performance
Same motion, different engine.
Both bars move the same distance. The top one animates left, which needs the busy main thread every frame. The bottom one animates transform, which the GPU handles alone. Jam the main thread and see which one keeps going.
- Cheap transform, opacity, filter
- Costly width, height, top, left, margin
Touch
Feedback you can feel with your finger.
Gestures
Track 1:1, release with velocity.
The card follows your finger exactly, with no lag. Let go past the halfway point, or flick fast over a short distance, and it flies off at your speed. Drag up or down and it resists like rubber.
- Rule dismiss on distance or velocity
- Rule snap-back is fast, never sulky
Notifications
Toasts that stack, not pile up.
New toasts push older ones back into a neat stack. Hover the stack to fan it out, and swipe one away in the direction it came from. A promise toast morphs from loading to done in place.
- Rule enter and exit along the same path
- Rule pause timers while hovered
Systems
Design that survives real data and real goals.
Worst-case data
Demo data lies. Worst case tells the truth.
Every card looks perfect with “Jane Doe”. Flip to worst case: a long Malaysian name, a missing photo, exactly one project, a five-figure follower count, an empty bio. A well-built card bends without breaking.
- Tested long names wrap to 2 lines, then clamp
- Tested missing photo falls back to initials
- Tested “1 project”, not “1 projects”
Design modes
One product, four jobs.
Good design starts from the visitor's goal. A landing page must persuade, a dashboard must let you operate, docs must be read, a portfolio is experienced. Same coffee brand, four surfaces.
Single-origin · Roasted in Johor Bahru
Coffee that tastes like where it grew.
Small-batch beans from three Malaysian farms, roasted on Mondays, at your door by Thursday.
| Order | Customer | Roast | Total | Status |
|---|---|---|---|---|
| #2041 | Aina R. | Kluang Liberica | RM49.00 | Shipped |
| #2040 | Daniel T. | Ranau Arabica | RM98.00 | Roasting |
| #2039 | Mei Ling | Tenom Robusta | RM49.00 | Shipped |
Brew guide · 4 min read
Pour-over, the patient way
Start with 15 grams of coffee and 250 grams of water just off the boil. Bloom with 40 grams and wait thirty seconds while the grounds release their gas.
Then pour in slow circles, keeping the bed level, and aim to finish by two and a half minutes.
Data visualisation
Charts that read in one glance.
Label the lines directly instead of making you decode a legend. Use tabular numbers so values don't jiggle. Mute the gridlines. Hover to read exact values, and toggle a series to compare.
Sample numbers, for illustration only.
Taste
The difference between generic and considered.
Taste
Drag the line from slop to taste.
Same product, same information. On the left is the template look: purple gradient, emoji, “unlock your potential”, three identical feature cards. On the right, every choice is specific to the brand. Drag the handle.
Coffee that tastes like where it grew.
Three Malaysian farms. Roasted Mondays. At your door by Thursday.
Every principle
The whole kit, one line each.