Frequency of use
Also called animation frequency
The rule that the more often people see an animation, the shorter and subtler it should be, so everyday actions never feel slow.
import { useEffect, useState } from 'react';
import { Dialog } from '@base-ui/react/dialog';
const ACTIONS = [
'New project',
'Open settings',
'Invite people',
'Switch theme'
];
type CommandMenuProps = { onRun: (action: string) => void };
export function CommandMenu({ onRun }: CommandMenuProps) {
const [open, setOpen] = useState(false);
useEffect(() => {
function onKeyDown(event: KeyboardEvent) {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
setOpen((value) => !value);
}
}
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
}, []);
return (
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Trigger className='rounded-lg border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted'>
Quick actions <kbd className='ml-2 text-xs'>⌘K</kbd>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className='fixed inset-0 bg-black/20 transition-opacity duration-150 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:opacity-0' />
{/* Opened dozens of times a day, so it stays quick and quiet:
a 150ms fade with a barely visible scale in, a 100ms fade out. */}
<Dialog.Popup className='fixed top-24 left-1/2 w-96 max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-xl border bg-background p-2 shadow-xl outline-none transition-[opacity,scale] duration-150 ease-out data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-[0.98] data-starting-style:opacity-0'>
<Dialog.Title className='px-3 py-2 text-xs font-medium text-muted-foreground'>
Quick actions
</Dialog.Title>
{ACTIONS.map((action) => (
<Dialog.Close
key={action}
onClick={() => onRun(action)}
className='block w-full rounded-lg px-3 py-2 text-left text-sm outline-none hover:bg-muted focus-visible:bg-muted'
>
{action}
</Dialog.Close>
))}
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}Make the command palette feel instant because people open it constantly: fade it in and scale it from 0.98 to 1 over 150ms with an ease-out curve, and close it with a 100ms fade. Keep the longer, bouncy celebration animation only for the one-time onboarding finish screen.
Paste into Layerwise or any AI coding tool.
Frequency of use explained
Frequency of use is a guideline for deciding how much motion an interaction gets. Something people see once, like an onboarding screen or a launch celebration, can afford a longer, more expressive animation. Something people trigger dozens of times a day, like a command menu, a dropdown, or switching tabs, should be quick and quiet.
A 600ms bounce is delightful the first time. By the 50th time that day it adds up to 30 seconds of waiting, and people start to feel the interface is slow. For frequent actions, aim for 100 to 200ms with a simple fade or a small scale, or no animation at all for menus opened with a keyboard shortcut.
An easy way to decide: list how often each interaction happens, then give the rare moments personality and keep the frequent ones fast and consistent.
Often confused with
- Duration
- Duration is how long one animation lasts. Frequency of use is a reason to pick a shorter or longer duration.
Related terms
All termsDuration
The length of time an animation takes from start to finish, usually set in milliseconds. It decides whether motion feels snappy or sluggish.
Purposeful animation
Animation used only where it helps people notice a change, follow where something went, or understand what just happened.
Command palette
A search box that opens with a shortcut like ⌘K and lets you find and run any command or page by typing a few letters.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.