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

# Logo Wall

> A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.

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

## Install

<InstallCommand command="npx hyperframes add logo-wall" />

That writes one file: `compositions/components/logo-wall.html`.

## Paste it into your composition

Open `compositions/components/logo-wall.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                                   |
| --------- | ------- | ---------------------- | ---------------------------------------------- |
| `rows`    | `3`     | 2 to 4, step 1         | Number of logo rows in the wall.               |
| `cols`    | `5`     | 3 to 6, step 1         | Number of logo columns in the wall.            |
| `stagger` | `45`    | 20ms to 75ms, step 1ms | Delay between consecutive logo cell entrances. |

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="logo-wall"
  data-composition-src="compositions/components/logo-wall.html"
  data-variable-values='{"rows":3,"cols":5,"stagger":45}'
></div>
```

## Source

<Accordion title={`logo-wall.html`}>
  ```html theme={null}
  <!doctype html>
  <!--
    logo-wall: HyperFrames video primitive (data / holdable / prove)

    Concept: a trusted-by wall of placeholder lettermark logos assembles in DOM
    order. Each cell fades and scales directly into its final grid slot with a
    fixed per-cell delay. One mechanic, one job: prove trust through a collected
    wall of customer marks.

    Compiled-from evidence: consumer-sim fixture plus the grid-card-assemble
    blueprint's Social_Proof logo-wall variant. The blueprint requires a dense
    array to use short, slot-local entrances instead of a shared-center burst.

    Use when: a scene needs a compact trusted-by beat without using real brand
    assets or turning the wall into a feature-card showcase.

    Variables (declared in data-composition-variables below):
      - rows (number, default 3, range 2 to 4): visible logo rows.
      - cols (number, default 5, range 3 to 6): visible logo columns.
      - stagger (number, default 45, range 20 to 75 ms): fixed delay between
        consecutive cell entrances.

    Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
      IN_BASE  = 2.50s  ordered fade and scale assembly.
      HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
                 so the completed evidence wall remains readable.
      OUT_BASE = 0.50s  clean group fade.
      If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale down together so
      IN + OUT equals D and HOLD equals 0. The index-based stagger scales only in
      that compressed envelope.

    Sync point: none. The proof is distributed across per-cell arrivals, so no
    single fixed cue represents the assembly honestly.

    Sound cue: none. A distributed wall assembly has no truthful single-frame
    sound event, so this primitive does not dispatch hf:sfx.

    Mount contract: this file is a mountable sub-composition. A host loads it via
    data-composition-src, and the runtime clones only <template> contents. Styles,
    markup, GSAP, and registration therefore live inside <template>. #root fills
    the host with inset:0 and container-type:size and has no data-width or
    data-height. The hardcoded id "logo-wall" matches the host id and timeline
    key after mount flattening. Variables come from
    window.__hyperframes.getVariables(), which merges declarations with host
    data-variable-values overrides.
  -->
  <html
    lang="en"
    data-composition-variables='[
      { "id": "rows", "type": "number", "role": "layout", "label": "Rows", "description": "Number of logo rows in the wall.", "default": 3, "min": 2, "max": 4, "step": 1 },
      { "id": "cols", "type": "number", "role": "layout", "label": "Columns", "description": "Number of logo columns in the wall.", "default": 5, "min": 3, "max": 6, "step": 1 },
      { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive logo cell entrances.", "default": 45, "min": 20, "max": 75, "step": 1, "unit": "ms" }
    ]'
  >
    <head>
      <meta charset="UTF-8" />
      <title>Logo Wall</title>
      <!-- Metadata only. The loader reads declarations from <html>, then
           discards everything outside <template>. -->
    </head>
    <body>
      <template>
        <div id="root" data-composition-id="logo-wall" data-start="0" data-duration="5" data-fps="30">
          <style>
            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            /* Root fills the host box and consumes only the shared theme tokens.
               Every internal dimension is relative to this size container. */
            #root {
              position: absolute;
              inset: 0;
              container-type: size;
              isolation: isolate;
              overflow: hidden;
              color: var(--fg, #f5f6f8);
              font-family: var(--font-body, Inter, system-ui, sans-serif);
            }

            .lw-clip {
              width: 100%;
              height: 100%;
              display: grid;
              place-items: center;
              overflow: hidden;
              background: var(--bg, #0b0c10);
            }

            .lw-stage {
              width: 86cqw;
              height: 82cqh;
              display: grid;
              grid-template-rows: auto minmax(0, 1fr);
              gap: var(--space-3, 3cqh);
              padding: var(--space-3, 3cqh);
            }

            .lw-heading {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: var(--space-2, 1.6cqh);
              color: var(--muted, #8b8f9a);
              font-family: var(--font-display, Inter, system-ui, sans-serif);
              font-size: min(2.6cqw, 4.4cqh);
              font-weight: 650;
              letter-spacing: 0.08em;
              line-height: 1;
              text-transform: uppercase;
            }

            .lw-heading::before,
            .lw-heading::after {
              content: "";
              width: 8cqw;
              height: 0.14cqw;
              background: var(--border, #262931);
            }

            /* EDIT ZONE: grid geometry. rows and cols are the sole owners of
               track count. Spacing and surfaces remain theme-token driven. */
            .lw-grid {
              min-width: 0;
              min-height: 0;
              display: grid;
              grid-template-columns: repeat(var(--lw-cols), minmax(0, 1fr));
              grid-template-rows: repeat(var(--lw-rows), minmax(0, 1fr));
              gap: var(--space-2, 1.6cqh);
            }

            .lw-cell {
              min-width: 0;
              min-height: 0;
              display: grid;
              place-items: center;
              overflow: hidden;
              border: 0.14cqw solid var(--border, #262931);
              border-radius: var(--radius, 2cqw);
              background: var(--surface, #16181d);
              box-shadow: 0 1.2cqh 3cqh color-mix(in srgb, var(--bg, #0b0c10) 58%, transparent);
            }

            .lw-mark {
              display: grid;
              place-items: center;
              width: min(5.5cqw, 9.5cqh);
              aspect-ratio: 1;
              border-radius: calc(var(--radius, 2cqw) * 0.72);
              background: color-mix(in srgb, var(--fg, #f5f6f8) 72%, transparent);
              color: var(--bg, #0b0c10);
              font-family: var(--font-display, Inter, system-ui, sans-serif);
              font-size: min(2.2cqw, 4cqh);
              font-weight: 800;
              letter-spacing: -0.04em;
              line-height: 1;
            }
          </style>

          <div
            id="logo-wall-clip"
            class="lw-clip clip"
            data-start="0"
            data-duration="5"
            data-track-index="0"
          >
            <section class="lw-stage" aria-label="Trusted by logo wall">
              <div class="lw-heading">Trusted by teams</div>
              <div class="lw-grid"></div>
            </section>
          </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");
              var compositionId = "logo-wall";
              var stage = root.querySelector(".lw-stage");
              var grid = root.querySelector(".lw-grid");

              // EDIT ZONE: the runtime variable table is read once. These
              // clamped values own DOM count, grid tracks, and stagger timing.
              var vars =
                window.__hyperframes && window.__hyperframes.getVariables
                  ? window.__hyperframes.getVariables()
                  : {};

              var rawRows = Number(vars.rows);
              var rows = Number.isFinite(rawRows) ? Math.round(rawRows) : 3;
              rows = Math.max(2, Math.min(4, rows));

              var rawCols = Number(vars.cols);
              var cols = Number.isFinite(rawCols) ? Math.round(rawCols) : 5;
              cols = Math.max(3, Math.min(6, cols));

              var rawStagger = Number(vars.stagger);
              var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 45;
              staggerMs = Math.max(20, Math.min(75, staggerMs));

              var lettermarks = [
                "AX",
                "BL",
                "CY",
                "DQ",
                "EV",
                "FK",
                "GN",
                "HT",
                "IP",
                "JR",
                "KS",
                "LU",
                "MW",
                "NX",
                "OZ",
                "PA",
                "QC",
                "RF",
                "SG",
                "TJ",
                "VK",
                "WL",
                "XM",
                "YN",
              ];
              var cellCount = rows * cols;
              var fragment = document.createDocumentFragment();

              for (var index = 0; index < cellCount; index += 1) {
                var cell = document.createElement("div");
                var mark = document.createElement("span");
                cell.className = "lw-cell";
                cell.setAttribute("aria-hidden", "true");
                mark.className = "lw-mark";
                mark.textContent = lettermarks[index];
                cell.appendChild(mark);
                fragment.appendChild(cell);
              }

              grid.replaceChildren(fragment);
              grid.style.setProperty("--lw-rows", String(rows));
              grid.style.setProperty("--lw-cols", String(cols));

              var cells = root.querySelectorAll(".lw-cell");

              // RETIME RANGE: the 2.50s IN fits the largest public wall of 24
              // cells at the maximum 75ms stagger plus the 0.55s cell settle.
              // HOLD alone absorbs longer host durations.
              var IN_BASE = 2.5;
              var OUT_BASE = 0.5;
              var ASSEMBLE_START_BASE = 0.15;
              var CELL_DURATION_BASE = 0.55;

              var duration = Math.max(0.001, parseFloat(root.dataset.duration || "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 ASSEMBLE_START = ASSEMBLE_START_BASE * scale;
              var CELL_DURATION = CELL_DURATION_BASE * scale;
              var STAGGER_SECONDS = (staggerMs / 1000) * scale;

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

              // IN: deterministic DOM-order assembly. power2.out is the GSAP
              // owner of the shared --ease-standard entrance token.
              timeline.fromTo(
                cells,
                { opacity: 0, scale: 0.94 },
                {
                  opacity: 1,
                  scale: 1,
                  duration: CELL_DURATION,
                  ease: "power2.out",
                  stagger: { each: STAGGER_SECONDS, from: "start" },
                },
                ASSEMBLE_START,
              );

              // HOLD: deliberately still. OUT: the whole proof wall leaves once
              // with the production exit curve, never during the elastic hold.
              timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);

              timeline.seek(0);

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

Tagged `data` `logos` `social-proof` `stagger` `prove`.

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

- [Logo Outro](/catalog/blocks/logo-outro.md)
- [Text Clone Wall Transition](/catalog/blocks/mk-clone-wall-transition.md)
- [Logo Sting](/catalog/components/logo-sting.md)
