s3://rustfs-brand/motion/Guidelines · Motion

Motion动效

In order, predictable and finished on time; motion only explains change.

Easing standard · emphasized · exitDurations 80–720 msBrand moves Write · Heal

PrinciplesPrinciples

Write, don't float

Step in block by block; no floating or parallax.

Heal, don't hide

Missing, parity, rebuilt — all visible.

Exact, never elastic

Standard easings only; never bounce.

Can be turned off

Under reduced motion, show the final state.

EasingEasing

standard for most changes, emphasized to enter, exit to leave.

At 720ms

--ease-standardcubic-bezier(0.2, 0, 0, 1)

--ease-emphasizedcubic-bezier(0.16, 1, 0.3, 1)

--ease-exitcubic-bezier(0.4, 0, 1, 1)

linearlinear

DurationDuration

Interface ≤ 420ms; 720ms for brand moves only.

--duration-instant80ms

Press feedback, toggles

--duration-fast150ms

Hover, colour changes

--duration-base240ms

Disclosure, tabs, tooltips

--duration-slow420ms

Panels, drawers, page blocks

--duration-scene720ms

Brand moves, opening scenes

--duration-stagger40ms

Gap between shards

Brand movesBrand moves

Write and heal, taken from what RustFS does.

Write

Shards step in, 60ms apart.

steps(2) · 60 ms / shard · 3 stripes

Heal

A missing shard is rebuilt from parity.

0 → 700 ms missing · 1000 ms rebuild · ease-emphasized

video/

Logo sting

Full timeline on the Video page.

graphics/

Shard matrix

Hero matrices write in and heal in a loop.

Micro-interactionsMicro-interactions

Small, quick and consistent.

ButtonLifts 1px; a sheen sweeps across150 ms standard · 420 ms emphasized

docs/Read the docs

CardBorder turns foreground; arrow moves 2px240 ms standard

See the compatibility matrix

LinkUnderline grows left to right240 ms emphasized

Interaction	Change	Duration	Easing
Button hover	Lift 1px; sheen sweep	150 / 420 ms	standard / emphasized
Button press	Return and scale to 98.5%	80 ms	standard
Card hover	Border to foreground; arrow 2px	240 ms	standard / emphasized
Copy	Toast: “Copied”	240 ms	emphasized
Expand and collapse	Height and opacity together	240 ms	standard / exit
Loading	Shards write in a loop	60 ms / shard	steps(2)

ImplementationImplementation

Tokens ship in tokens/tailwind.css.

CSScss

:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwindhtml

<button class="transition-transform duration-(--duration-fast) ease-standard hover:-translate-y-px active:scale-[.985]">
  Download RustFS
</button>

<a class="group ... transition-colors duration-(--duration-base) ease-standard hover:border-foreground">
  <svg class="transition-transform ease-emphasized group-hover:translate-x-0.5" />
</a>

Honour prefers-reduced-motion; never flash over 3 Hz.