Motion

Nothing in a dream ever snaps. Motion here is slow, fluid, and drifting — a language of loosened gravity and long, floating decelerations.

Easing

ease-driftsettles like something sinking in water

ease-fadesmooth, symmetrical crossfade

ease-sinkthe mirror of drift — accelerates quietly away

linear (don't)mechanical — nothing in a dream moves like this

ease-drift

cubic-bezier(0.16, 1, 0.3, 1)

The signature easing. A long, floating deceleration — like something settling in water. Entrances and hover drifts. (もっちり — heavy start, endless tail)

ease-fade

cubic-bezier(0.4, 0, 0.2, 1)

For opacity crossfades and gentle state changes. (ぬるっ — smooth, symmetrical)

ease-sink

cubic-bezier(0.7, 0, 0.84, 0)

The mirror of drift. Exits accelerate quietly away — sinking back into the void. (すっ… — gentle release, then gone)

Duration

A bespoke scale, named by feel — not a numeric ramp. Each name is a role: whispers shift color, drifts carry interaction, surfaces carry overlays, and dawn wakes the hero.

duration-whisper300ms

duration-drift500ms

duration-surface700ms

duration-rise1200ms

duration-dawn1600ms

duration-whisper

300ms

Color and opacity micro-shifts: link hovers, underlines, focus glows.

duration-drift

500ms

Interactive drift: hover lifts, presses, small state changes.

duration-surface

700ms

Overlays surfacing and melting: modals, toasts.

duration-rise

1200ms

Scroll reveals — content surfacing like a memory.

duration-dawn

1600ms

First paint. The hero waking up.

duration-breathe

3600ms

Ambient micro-loops: scroll hints, idle pulses. Fog cycles (30–50s) stay bespoke.

stagger-surface

120ms

Sibling delay when groups surface together — the page assembles itself gradually.

Principles

Drift, don't snap

Interactive feedback is a slow upward drift (duration-drift, 500ms), never a mechanical click. Hover states feel like objects loosening from gravity.

Enter slow, leave quiet

Motion is asymmetric. Entrances decelerate with ease-drift; exits accelerate away with ease-sink, its mirror. Things surface gently and sink back into the void.

Surface like a memory

Content enters with a long fade + rise (duration-rise to duration-dawn). Stagger siblings by --stagger-surface (120ms) so the page assembles itself gradually.

The fog never stops

Ambient layers loop on 30–50s cycles — slow enough to be felt, not watched. Under prefers-reduced-motion, the dream stands still.

Transform and opacity only

Every animation composites on the GPU. If a motion needs layout properties, redesign the motion.