> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Micro Transitions

> A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions

export const InstallCommand = ({command}) => {
  const [copied, setCopied] = React.useState(false);
  const copy = async () => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(command);
      } else {
        const previous = document.activeElement;
        const scratch = document.createElement("textarea");
        scratch.value = command;
        scratch.setAttribute("readonly", "");
        scratch.style.position = "fixed";
        scratch.style.opacity = "0";
        document.body.appendChild(scratch);
        scratch.select();
        document.execCommand("copy");
        document.body.removeChild(scratch);
        previous?.focus?.();
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };
  return <div className="hf-install-command not-prose my-4 flex items-stretch overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
      <code className="flex-1 overflow-x-auto whitespace-nowrap border-r border-zinc-200 px-4 py-3 font-mono text-sm text-zinc-800 dark:border-zinc-800 dark:text-zinc-100">
        {command}
      </code>
      <button type="button" onClick={copy} data-copied={copied ? "true" : "false"} aria-label={`Copy ${command} to the clipboard`} className="hf-install-copy">
        <svg className="hf-install-copy-clipboard" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" />
          <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" />
        </svg>
        <svg className="hf-install-copy-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M2.75 9.5L6.5 13.25L15.25 4.5" />
        </svg>
      </button>
      <span className="hf-install-copy-status" role="status" aria-live="polite">
        {copied ? "Copied" : ""}
      </span>
    </div>;
};

<iframe className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800" title="micro-transitions preview" loading="lazy" srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/micro-transitions.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png");document.body.appendChild(p)});<\/script></body></html>`} />

## Install

<InstallCommand command="npx hyperframes add micro-transitions" />

That writes one file: `compositions/components/micro-transitions.html`.

## Variables

Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:

| Variable  | Default    | Accepts                    | What it does                                                                |
| --------- | ---------- | -------------------------- | --------------------------------------------------------------------------- |
| `badge`   | `3`        | string                     | Count inside the notification badge on the bell.                            |
| `tooltip` | `Copied`   | string                     | Wording inside the small dark tooltip.                                      |
| `tone`    | `red`      | `red`, `amber`, `violet`   | Colour of the notification badge chip.                                      |
| `travel`  | `standard` | `close`, `standard`, `far` | Scales how far every panel starts from its resting place before it settles. |

Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:

```html wrap theme={null}
<div
  data-composition-id="micro-transitions"
  data-composition-src="compositions/components/micro-transitions.html"
  data-variable-values='{"badge":"3","tooltip":"Copied","tone":"red","travel":"standard"}'
