Tokens

The springs, durations, easings and delays every buttery animation is made of.

Motion tokens are the named springs, durations, easings and delays buttery animates with, such as spring.smooth or --bt-dur-fast. Use a token for every animation, so timings stay consistent and reduced motion can turn them all down at once.

Springs

Springs move things: positions, sizes and layouts. spring from @butteryui/core holds them for Motion, and useButteryTransition(name) returns one with reduced motion already applied.

import type { ReactElement } from "react";
import { motion } from "motion/react";
import { useButteryTransition } from "@butteryui/core";

export function SelectedMark({ x }: { readonly x: number }): ReactElement {
  const transition = useButteryTransition("snappy");
  return <motion.span animate={{ x }} transition={transition} />;
}

Durations, easings and delays

CSS transitions fade and recolor: opacity, colors and shadows. Each duration and easing is a CSS variable. Enters use --bt-ease-out, and exits --bt-ease-in.

--bt-dur-instant

0ms

--bt-dur-press

80ms

--bt-dur-reduced

100ms

--bt-dur-fast

120ms

--bt-dur-base

200ms

--bt-dur-slow

300ms

--bt-dur-shimmer

1600ms

--bt-ease-out

cubic-bezier(0.22, 1, 0.36, 1)

--bt-ease-in

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

--bt-ease-standard

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

The timing tokens hold the delays and lifetimes around a transition, such as how long the pointer rests before a menu opens, or how long a toast stays: