Product recipes

Each recipe encodes the motion decisions one interface pattern needs — which direction it comes from, what its transform origin is, how much shorter the exit is — and nothing else.

Recipes provide state selectors, transition and animation behaviour, timing, easing, transform origin where the behaviour requires it, and reduced-motion handling.Recipes do not provide colors, typography, dimensions, spacing, shadows, component structure beyond the minimum the movement requires, framework components, or application state.

They read the same state contract as tm-presence-*, and an element with no recognised state is treated as open.

<div class="tm-menu rounded-lg border bg-white p-1 shadow-lg"
     data-state="open"
     data-side="bottom">
  …
</div>

180ms, scale from 0.96, and a transform origin taken from data-side. A menu should look like it comes out of its trigger, not out of its own middle.

`data-side`	`transform-origin`
`top`	`bottom center`
`bottom`	`top center`
`left`	`center right`
`right`	`center left`

The names follow the convention Radix UI, Base UI and Floating UI already emit.

Alignment is deliberately not mapped. transform-origin takes no logical keywords, so a data-align rule would hard-code left or right and break in right-to-left contexts. Positioning libraries already publish a resolved origin — pass it straight through with style="--tm-origin: var(--radix-popper-transform-origin)".

For a native [popover], use tm-native-popover instead: the browser handles the top layer and light dismiss.

Dialog

<div class="tm-dialog-backdrop fixed inset-0 bg-black/60" data-state="open"></div>
<div class="tm-dialog fixed inset-0 m-auto h-fit w-96 rounded-xl border bg-white p-6"
     role="dialog"
     data-state="open">
  …
</div>

Both halves move as one unit, so they share a duration (240ms) and an easing. Put the state attribute on both. For a <dialog> element use tm-native-dialog, which gets the backdrop and the top layer for free.

Toast

<div role="status" data-state="open" class="tm-toast rounded-lg border bg-white px-3 py-2 shadow">
  Changes saved
</div>

260ms, arriving from the edge it is anchored to. Toasts appear without being asked for, so the travel is short and the exit is quick.

Modifier	Arrives from
(default)	the inline-end edge, mirrored in RTL
`tm-toast-from-inline-start`	the inline-start edge, mirrored in RTL
`tm-toast-from-block-end`	below — for a bottom-centre stack
`tm-toast-from-block-start`	above — for a top-centre stack

role="status" is yours to add: motion is not an announcement.

<div role="tooltip" data-side="top" data-state="open"
     class="tm-tooltip rounded border bg-white px-2 py-1 text-sm shadow">
  Copy to clipboard
</div>

The fastest thing in the library: 120ms, a third of the usual travel, and a 60ms exit. A tooltip that takes 200ms to appear feels broken, because the pointer is already there. data-side sets the transform origin and the retreat direction — a tooltip above its trigger retreats upward, one below it downward.

Accordion

<div class="tm-accordion-panel" data-state="open">
  <div>
    …exactly one element child…
  </div>
</div>

Child contract: exactly one element child, which TailMotion clips. Text nodes and multiple children will not animate correctly. Wrap your content in a single <div>.

The 0fr → 1fr grid row is the one height animation CSS can express without measuring anything, so this needs no JavaScript and no fixed height. Support is Chrome 107, Safari 16, Firefox 66. Older browsers show and hide the panel without the height tween — open content is never hidden. For a <details> element use tm-native-disclosure.

Tabs

Two independent pieces, because they have different requirements. The panel cross-fade needs no measurement:

<div class="tm-tab-panel" data-state="active">…</div>
<div class="tm-tab-panel" data-state="inactive">…</div>

The indicator does need measurement, and that stays with your component:

<div className="relative flex">
  {tabs.map(...)}
  <div
    className="tm-tab-indicator absolute bottom-0 h-0.5 bg-black"
    style={{ "--tm-tab-offset": `${rect.left}px`, "--tm-tab-size": `${rect.width}px` }}
  />
</div>

TailMotion animates translate and inline-size between whatever two values you give it. It never reads the DOM — see the zero-runtime boundary.

Loading to success

<button data-state="loading" class="tm-feedback-button rounded-md bg-black px-4 py-2 text-white">
  <span class="tm-feedback-idle">Save</span>
  <span class="tm-feedback-loading">Saving</span>
  <span class="tm-feedback-success">Saved</span>
</button>

Child contract: one element per state, in any order, each carrying its state’s class — tm-feedback-idle, tm-feedback-loading, tm-feedback-success, and optionally tm-feedback-error.

All labels stay mounted and share one grid cell, so the button never resizes mid-transition and the outgoing label animates out as cleanly as the incoming one animates in. The state comes from data-state="idle" | "loading" | "success" | "error"; a button with no data-state shows the idle label. Success is the only state in the library that arrives with a spring, because it is the one moment in a form worth celebrating. --tm-overshoot: 0, or a calm profile, removes it.

Hold to confirm

<button class="tm-hold-confirm rounded-md border px-4 py-2 text-red-600">
  Hold to delete
</button>

A progress fill sweeps across the button while the pointer is held, and retreats in 160ms the moment it is released. Three things worth knowing:

Linear easing is correct here and almost nowhere else. The fill is a clock, and any other curve would misreport how much time is left.
The fill inherits the button’s own color through --tm-color at 18% opacity. TailMotion picks no red. overflow and isolation are set because the fill has to be clipped to the button’s box; your radius, padding and color stay yours.
It keeps its full duration under reduced motion, because it is a readout of elapsed time rather than decoration. Collapsing it to 1ms would confirm a destructive action the instant the button was touched.

Pair this with a key handler that sets data-state="holding" on keydown and removes it on keyup, or the interaction is pointer-only and inaccessible.

button.addEventListener("keydown", (e) => {
  if (e.key === " " || e.key === "Enter") button.dataset.state = "holding";
});
button.addEventListener("keyup", () => delete button.dataset.state);

Variable	Default
`--tm-hold-duration`	`1200ms`
`--tm-hold-release-duration`	`160ms`
`--tm-hold-fill`	`var(--tm-color, currentColor)`
`--tm-hold-fill-opacity`	`0.18`

The older tm-hold-delete still works and is unchanged. It chooses its own colors, padding and radius, which is exactly why tm-hold-confirm exists.

Recipe timing at a glance

Recipe	Open	Closed	Easing role
`tm-tooltip`	120ms	60ms	entrance / exit
`tm-tab-panel`	160ms	112ms	entrance / exit
`tm-menu`	180ms	126ms	entrance / exit
`tm-feedback-button`	220ms	220ms	entrance, emphasis on success
`tm-dialog` + backdrop	240ms	168ms	entrance / exit
`tm-toast`	260ms	182ms	entrance / exit
`tm-accordion-panel`	260ms	182ms	morph
`tm-tab-indicator`	260ms	—	morph
`tm-hold-confirm`	1200ms hold	160ms release	linear, on purpose

All of these scale with the motion profile and accept the usual tm-duration-* and --tm-exit-duration overrides.

Getting started

Concepts

Guides

Reference

Support

Menu and popover

Dialog

Toast

Tooltip

Accordion

Tabs

Loading to success

Hold to confirm

Recipe timing at a glance

​Menu and popover

​Dialog

​Toast

​Tooltip

​Accordion

​Tabs

​Loading to success

​Hold to confirm

​Recipe timing at a glance

Menu and popover

Dialog

Toast

Tooltip

Accordion

Tabs

Loading to success

Hold to confirm

Recipe timing at a glance