desingularity vol · 01 · motion
design system · v0.1
volume 01 · motion

Motion is
meaning in time.

Every curve in this system is φ-derived. Every duration is on the fibonacci ladder. Motion is never decoration — it is the grammar by which the interface speaks.

01 · curves

Five easings.

φ-derived control points
each named, each demoed
hover to replay
φ --e-phi
cubic-bezier 0.382 0 0.618 1
φ out --e-phi-out
exit motion 0.382 0 0.382 1
φ in --e-phi-in
entry motion 0.618 0 1 0.618
snap --e-snap
slight overshoot 0.5 1.6 0.5 1
glide --e-glide
smooth, no overshoot 0.2 0.8 0.2 1
linear --e-linear
spinners only linear
02 · durations

Six durations.

fibonacci ladder
240 · 382 · 618 · 1000 · 1618
hover to play
--d-instant 120ms
↻ replay
--d-flick 240ms
↻ replay
--d-base 382ms
↻ replay
--d-emph 618ms
↻ replay
--d-slow 1000ms
↻ replay
--d-reveal 1618ms
↻ replay
03 · the signature

The reveal.

our single most-used transition
fade + lift + φ-curve
1618ms · staggered

What it is.

three primitives, one motion.
opacity 0 → 1
translateY 24 → 0
--e-phi · 1618ms
chained by ~60ms stagger when siblings

01 · component Fade in
02 · component Lift up
03 · combined Reveal
03.01 Live · scroll-triggered reveal atom · the signature
scroll into view · 1618ms · e-phi

Every element on this page entered with the same motion. You probably didn't notice.

The signature transition is invisible by design. It is the way the interface breathes — not a feature, an atmosphere. Reload the page and watch the foundation strip on the index.

04 · transitions

Named transitions.

a curated set
each with a meaning
not a vocabulary contest
Slide rightt-01
navigate · forward
--d-emph e-phi
Slide upt-02
sheet · drawer
--d-emph e-phi
Pop int-03
toast · tooltip
--d-base e-snap
Scale upt-04
modal · palette
--d-base e-snap
Blur focust-05
page · enter
--d-emph e-phi
Rotate int-06
chip · toggle
--d-emph e-glide
05 · stagger

Chain, don't cascade.

60ms between siblings
fibonacci falloff
max 8 in a chain

The chain.

each child enters 60ms after the previous.
more than that and the chain feels slow.
less and it feels simultaneous.

06 · micro

Micro-interactions.

the language of feedback
each ≤ 240ms
each meaningful
Hover liftm-01
--d-base · e-phi · -3px
Underline revealm-02
read more
scaleX 0.382 → 1 · 382ms
Heartbeatm-03
scale 1 → 1.7 · 1.4s · loop
Spinnerm-04
rotate 360 · 1s · linear
Shimmerm-05
skeleton state · 1.6s loop
Cursor blinkm-06
type
opacity 1 ↔ 0 · 1s steps
Live dotm-07
live
scale 1 → 1.5 · pulse · 1.4s
Toggle flipm-08
translateX 16px · 240ms
07 · page

Page transitions.

how surfaces replace surfaces
preserve direction · preserve weight
slide · forward
A
B
--d-emph · e-phi
cross-fade
A
B
--d-base · linear
reveal up
A
B
--d-emph · e-phi
paprika · wipe
A
B
--d-slow · e-phi
08 · playground

The playground.

combine any curve + duration
tap a box. trigger a motion.
curve
duration
what to animate
spec · current
transition: transform
  618ms
  cubic-bezier(
    0.382, 0,
    0.618, 1
  );