Interactive Widgets

Each widget uses a semantic easing token from the Easing tab. Open the panel and change an easing value to see motion update live.

Tabs

Active indicator slides using easing-tab-open (→ --zfbtw-easing-tab-open).

Accordion

Height transitions use easing-tab-open / easing-tab-close for open/close respectively (progressive enhancement, Chrome 131+).

What is a design token?

A design token is a named CSS custom property (e.g. --spacing-md: 1rem) that centralises a raw value behind a semantic name, making it easy to update globally.

Open timing: easing-tab-open → --zfbtw-easing-tab-open. Close timing: easing-tab-close → --zfbtw-easing-tab-close.

How does the panel update tokens live?

The panel writes :root overrides directly into the page via a <style> tag, so every Tailwind utility that references a --zfbtw-* var picks up the new value before the next paint — no rebuild required.

Open timing: easing-tab-open → --zfbtw-easing-tab-open. Close timing: easing-tab-close → --zfbtw-easing-tab-close.

Which easing tokens does this accordion use?

The open transition uses easing-tab-open and the close transition uses easing-tab-close. Change either in the Easing tab of the panel to see the effect here.

Open timing: easing-tab-open → --zfbtw-easing-tab-open. Close timing: easing-tab-close → --zfbtw-easing-tab-close.

Modal

Fade-and-scale animation uses easing-modal (→ --zfbtw-easing-modal). Close via button or Escape.