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

# Camera Scan Gate

> A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.

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

## Install

<InstallCommand command="npx hyperframes add camera-scan-gate" />

That writes one file: `compositions/components/camera-scan-gate.html`.

## Paste it into your composition

Open `compositions/components/camera-scan-gate.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                                                           |
| ------------- | -------------- | ----------------------- | ---------------------------------------------------------------------- |
| `scanColor`   | `var(--brand)` | string                  | Any CSS color value used by the scan line and recognition glow.        |
| `targetLabel` | `Verified`     | string                  | Confirmation label revealed at recognition lock. Blank hides the line. |
| `sweepSpeed`  | `1`            | 0.8x to 1.6x, step 0.1x | Speed multiplier for the scan sweep phase only.                        |

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="camera-scan-gate"
  data-composition-src="compositions/components/camera-scan-gate.html"
  data-variable-values='{"scanColor":"var(--brand)","targetLabel":"Verified","sweepSpeed":1}'
></div>
```

## Source

<Accordion title={`camera-scan-gate.html`}>
  ```html theme={null}
  <!doctype html>
  <!--
    camera-scan-gate -- HyperFrames video primitive (ui-props / interaction / demonstrate)

    Concept: a camera viewfinder scans once, tightens its four L-shaped corner
    brackets onto a detected target, then confirms recognition with a pulse,
    check flash, and target label. One mechanic, one job: demonstrate the causal
    scan -> lock -> confirmation gate that unlocks a product's next beat.

    Compiled-from evidence: SIM fixture; MOBILE mobile-inventory (scan-to-onboard
    and scan-to-pay moments in the video-primitives candidates card).

    Use when: a mobile product scene needs a camera, QR, identity, or payment
    recognition moment whose successful lock causes the following action. Skip
    it for passive camera decoration or a generic loading state.

    Variables (declared in data-composition-variables below):
      - scanColor (string, default "var(--brand)"): any CSS color value used by
        the scan line, lock brackets, and confirmation glow.
      - targetLabel (string, default "Verified"): label revealed at lock. Empty
        string hides the label line entirely.
      - sweepSpeed (number, default 1, range 0.8 to 1.6): scan sweep speed only.
        It changes the sweep start while its landing sync point stays fixed.

    Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
      IN_BASE  = 1.05s  stage settles, sweep lands, then recognition locks
      HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); a faint finite
                 frame glow breathes, or remains still when HOLD == 0
      OUT_BASE = 0.50s  resolved gate releases with a short fade
      If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
      and HOLD == 0.

    Sync points (fixed offsets into IN, never inside elastic HOLD):
      - scan-landed: 0.50s into unscaled IN, the --ease-standard sweep completes
      - recognition-lock: 0.68s into unscaled IN, brackets tighten with
        --ease-overshoot while confirmation and the target label fire
      Both offsets scale proportionally only when the full envelope compresses.

    Sound cue: a soft recognition chime fires at recognition-lock. The primitive
    never plays audio itself. It dispatches an `hf:sfx` CustomEvent
    ({ id: "lock-chime", t: LOCK_AT }) for the host mix stage to route.

    Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
    composition. A host loads it via data-composition-src; the runtime clones
    only <template> contents, so all live style, markup, and script stays inside
    the template. The root has no data-width/data-height and fills the host box
    with position:absolute, inset:0, and container-type:size. It is styled by
    #root because mounted CSS scoping would stop a root-class selector from
    matching the root itself. The hardcoded "camera-scan-gate" composition id
    is required because the mounted flattening step strips data-composition-id
    before this script registers its timeline. Variables are read through
    window.__hyperframes.getVariables(), which owns declared defaults merged
    with per-instance host overrides after mounting.
  -->
  <html
    lang="en"
    data-composition-variables='[
      { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
      { "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
      { "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
    ]'
  >
    <head>
      <meta charset="UTF-8" />
      <title>Camera Scan Gate</title>
      <!-- Metadata only. The loader reads variable declarations from this html
           element, while the mount runtime discards everything outside the
           template. -->
    </head>
    <body>
      <template>
        <div
          id="root"
          data-composition-id="camera-scan-gate"
          data-start="0"
          data-duration="4"
          data-fps="30"
        >
          <style>
            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            /* INVARIANT: the host owns dimensions. #root fills that box and
               establishes the cqw/cqh basis for every visible measurement. */
            #root {
              position: absolute;
              inset: 0;
              container-type: size;
              isolation: isolate;
              overflow: hidden;
              color: var(--fg, #f8fafc);
              font-family: var(--font-body, Inter, system-ui, sans-serif);
            }

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

            .csg-stage {
              position: relative;
              width: min(64cqw, 76cqh);
              aspect-ratio: 1;
              opacity: 0;
            }

            /* EDIT ZONE: the outer viewfinder is a square so one centered scale
               operation tightens all four brackets onto the target equally. */
            .csg-frame,
            .csg-corner-layer,
            .csg-scan-window {
              position: absolute;
              inset: 0;
            }

            .csg-frame {
              border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
              border-radius: var(--space-2, 2.4cqw);
              background: color-mix(in srgb, var(--surface, #1e293b) 34%, transparent);
              box-shadow: inset 0 0 5cqw color-mix(in srgb, var(--bg, #0b1120) 60%, transparent);
            }

            .csg-grid {
              position: absolute;
              inset: 0;
              border-radius: inherit;
              background-image:
                linear-gradient(
                  to right,
                  transparent 33%,
                  color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
                  transparent 33.25% 66.5%,
                  color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
                  transparent 66.75%
                ),
                linear-gradient(
                  to bottom,
                  transparent 33%,
                  color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
                  transparent 33.25% 66.5%,
                  color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
                  transparent 66.75%
                );
              opacity: 0.55;
            }

            .csg-ambient {
              position: absolute;
              inset: -4%;
              border: 0.45cqw solid
                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
              border-radius: var(--space-3, 3.2cqw);
              box-shadow: 0 0 4.5cqw
                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 38%, transparent);
              opacity: 0;
            }

            .csg-corner-layer {
              transform-origin: center;
              z-index: 3;
            }

            .csg-corner {
              position: absolute;
              width: 18%;
              height: 18%;
              border-color: var(--csg-scan-color, var(--brand, #22c55e));
              border-style: solid;
              filter: drop-shadow(
                0 0 0.9cqw
                  color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 56%, transparent)
              );
            }

            .csg-corner-tl {
              top: 0;
              left: 0;
              border-width: 0.65cqw 0 0 0.65cqw;
              border-radius: var(--space-2, 2.4cqw) 0 0;
            }

            .csg-corner-tr {
              top: 0;
              right: 0;
              border-width: 0.65cqw 0.65cqw 0 0;
              border-radius: 0 var(--space-2, 2.4cqw) 0 0;
            }

            .csg-corner-br {
              right: 0;
              bottom: 0;
              border-width: 0 0.65cqw 0.65cqw 0;
              border-radius: 0 0 var(--space-2, 2.4cqw);
            }

            .csg-corner-bl {
              bottom: 0;
              left: 0;
              border-width: 0 0 0.65cqw 0.65cqw;
              border-radius: 0 0 0 var(--space-2, 2.4cqw);
            }

            .csg-scan-window {
              z-index: 2;
              inset: 3.5%;
              overflow: hidden;
            }

            .csg-sweep {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
            }

            .csg-scan-line {
              position: absolute;
              inset: 0 0 auto;
              width: 100%;
              height: 0.38cqh;
              border-radius: 999cqw;
              background: var(--csg-scan-color, var(--brand, #22c55e));
              box-shadow:
                0 0 1.2cqw var(--csg-scan-color, var(--brand, #22c55e)),
                0 1.8cqh 3.6cqh
                  color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 42%, transparent);
            }

            .csg-target {
              position: absolute;
              z-index: 1;
              width: 60%;
              height: 60%;
              top: 20%;
              left: 20%;
              border: 0.2cqw solid
                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent);
              border-radius: var(--space-2, 2.4cqw);
              background: color-mix(
                in srgb,
                var(--csg-scan-color, var(--brand, #22c55e)) 7%,
                transparent
              );
              opacity: 0;
            }

            .csg-confirmation {
              position: absolute;
              z-index: 4;
              inset: 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: var(--space-2, 2.2cqh);
            }

            .csg-pulse {
              position: absolute;
              width: 30%;
              aspect-ratio: 1;
              border: 0.42cqw solid var(--csg-scan-color, var(--brand, #22c55e));
              border-radius: 50%;
              box-shadow: 0 0 4.5cqw
                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 58%, transparent);
              opacity: 0;
            }

            .csg-check {
              display: block;
              width: 8.5%;
              height: 15%;
              margin-top: -5%;
              border-right: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
              border-bottom: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
              filter: drop-shadow(
                0 0 1.1cqw
                  color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent)
              );
              opacity: 0;
              transform: rotate(45deg);
            }

            .csg-label {
              min-width: 34%;
              padding: var(--space-1, 1cqh) var(--space-3, 3cqw);
              border: 0.14cqw solid
                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
              border-radius: 999cqw;
              background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
              color: var(--fg, #f8fafc);
              font-family: var(--font-display, Inter, system-ui, sans-serif);
              font-size: clamp(2cqh, 2.8cqw, 3.3cqh);
              font-weight: 760;
              letter-spacing: 0.035em;
              line-height: 1.1;
              text-align: center;
              opacity: 0;
            }

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

          <div
            id="camera-scan-gate-clip"
            class="csg-clip clip"
            data-start="0"
            data-duration="4"
            data-track-index="0"
          >
            <div class="csg-stage" role="img" aria-label="Camera recognition scanner">
              <div class="csg-frame">
                <div class="csg-grid" aria-hidden="true"></div>
              </div>
              <div class="csg-ambient" aria-hidden="true"></div>
              <div class="csg-target" aria-hidden="true"></div>
              <div class="csg-scan-window" aria-hidden="true">
                <div class="csg-sweep">
                  <div class="csg-scan-line"></div>
                </div>
              </div>
              <div class="csg-corner-layer" aria-hidden="true">
                <span class="csg-corner csg-corner-tl"></span>
                <span class="csg-corner csg-corner-tr"></span>
                <span class="csg-corner csg-corner-br"></span>
                <span class="csg-corner csg-corner-bl"></span>
              </div>
              <div class="csg-confirmation">
                <span class="csg-pulse" aria-hidden="true"></span>
                <span class="csg-check" aria-hidden="true"></span>
                <span class="csg-label"></span>
              </div>
            </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 from the DOM. Mounted flattening strips the
              // root's data-composition-id before timeline registration.
              var compositionId = "camera-scan-gate";
              var stage = root.querySelector(".csg-stage");
              var cornerLayer = root.querySelector(".csg-corner-layer");
              var sweep = root.querySelector(".csg-sweep");
              var target = root.querySelector(".csg-target");
              var ambient = root.querySelector(".csg-ambient");
              var pulse = root.querySelector(".csg-pulse");
              var check = root.querySelector(".csg-check");
              var label = root.querySelector(".csg-label");

              // EDIT ZONE: declared defaults and per-instance overrides have one
              // owner after mount, window.__hyperframes.getVariables().
              var vars =
                window.__hyperframes && window.__hyperframes.getVariables
                  ? window.__hyperframes.getVariables()
                  : {};
              var scanColor =
                vars.scanColor == null || String(vars.scanColor).trim() === ""
                  ? "var(--brand)"
                  : String(vars.scanColor);
              var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
              var rawSweepSpeed = Number(vars.sweepSpeed);
              // INVARIANT: sweep speed is finite and clamped to the declared
              // 0.8 to 1.6 range. It never changes IN, HOLD, OUT, or sync points.
              var sweepSpeed = Number.isFinite(rawSweepSpeed)
                ? Math.max(0.8, Math.min(1.6, rawSweepSpeed))
                : 1;

              root.style.setProperty("--csg-scan-color", scanColor);
              label.textContent = targetLabel;

              var beatValue = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat"));
              var beat = Number.isFinite(beatValue) && beatValue > 0 ? beatValue : 0.5;
              var AMBIENT_HALF = beat * 1.5;

              // RETIME RANGE: IN_BASE and OUT_BASE own the interaction envelope.
              // The only elastic phase is HOLD. Short durations scale IN and OUT
              // together with one factor, never gsap.timeScale().
              var IN_BASE = 1.05;
              var OUT_BASE = 0.5;
              var STAGE_IN_BASE = 0.28;
              var SWEEP_DURATION_BASE = 0.4;
              var SWEEP_LANDS_BASE = 0.5;
              var LOCK_AT_BASE = 0.68;
              var LOCK_DURATION_BASE = 0.22;
              var CONFIRM_DURATION_BASE = 0.2;
              var PULSE_HALF_BASE = 0.18;

              var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
              var totalBase = IN_BASE + OUT_BASE;
              var scale = duration < totalBase ? duration / totalBase : 1;
              var IN = IN_BASE * scale;
              var OUT = OUT_BASE * scale;
              var STAGE_IN = STAGE_IN_BASE * scale;
              var SWEEP_LANDS = SWEEP_LANDS_BASE * scale;
              var SWEEP_DURATION = (SWEEP_DURATION_BASE / sweepSpeed) * scale;
              var SWEEP_START = Math.max(0, SWEEP_LANDS - SWEEP_DURATION);
              var LOCK_AT = LOCK_AT_BASE * scale;
              var LOCK_DURATION = LOCK_DURATION_BASE * scale;
              var CONFIRM_DURATION = CONFIRM_DURATION_BASE * scale;
              var PULSE_HALF = PULSE_HALF_BASE * scale;
              var HOLD = Math.max(0, duration - (IN + OUT));
              var HOLD_START = IN;
              var OUT_START = IN + HOLD;

              function fireSfx(id, t) {
                root.dispatchEvent(
                  new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
                );
              }

              // Explicit both-endpoints state before timeline construction keeps
              // direct seek to t=0 correct without playing through prior frames.
              gsap.set(stage, { opacity: 0, scale: 0.94 });
              gsap.set(cornerLayer, { scale: 1 });
              gsap.set(sweep, { opacity: 1, yPercent: 0 });
              gsap.set(target, { opacity: 0, scale: 0.96 });
              gsap.set(ambient, { opacity: 0, scale: 1 });
              gsap.set(pulse, { opacity: 0, scale: 0.9 });
              gsap.set(check, { opacity: 0, scale: 0.94 });
              gsap.set(label, { opacity: 0, y: "1.2cqh", scale: 0.96 });

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

              // IN: settle, scan, then lock. The sweep uses --ease-standard's
              // GSAP equivalent and lands at a fixed offset inside IN.
              tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
              tl.to(
                sweep,
                { yPercent: 100, duration: SWEEP_DURATION, ease: "power2.out" },
                SWEEP_START,
              );
              tl.set(sweep, { opacity: 0 }, SWEEP_LANDS);

              // recognition-lock is the single causal gate. Corner tightening is
              // the one moderate --ease-overshoot motion in this primitive.
              tl.to(
                cornerLayer,
                { scale: 0.6, duration: LOCK_DURATION, ease: "back.out(1.7)" },
                LOCK_AT,
              );
              tl.to(
                target,
                { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
                LOCK_AT,
              );
              tl.to(
                check,
                { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
                LOCK_AT,
              );
              tl.to(
                label,
                { opacity: 1, y: 0, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
                LOCK_AT,
              );
              tl.to(
                pulse,
                {
                  opacity: 0.9,
                  scale: 1.25,
                  duration: PULSE_HALF,
                  ease: "power2.out",
                  yoyo: true,
                  repeat: 1,
                },
                LOCK_AT,
              );
              // Side-effect invariant: this timeline callback is the only actor
              // that emits lock-chime, once at the recognition-lock sync point.
              tl.call(
                function () {
                  fireSfx("lock-chime", LOCK_AT);
                },
                [],
                LOCK_AT,
              );

              // HOLD: a separate layer breathes with a finite repeat count, so
              // the resolved gate stays alive without competing with lock tweens.
              if (HOLD > AMBIENT_HALF) {
                var ambientRepeat = Math.max(0, Math.floor(HOLD / AMBIENT_HALF) - 1);
                tl.to(
                  ambient,
                  {
                    opacity: 0.3,
                    scale: 1.015,
                    duration: AMBIENT_HALF,
                    ease: "sine.inOut",
                    yoyo: true,
                    repeat: ambientRepeat,
                  },
                  HOLD_START,
                );
              }

              // OUT: asymmetric release. HOLD alone absorbs duration changes.
              tl.to(stage, { opacity: 0, scale: 0.98, 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 `prop` `ui-props` `camera` `qr` `scan` `recognition` `interaction` `demonstrate`.

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

- [Scan Band](/catalog/components/scan-band.md)
- [Slit Scan Reveal](/catalog/components/slit-scan-reveal.md)
- [Camera Shake](/catalog/components/camera-shake.md)
