hyperframes/docs/catalog/components/overwhelm-surround.mdx

---
title: "Overwhelm Surround"
description: "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure."
mode: "frame"
---

import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
import { InstallCommand } from "/snippets/install-command.jsx";

<CatalogDetail
  previewSrc="/public/catalog/components/overwhelm-surround.json"
  compositionId="overwhelm-surround"
  compositionSrc="compositions/components/overwhelm-surround.html"
  title="Overwhelm Surround"
  description="Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure."
  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}]}
  meta={{"category":"Effects","badge":"Stable","codeLines":374}}
  attribution={{"path":"registry/components/overwhelm-surround","tags":["effects","agitate","overwhelm","pressure","notifications"]}}
  hasCode
  rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/overwhelm-surround/overwhelm-surround.html"
>

<CatalogSlot slot="code">

```html overwhelm-surround.html
<!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>
```

</CatalogSlot>

<CatalogSlot slot="install">

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

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

</CatalogSlot>

<CatalogSlot slot="docs">

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

{/* hf:generated-footer */}

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)

</CatalogSlot>

</CatalogDetail>