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 (→ --zfb-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 → --zfb-easing-tab-open. Close timing: easing-tab-close → --zfb-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 CSS selector that references a --zfb-* var picks up the new value before the next paint — no rebuild required.
Open timing: easing-tab-open → --zfb-easing-tab-open. Close timing: easing-tab-close → --zfb-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 → --zfb-easing-tab-open. Close timing: easing-tab-close → --zfb-easing-tab-close.
Modal
Fade-and-scale animation uses easing-modal (→ --zfb-easing-modal). Close via button or Escape.