Motion

01Overview

Motion shows cause and effect: a menu grows from its trigger, a selected option fills in, a new lesson slides into a list. Nuton keeps it short and quiet, so it explains a change without slowing anyone down.

Pick a duration and an easing curve, then play the transition. The dot shows the curve's shape over time; the lesson card shows the same timing on real content.

import { tokens } from '@nuton/tokens'

const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
const timing: KeyframeAnimationOptions = {
  duration: reduce ? 0 : parseFloat(String(tokens['duration-base'].resolved)),
  easing: String(tokens['ease-standard'].resolved),
  fill: 'both',
}
const lift = String(tokens['space-2'].resolved)

card.animate([{ opacity: 0, transform: `translateY(${lift})` }, { opacity: 1, transform: 'translateY(0)' }], timing)

• Durations scale with the size of the change. Small state changes use --nu-duration-fast; larger surfaces step up.
• Easing gives motion its character. --nu-ease-standard starts quickly and settles gently, and it is the default.
• Reduced motion is honoured everywhere: when it's on, the change still happens, just without movement.

02Tokens

Generated from @nuton/tokens. Every value below is read from the package at build time.

Duration

Easing

Source: packages/tokens/src/code/motion.json, flagged nuton.codeOnly. Values were collected from nuton-teach (fade-in and slide-up) and the marketing site's most-used curves; a third marketing curve close to --nu-ease-standard is to be merged into it.

03Usage

Always pair a duration token with an easing token, and turn the motion off under prefers-reduced-motion.

/* After: import '@nuton/tokens/tokens.css' */
.lesson-card {
  transition:
    background-color var(--nu-duration-fast) var(--nu-ease-standard),
    box-shadow var(--nu-duration-fast) var(--nu-ease-standard);
}

.tutor-sheet {
  transition: transform var(--nu-duration-slow) var(--nu-ease-emphasized);
}

@media (prefers-reduced-motion: reduce) {
  .lesson-card, .tutor-sheet { transition: none; }
}

/* app.css */
@import 'tailwindcss';
@import '@nuton/tokens/tokens.css';
@import '@nuton/tokens/tailwind-v4.css'; /* adds ease-standard, ease-emphasized, ease-linear */

// The v4 theme has no duration names: pass the token as an arbitrary value.
<div className="transition-colors ease-standard duration-(--nu-duration-fast) motion-reduce:transition-none">
  Photosynthesis
</div>

// tailwind.config.js
module.exports = { presets: [require('@nuton/tokens/tailwind-v3-preset')] }

// Adds duration-fast, duration-base, duration-slow, duration-slower
// and ease-standard, ease-emphasized, ease-linear.
<div className="transition-colors duration-fast ease-standard motion-reduce:transition-none">
  Photosynthesis
</div>

import { tokens } from '@nuton/tokens'

// For the Web Animations API, read the resolved values; check reduced motion first.
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
panel.animate([{ opacity: 0 }, { opacity: 1 }], {
  duration: reduce ? 0 : parseFloat(String(tokens['duration-base'].resolved)),
  easing: String(tokens['ease-standard'].resolved),
})

transition-colors and motion-reduce: are Tailwind's own utilities. The Nuton names come from tailwind-v4-theme.css (easing only) and the v3 preset's transitionDuration and transitionTimingFunction.

Choosing a token

• Start with --nu-duration-fast and --nu-ease-standard. Step up only when the element is bigger or travels further.
• Animate opacity, transform and colours. Avoid animating size or layout, which is slower and makes content jump.
• Keep interface feedback at or below --nu-duration-base, so it never delays the next click.
• Use --nu-ease-linear only for loops and progress; it looks mechanical on things that start and stop.
• Never hard-code a duration or curve. If no token fits, raise it with the DS Owner.

04In use

Every @nuton/ui transition uses --nu-duration-fast with --nu-ease-standard. Hover, focus and open these to see it.

Button hover

Background, border and focus shadow change together. Point at a button, or tab to it.

/* Button.css */
.nu-button {
  transition:
    background-color var(--nu-duration-fast) var(--nu-ease-standard),
    border-color var(--nu-duration-fast) var(--nu-ease-standard),
    box-shadow var(--nu-duration-fast) var(--nu-ease-standard);
}

<Button appearance="stroke">Save draft</Button>
<Button trailingIcon={<RiArrowRightLine />}>Publish lesson</Button>

Menu opening

The menu fades in and scales up slightly from its trigger. Inside it, the switch thumb slides with the same timing.

/* Menu.css */
.nu-menu-content { animation: nu-menu-in var(--nu-duration-fast) var(--nu-ease-standard); }
@keyframes nu-menu-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button size="sm" appearance="stroke" leadingIcon={<RiMore2Line />}>Lesson options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Photosynthesis</DropdownMenuLabel>
    <DropdownMenuItem leading={<RiEditLine />} onSelect={rename}>Rename</DropdownMenuItem>
    <DropdownMenuItem leading={<RiFileCopyLine />} onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuSwitchItem leading={<RiBellLine />} checked={notify} onCheckedChange={setNotify}>
      Notify students
    </DropdownMenuSwitchItem>
  </DropdownMenuContent>
</DropdownMenu>

Selection and focus

Selecting a range fills the item in; focusing a field changes its border and shadow. Both use the fast duration.

<ButtonGroup size="xs" aria-label="Progress range">
  <ButtonGroupItem pressed={range === 'Day'} onClick={() => setRange('Day')}>Day</ButtonGroupItem>
  <ButtonGroupItem pressed={range === 'Week'} onClick={() => setRange('Week')}>Week</ButtonGroupItem>
  <ButtonGroupItem pressed={range === 'Month'} onClick={() => setRange('Month')}>Month</ButtonGroupItem>
</ButtonGroup>

<Field label="Space name" hint="For example, Biology 101.">
  <Input size="sm" />
</Field>

Motion in each component

05Accessibility

Motion must never be the only way a change is shown, and it must stop when people ask for less of it.

You must: add a prefers-reduced-motion: reduce rule for every transition you write; keep the end state visible without the animation; check reduced motion before starting Web Animations. The planned visual regression suite snapshots every component with reduced motion on (quality strategy).

06Guidelines and related

Do and don't

Related

• ElevationShadows for the menus and popovers that animate in.
• Layout and responsiveBreakpoints where panels become sheets and drawers.
• ButtonFast colour transitions and the loading spinner.
• Dropdown and selectMenus that fade and scale in from their trigger.
• Button groupSelection fills with the fast duration.