Screens push, typography types, cards slide. Think of a typewriter striking paper, or a person sliding a sheet across a table. Not a glass pane dissolving into another. We move with authority and confidence. No springs, no bounces, no parallax.
Three tools, in order of preference
Translate before opacity. Pair opacity with translate. Never a pure fade.
Use color transitions on state changes like hover and select. Duration is a consequence of distance and weight. Easing carries the feeling. Every animation in a Planetary Talent product should trace back to one of the four signature transitions below.
1
Objects, not pixels
A card is a piece of paper. It moves from somewhere, to somewhere. It never just appears.
2
Decelerate, don't overshoot
Paper has weight. It settles. No bounce, no spring, no elastic tail.
3
Motion signals state
If nothing changed, don't animate. If something changed, show it with a translation.
Durations
Five values. Every animation snaps to one.
Click any card to feel the duration.
Instant
80ms
Hover tint, chip press. Below this reads as a flash.
Fast
160ms
Button press, toggle flip, dropdown open.
Base
240ms
Default. Tabs, menus, card appearance. 80% of transitions.
Slow
400ms
Page push, sheet slide, modal enter.
Deliberate
640ms
Hero reveal, typewriter pace, section entrance.
Easings
Four named curves. Each has a physical reference.
Click a card to watch the paper slide on that curve.
paper
default
Paper slid across a table. Decelerates with a little grip. Settles, doesn't skid.
cubic-bezier(0.2, 0.7, 0.2, 1)
typewriter
reveal
Typewriter strike. Even, confident, no overshoot. Text reveals and steady entrances.
Standard exit. Ease-in-out for dismissals and element removal.
cubic-bezier(0.4, 0, 0.2, 1)
Four signature transitions
Learn these. Reuse them. Every animation traces back to one.
Step 1 of 3
About you
Name, role, where you're based.
Step 2 of 3
Your work
Three companies, three sentences each.
Paper push · page transition
Forward navigation pushes one page off and slides the next in from the right. Never a crossfade. The stack of paper is physical.
400ms · ease-paper · translateX 100%
Typewriter reveal
Typewriter · text reveal
Headlines type out character by character, about 28ms each, cursor blink after. Only for hero moments. Not every page title.
~28ms/char · ease-typewriter
Backend engineer
Series A fintech · Remote
Design lead
Y Combinator · SF
Card outline · hover
Cards don't move. They sharpen. A 1px border fades in on hover. The card stays put, attention shifts. Hover a card.
240ms · ease-paper · border-color only
Remote
Hybrid
On-site
Full-time
Contract
Chip tap · selection
Press squashes 4% on active, then snaps to the selected state. Confirms touch without being playful. Tap a chip.
80ms press · 160ms color · scale(0.96)
Never do this
Three patterns that read as digital. Weightless, slick, the opposite of paper.
Your match
No pure dissolves
Opacity alone reads as ghosting. Always pair with translate. Objects don't fade, they move.
Your match
No springs or bounces
Overshoot is digital candy. Paper doesn't wobble when it lands on a table.
Your match
No 3D tilt or parallax
We're in two dimensions. Perspective tricks read as hype, not quiet confidence.
Reduced motion
All transitions respect prefers-reduced-motion: reduce. Durations drop to 0ms and state changes swap instantly. Content never disappears. It just arrives without the motion.