></div>
```

## Source

<Accordion title={`micro-transitions.html`}>
  ```html theme={null}
  <!--
    Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.

    Includes six app-transition patterns in one copy-paste snippet:
      badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
      and success check draw.

    Animate --hf-micro-progress from 0 to 1, then optionally animate
    --hf-micro-tab from 0 to 1 for the segmented control.

    Variables. The script reads each one, falls back to the declared default on
    anything missing or unrecognised, and writes either the panel wording or a
    custom property the CSS below consumes. The two progress drivers above are
    untouched by them.

      - badge (any short text, default 3): the count inside the red chip on the
        bell. Blank or non-text input falls back to the default.
      - tooltip (any short text, default Copied): wording inside the small dark
        tooltip.
      - tone (red | amber | violet, default red): colour of that badge chip, the
        one accent-carrying element in the pack. red and amber are literal alert
        conventions; violet rides the composition's own accent-2 token and falls
        back to ink when the composition declares none.
      - travel (close | standard | far, default standard): scales how far every
        panel starts from its resting place, so the whole pack drifts half as far
        or nearly twice as far into position over the same progress run. At full
        progress each panel lands in exactly the same place.

    On every default the result is identical to the original: a red 3 on the
    bell, a Copied tooltip, and panels that rise between 6px and 18px.
  -->

  <div
    class="hf-micro-transitions"
    style="--hf-micro-progress: 0; --hf-micro-tab: 0"
    data-composition-variables='[
      {"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
      {"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
      {"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
      {"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
    ]'
  >
    <div class="hf-micro-bell"><span>3</span></div>
    <div class="hf-micro-dropdown">
      <strong>Actions</strong>
      <p>Export, duplicate, archive</p>
    </div>
    <div class="hf-micro-modal">
      <strong>Ready to publish?</strong><span>All checks passed.</span>
    </div>
    <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
    <div class="hf-micro-tooltip">Copied</div>
    <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
      <path d="M12 25l8 8 17-19" />
    </svg>
  </div>

  <style>
    .hf-micro-transitions {
      --hf-micro-progress: 0;
      --hf-micro-tab: 0;
      position: relative;
      width: min(640px, 100%);
      height: 360px;
      font-family: Inter, system-ui, sans-serif;
      color: #18181b;
    }
    .hf-micro-bell,
    .hf-micro-dropdown,
    .hf-micro-modal,
    .hf-micro-tabs,
    .hf-micro-tooltip,
    .hf-micro-check {
      position: absolute;
      will-change: transform, opacity;
    }
    .hf-micro-bell {
      top: 18px;
      left: 28px;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      background: #18181b;
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    }
    .hf-micro-bell::before {
      content: "";
      position: absolute;
      inset: 15px 17px 13px;
      border: 2px solid #fff;
      border-radius: 12px 12px 9px 9px;
    }
    .hf-micro-bell span {
      position: absolute;
      top: -8px;
      right: -8px;
      min-width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 3px solid #fff;
      border-radius: 999px;
      background: var(--hf-micro-badge, #ef4444);
      color: #fff;
      font-size: 12px;
      font-weight: 850;
      opacity: var(--hf-micro-progress);
      transform: translate(
          calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
          calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
        )
        scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
    }
    .hf-micro-dropdown {
      top: 92px;
      left: 28px;
      width: 210px;
      padding: 18px;
      border: 1px solid #e4e4e7;
      border-radius: 18px;
      background: #fff;
      opacity: var(--hf-micro-progress);
      transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
        scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
      transform-origin: top left;
      box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
    }
    .hf-micro-dropdown strong,
    .hf-micro-modal strong {
      display: block;
      font-size: 16px;
    }
    .hf-micro-dropdown p,
    .hf-micro-modal span {
      display: block;
      margin: 8px 0 0;
      color: #71717a;
      font-size: 13px;
      line-height: 1.4;
    }
    .hf-micro-modal {
      top: 48px;
      right: 34px;
      width: 260px;
      padding: 22px;
      border: 1px solid #e4e4e7;
      border-radius: 22px;
      background: #fff;
      opacity: var(--hf-micro-progress);
      transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
        scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
      box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
    }
    .hf-micro-tabs {
      left: 260px;
      bottom: 46px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      width: 210px;
      padding: 4px;
      border-radius: 14px;
      background: #f4f4f5;
      opacity: var(--hf-micro-progress);
      transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
    }
    .hf-micro-tabs i {
      position: absolute;
      top: 4px;
      left: 4px;
      width: calc((100% - 8px) / 2);
      height: calc(100% - 8px);
      border-radius: 11px;
      background: #fff;
      transform: translateX(calc(var(--hf-micro-tab) * 100%));
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }
    .hf-micro-tabs b {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      height: 38px;
      color: #52525b;
      font-size: 13px;
    }
    .hf-micro-tooltip {
      right: 54px;
      bottom: 48px;
      padding: 8px 11px;
      border-radius: 10px;
      background: #18181b;
      color: #fff;
      font-size: 12px;
      font-weight: 750;
      opacity: var(--hf-micro-progress);
      transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
        scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
    }
    .hf-micro-check {
      right: 116px;
      bottom: 92px;
      width: 48px;
      height: 48px;
      fill: none;
      stroke: currentColor;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: var(--hf-micro-progress);
    }
    .hf-micro-check path {
      stroke-dasharray: 42;
      stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
    }
  </style>

  <script>
    (function () {
      "use strict";

      var vars =
        window.__hyperframes && window.__hyperframes.getVariables
          ? window.__hyperframes.getVariables()
          : {};

      // Unrecognised overrides return to their declared defaults.
      function pick(table, value, fallback) {
        return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
      }

      function text(value, fallback) {
        return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
      }

      // The badge is the pack's one accent-carrying element. red and amber are
      // literal alert conventions; violet rides the composition's own token and
      // falls back to ink.
      var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
      var travels = { close: 0.5, standard: 1, far: 1.9 };

      var tone = tones[pick(tones, vars.tone, "red")];
      var travel = travels[pick(travels, vars.travel, "standard")];
      var badgeText = text(vars.badge, "3");
      var tooltipText = text(vars.tooltip, "Copied");

      var roots = document.querySelectorAll(".hf-micro-transitions");
      for (var i = 0; i < roots.length; i += 1) {
        var root = roots[i];
        root.style.setProperty("--hf-micro-badge", tone);
        root.style.setProperty("--hf-micro-travel", String(travel));
        var badge = root.querySelector(".hf-micro-bell span");
        var tooltip = root.querySelector(".hf-micro-tooltip");
        if (badge) badge.textContent = badgeText;
        if (tooltip) tooltip.textContent = tooltipText;
      }
    })();
  </script>

  <!--
    Timeline integration:
    tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
    tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
  -->
  ```
</Accordion>

## Usage

Open `compositions/components/micro-transitions.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

Tagged `transition-primitive` `motion-primitive` `transitions-dev-port` `ui` `transition` `microinteraction`.

## Related topics

* [Browse the complete Catalog](/catalog)
* [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
* [Build a richer composition](/go-further)


## Related topics

- [Transitions](/prompting/transitions.md)
- [Beat Accent](/catalog/components/beat-accent.md)
- [Dissolve Transitions](/catalog/blocks/transitions-dissolve.md)
