(01)Finnian Wisak — Design / Motion / Code
Good designis fragile.
One pixel too far and it breaks. I design interfaces, animate them and write the code that holds them together — with care, and nothing more.
fig. 0132 × 40 px
(10)Selected work
(01)Finnian Wisak — Design / Motion / Code
One pixel too far and it breaks. I design interfaces, animate them and write the code that holds them together — with care, and nothing more.
Design isn't decoration. It's the decision about what to leave out. Motion isn't a show. It's the explanation of where things came from and where they're going. Code isn't the end of design. It's the material.
The smallest animations do the most work.
Nine interactions from the transitions.dev library, rebuilt with their real timings and set in pixels. They play themselves while you look — click any of them to play it yourself.
Timings are the original tokens: 250–500ms, ease-smooth-out cubic-bezier(.22,1,.36,1), bounces for things you touched.
One word. Eight ways to arrive.
Text is the most common thing on screen, so its motion matters most. These play one after another like a chorus — hover a tile to replay it.
Six of Disney’s twelve principles — with one pixel.
The rules from 1981 still decide whether an interface feels alive or robotic. Switch them off and feel the difference.
Same distance, same duration. Only the curve changes — and with it, the whole feeling. Pick one.
arrival · cubic-bezier(0.22, 1, 0.36, 1)
onion skin · 13 frames
live
144 elements, one gesture.
When many things move, the order matters more than the motion. Pick a pattern, tune the stagger — and watch the budget: past ~500ms a cascade stops feeling like one gesture.
144 elements · Ripplehover to replay
Thin is fragile. Heavy is loud. Most good things live in between.
fragile
CSS
font-variation-settings: "wght" 200; letter-spacing: -0.050em;
Pixels, with depth.
Pixel art pulled into the third dimension. A wave runs through it like a motion curve. Touch it and it leans towards you, click and it shatters, drag to spin. Fragile — but it always comes back.
three.js · hover · click · drag
Interfaces, motion, code — or all three. I reply within two working days.
