Styles
Motion
One signature ease-out-expo curve, three durations, and the composed transition tokens.
The signature curve
--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)
A sharp ease-out-expo that settles slowly. Entrances fade up 24–60px with a 0.08–0.15s stagger. Hovers brighten borders and lift text — never scale down. Reduced motion collapses it all.
hover 0.3sstate 0.5sentrance 0.8s+
+0.00s
+0.12s
+0.24s
Tokens
tokens/motion.css| Token | Value | Usage |
|---|---|---|
| --ease-out-expo | cubic-bezier(0.16, 1, 0.3, 1) | The signature curve — everything uses it |
| --ease-standard | cubic-bezier(0.42, 0, 0.58, 1) | Loops only (scroll mouse) |
| --duration-fast | 0.3s | Hover |
| --duration-medium | 0.5s | State change |
| --duration-slow | 0.8s | Entrances |
| --transition-hover | all 0.5s var(--ease-out-expo) | Composed hover transition |
| --transition-border | border-color 0.3s var(--ease-out-expo) | Hairline brightening |
| --reveal-offset | 24px | Fade-up entrance distance |
| --media-hover-scale | 1.02 | Media zoom on hover |
// The site's entrance pattern (framer-motion):
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.8, delay: i * 0.12, ease: [0.16, 1, 0.3, 1] }}
/>
/* Or in plain CSS: */
.card { transition: var(--transition-hover); }