> ## 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.

# Overwhelm Surround

> Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.

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="overwhelm-surround 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/overwhelm-surround.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/overwhelm-surround.png");document.body.appendChild(p)});<\/script></body></html>`} />

## Install

<InstallCommand command="npx hyperframes add overwhelm-surround" />

That writes one file: `compositions/components/overwhelm-surround.html`.

## Paste it into your composition

Open `compositions/components/overwhelm-surround.html` and copy what is inside into your own composition.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

## 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                                                |
| ------------- | ------- | ------------------ | ----------------------------------------------------------- |
| `count`       | `16`    | 8 to 24, step 1    | Number of tasks and notifications crowding the center.      |
| `centerLabel` | `You`   | string             | Text inside the calm central subject. Blank hides the text. |
| `intensity`   | `1`     | 0.5 to 2, step 0.1 | How tightly and quickly the chips crowd the center.         |

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="overwhelm-surround"
  data-composition-src="compositions/components/overwhelm-surround.html"
  data-variable-values='{"count":16,"centerLabel":"You","intensity":1}'
></div>
```

## Source

<Accordion title={`overwhelm-surround.html`}>
  ```html theme={null}
  <!doctype html>
  <!--
    overwhelm-surround: HyperFrames video primitive (effects / holdable / agitate)

    Concept: tasks, tabs, pings, and notification bubbles fly inward from every
    edge and crowd a calm central subject. Pressure is spatial: the still center
    keeps the accumulating chaos legible. One mechanic, one job: agitate by
    surrounding the subject with too much at once.

    Compiled-from evidence: SIM fixture; CORPUS blueprint.

    Use when: a scene needs to show overload, mounting demands, notification
    pressure, or attention fragmentation while keeping one person or idea clear.

    Variables (declared in data-composition-variables below):
      - count (number, default 16): number of incoming chips, clamped to 8 through
        24. Higher values make the peak crowd visibly fuller.
      - centerLabel (string, default "You"): text inside the still subject. An
        empty string hides the text while preserving the subject shape.
      - intensity (number, default 1): pressure level, clamped to 0.5 through 2.
        Higher values pull the resting rings inward and shorten travel time.

    Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
      IN_BASE  = 2.20s  indexed arrivals accelerate as the crowd closes in
      HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete crowd
                 deliberately freezes around the still center at peak density
      OUT_BASE = 0.50s  the whole pressure field releases in a clean fade
      If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
      and HOLD == 0.

    Sync points: none. The accelerating cascade is the complete mechanic.

    Sound cue: none. This primitive does not dispatch audio events.

    Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
    composition. A host loads it via data-composition-src; the runtime only
    clones <template> contents (everything outside <template>, including the
    entire <head>, is discarded on mount), see
    skills/hyperframes-core/references/sub-compositions.md. The root carries no
    data-width/data-height: it is elastic, sized off whatever box the host clip
    gives it (position:absolute; inset:0; container-type:size), so the effect
    reads correctly whether the host mounts it into a 960x540 slot or a full
    1920x1080 frame. The root is styled by #root, never a class: composited
    renders scope this file's CSS to [data-composition-id="overwhelm-surround"],
    and a rule keyed on the root's own class would stop matching the root itself
    (sub-compositions.md, Pitfall 3). Variables are read via
    window.__hyperframes.getVariables() (not by parsing this file's own <html>
    tag at runtime): once mounted, document.documentElement is the HOST's <html>,
    so the loader's declared-defaults-plus-per-instance-overrides table is the
    only reliable source once the primitive is running inside a host page.
  -->
  <html
    lang="en"
    data-composition-variables='[
      { "id": "count", "type": "number", "role": "content", "label": "Chip count", "description": "Number of tasks and notifications crowding the center.", "default": 16, "min": 8, "max": 24, "step": 1 },
      { "id": "centerLabel", "type": "string", "role": "content", "label": "Center label", "description": "Text inside the calm central subject. Blank hides the text.", "default": "You" },
      { "id": "intensity", "type": "number", "role": "layout", "label": "Intensity", "description": "How tightly and quickly the chips crowd the center.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
    ]'
  >
    <head>
      <meta charset="UTF-8" />
      <title>Overwhelm Surround</title>
      <!-- Metadata only for whoever opens this file directly: the runtime
           discards everything outside <template> on mount. The
           data-composition-variables attribute above stays on <html> (not
           inside <template>): the loader reads declared variable defaults
           directly off the fetched document's root element, whether or not
           the body is template-wrapped. -->
    </head>
    <body>
      <template>
        <div id="root" data-composition-id="overwhelm-surround" data-duration="4.5" data-fps="30">
          <style>
            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
               whatever box the host clip gives it. container-type establishes
               the cqw/cqh basis for every internal measurement below. Styled by
               #root, never a class, see the mount-contract note above. */
            #root {
              position: absolute;
              inset: 0;
              container-type: size;
              isolation: isolate;
              overflow: hidden;
              background: var(--bg, #0b1120);
              color: var(--fg, #f8fafc);
              font-family: var(--font-body, Inter, system-ui, sans-serif);
            }

            .os-clip {
              position: relative;
              width: 100%;
              height: 100%;
              overflow: hidden;
            }

            .os-crowd {
              position: absolute;
              inset: 0;
              z-index: 2;
            }

            .os-chip {
              position: absolute;
              left: 50%;
              top: 50%;
              min-width: clamp(7cqw, 9.5cqw, 12cqw);
              min-height: clamp(5.5cqh, 7cqh, 9cqh);
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: var(--space-1, 1cqw);
              padding: var(--space-2, 1.4cqh) var(--space-3, 2cqw);
              border: 0.14cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
              border-radius: clamp(1.4cqw, 2.4cqw, 3.2cqw);
              background: color-mix(in srgb, var(--surface, #1e293b) 94%, var(--bg, #0b1120));
              color: var(--fg, #f8fafc);
              box-shadow:
                0 0.8cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 48%, transparent),
                inset 0 0 0 0.08cqw color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent);
              font-family: var(--font-display, Inter, system-ui, sans-serif);
              font-size: clamp(1.8cqw, 2.4cqw, 3.2cqw);
              font-weight: 700;
              letter-spacing: 0.01em;
              line-height: 1;
              white-space: nowrap;
              transform-origin: 50% 50%;
              will-change: transform, opacity;
            }

            .os-chip::before {
              content: "";
              width: clamp(1.2cqw, 1.7cqw, 2.2cqw);
              aspect-ratio: 1;
              flex: 0 0 auto;
              border-radius: 50%;
              background: var(--accent, #38bdf8);
              box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--accent, #38bdf8) 62%, transparent);
            }

            .os-chip[data-kind="alert"] {
              border-color: color-mix(in srgb, var(--brand, #22c55e) 62%, var(--border, #334155));
            }

            .os-chip[data-kind="alert"]::before {
              background: var(--brand, #22c55e);
              box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--brand, #22c55e) 62%, transparent);
            }

            .os-chip[data-kind="ping"] {
              border-radius: 50%;
              min-width: clamp(6cqw, 7.5cqw, 9cqw);
              min-height: auto;
              aspect-ratio: 1;
              padding: var(--space-2, 1.4cqh);
              color: var(--accent, #38bdf8);
            }

            .os-chip[data-kind="ping"]::before {
              display: none;
            }

            .os-center {
              position: absolute;
              left: 50%;
              top: 50%;
              z-index: 5;
              width: clamp(13cqw, 16cqw, 20cqw);
              aspect-ratio: 1.4 / 1;
              display: grid;
              place-items: center;
              border: 0.2cqw solid
                color-mix(in srgb, var(--accent, #38bdf8) 78%, var(--border, #334155));
              border-radius: clamp(2.2cqw, 3.4cqw, 4.5cqw);
              background: var(--surface, #1e293b);
              color: var(--fg, #f8fafc);
              box-shadow:
                0 0 0 0.75cqw color-mix(in srgb, var(--bg, #0b1120) 82%, transparent),
                0 1.2cqh 3.8cqh color-mix(in srgb, var(--accent, #38bdf8) 22%, transparent);
              font-family: var(--font-display, Inter, system-ui, sans-serif);
              font-size: clamp(2.5cqw, 3.6cqw, 4.8cqw);
              font-weight: 760;
              letter-spacing: -0.02em;
              line-height: 1;
              text-align: center;
              transform: translate(-50%, -50%);
            }

            .os-center-label:empty {
              display: none;
            }
          </style>

          <div
            id="overwhelm-surround-clip"
            class="os-clip clip"
            data-start="0"
            data-duration="4.5"
            data-track-index="0"
          >
            <div class="os-crowd" aria-hidden="true"></div>
            <div class="os-center" data-anchor="overwhelm-surround">
              <span class="os-center-label"></span>
            </div>
          </div>

          <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
          <script>
            (function () {
              "use strict";

              var root = document.getElementById("root");
              // Literal, not read off the DOM: once mounted, the framework's
              // flattening step strips data-composition-id from the mounted
              // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
              // packages/core/src/runtime/flattenedRoot.ts), so
              // root.getAttribute("data-composition-id") would read null post-
              // mount and silently register the timeline under the key "null"
              // instead of "overwhelm-surround". Matches the convention in
              // sub-compositions.md and empty.html: hardcode the id this file is
              // always mounted under.
              var compositionId = "overwhelm-surround";
              var clipEl = root.querySelector(".os-clip");
              var crowdEl = root.querySelector(".os-crowd");
              var centerEl = root.querySelector(".os-center");
              var centerLabelEl = root.querySelector(".os-center-label");

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

              // INVARIANT: one clamped value owns each visual decision. Empty
              // centerLabel remains distinct from a missing value.
              var countValue = Number(vars.count);
              var count = Math.round(
                Math.max(8, Math.min(24, Number.isFinite(countValue) ? countValue : 16)),
              );
              var centerLabel = vars.centerLabel == null ? "You" : String(vars.centerLabel);
              var intensityValue = Number(vars.intensity);
              var intensity = Math.max(
                0.5,
                Math.min(2, Number.isFinite(intensityValue) ? intensityValue : 1),
              );

              centerLabelEl.textContent = centerLabel;

              var labels = [
                "Inbox",
                "99+",
                "Due",
                "@you",
                "ASAP",
                "12",
                "Review",
                "!",
                "Call",
                "3 pings",
                "Sync",
                "Today",
                "Reply",
                "8 tabs",
                "Update",
                "Now",
                "Draft",
                "4 alerts",
                "Fix",
                "Follow up",
                "Queue",
                "2 min",
                "Waiting",
                "+7",
              ];
              var chips = [];

              for (var i = 0; i < count; i += 1) {
                var chip = document.createElement("div");
                chip.className = "os-chip";
                chip.dataset.kind = i % 5 === 1 ? "ping" : i % 3 === 0 ? "alert" : "task";
                chip.textContent = labels[i];
                crowdEl.appendChild(chip);
                chips.push(chip);
              }

              // RETIME RANGE: these constants own global phase pacing. HOLD is
              // the only elastic phase. IN and OUT scale together only when the
              // composition duration is shorter than their combined base time.
              var IN_BASE = 2.2;
              var OUT_BASE = 0.5;
              var TRAVEL_BASE = 0.54;
              var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
              var totalBase = IN_BASE + OUT_BASE;
              var scale = duration < totalBase ? duration / totalBase : 1;
              var IN = IN_BASE * scale;
              var OUT = OUT_BASE * scale;
              var HOLD = Math.max(0, duration - (IN + OUT));
              var OUT_START = IN + HOLD;
              var travelDuration = Math.min(IN, (TRAVEL_BASE * scale) / Math.sqrt(intensity));
              var arrivalSpan = Math.max(0, IN - travelDuration);
              var arrivalPower = 1.7 + intensity * 0.45;
              var pressure = (intensity - 0.5) / 1.5;

              // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
              // seek to t=0 is always correct without playing the timeline.
              gsap.set(centerEl, { xPercent: -50, yPercent: -50, opacity: 1, scale: 1 });
              gsap.set(clipEl, { opacity: 1 });

              var tl = gsap.timeline({ paused: true });

              chips.forEach(function (chip, index) {
                // Even angular distribution keeps every count deterministic and
                // balanced. Index-derived banding creates a compact cluster
                // without any random state.
                var angle = -Math.PI / 2 + (Math.PI * 2 * index) / count;
                var directionX = Math.cos(angle);
                var directionY = Math.sin(angle);
                var edgeScale = 0.64 / Math.max(Math.abs(directionX), Math.abs(directionY));
                var entryX = directionX * edgeScale * 100;
                var entryY = directionY * edgeScale * 100;
                var band = ((index * 5) % 7) / 6;
                var radiusX = 27 + band * 9 - pressure * (12 + band * 6);
                var radiusY = 25 + band * 10 - pressure * (11 + band * 6);
                var restX = directionX * radiusX;
                var restY = directionY * radiusY;
                var progress = index / (count - 1);
                var arrivalT = arrivalSpan * (1 - Math.pow(1 - progress, arrivalPower));
                var restRotation = ((index * 29) % 17) - 8;

                gsap.set(chip, {
                  x: entryX + "cqw",
                  y: entryY + "cqh",
                  xPercent: -50,
                  yPercent: -50,
                  scale: 0.94,
                  opacity: 0,
                  rotation: restRotation * 1.8,
                });

                tl.to(
                  chip,
                  {
                    x: restX + "cqw",
                    y: restY + "cqh",
                    scale: 1,
                    opacity: 1,
                    rotation: restRotation,
                    duration: travelDuration,
                    ease: "power2.out",
                  },
                  arrivalT,
                );
              });

              // HOLD: the peak-density crowd is deliberately still. The calm
              // center remains unchanged, making the surrounding pressure easy
              // to read even at the highest count and intensity.

              tl.to(clipEl, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);

              tl.seek(0);

              window.__timelines = window.__timelines || {};
              window.__timelines[compositionId] = tl;
            })();
          </script>
        </div>
      </template>
    </body>
  </html>
  ```
</Accordion>

Tagged `effects` `agitate` `overwhelm` `pressure` `notifications`.

## 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

- [Radial Surround](/catalog/components/radial-surround.md)
- [Color grading and film effects](/prompting/color-grading.md)
