> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-fix-nested-composition-media-inpoint.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Blue Sweater Intro Video

> Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.

export const InstallCommand = ({command, item}) => {
  const [copied, setCopied] = React.useState(false);
  const [tuned, setTuned] = React.useState("");
  React.useEffect(() => {
    if (!item) return;
    const read = () => {
      try {
        const raw = new URLSearchParams(window.location.search).get(`vars-${item}`);
        if (!raw) return setTuned("");
        const parsed = JSON.parse(raw);
        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return setTuned("");
        if (Object.keys(parsed).length === 0) return setTuned("");
        setTuned(` --vars '${JSON.stringify(parsed)}'`);
      } catch {
        setTuned("");
      }
    };
    read();
    window.addEventListener("hf-vars-changed", read);
    window.addEventListener("popstate", read);
    return () => {
      window.removeEventListener("hf-vars-changed", read);
      window.removeEventListener("popstate", read);
    };
  }, [item]);
  const fullCommand = `${command}${tuned}`;
  const copy = async () => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(fullCommand);
      } else {
        const previous = document.activeElement;
        const scratch = document.createElement("textarea");
        scratch.value = fullCommand;
        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">
        {fullCommand}
      </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="blue-sweater-intro-video 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/blocks/blue-sweater-intro-video.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/blocks/blue-sweater-intro-video.png");document.body.appendChild(p)});<\/script></body></html>`} />

## Install

<InstallCommand command="npx hyperframes add blue-sweater-intro-video" item="blue-sweater-intro-video" />

That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.

## Source

<Accordion title={`blue-sweater-intro-video.html`}>
  ```html theme={null}
  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=1920, height=1080" />
      <title>Blue Sweater Intro Video</title>
      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
      <style>
        :root {
          --bg: #f7f1ef;
          --ink: #11110f;
          --muted: #807d76;
          --line: #dcd8cf;
          --panel: #fbfaf6;
          --claude: #c85f45;
          --orange: #c86532;
          --blue: #1486b8;
          --panel-shadow: rgba(36, 31, 24, 0.08);
        }

        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        html,
        body {
          width: 1920px;
          height: 1080px;
          overflow: hidden;
          background: var(--bg);
          color: var(--ink);
          font-family: "Helvetica Neue", Arial, sans-serif;
        }

        #root {
          position: relative;
          width: 1920px;
          height: 1080px;
          overflow: hidden;
          background: var(--bg);
          isolation: isolate;
        }

        .clip,
        .base {
          position: absolute;
          inset: 0;
          overflow: hidden;
        }

        .clip {
          opacity: 0;
        }

        .base {
          background: var(--bg);
          opacity: 1;
        }

        #burst {
          z-index: 6;
        }

        #brand {
          z-index: 5;
        }

        .scene-content {
          position: relative;
          display: flex;
          width: 100%;
          height: 100%;
          padding: 126px 160px 128px;
          align-items: center;
          justify-content: center;
        }

        .warm-block {
          width: 720px;
          height: 154px;
          background: var(--orange);
          border-radius: 6px;
          clip-path: polygon(2% 4%, 98% 0, 100% 88%, 96% 98%, 4% 94%, 0 12%);
        }

        .title {
          color: var(--ink);
          font-size: 100px;
          font-weight: 620;
          line-height: 0.92;
          letter-spacing: -0.055em;
          white-space: nowrap;
        }

        .wordmark {
          position: absolute;
          left: 50%;
          top: 50.5%;
          transform: translate(-50%, -50%);
          display: flex;
          align-items: baseline;
          gap: 19px;
          color: var(--ink);
          font-size: 88px;
          font-weight: 620;
          line-height: 0.9;
          letter-spacing: -0.058em;
          white-space: nowrap;
        }

        .brand-algrow {
          font-weight: 650;
        }

        .brand-claude {
          font-weight: 540;
        }

        .wordmark .brand-x {
          font-family: Georgia, "Times New Roman", serif;
          font-size: 0.84em;
          font-weight: 400;
          letter-spacing: -0.02em;
        }

        .cursor {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 20;
          width: 98px;
          height: 120px;
          opacity: 0;
          filter: drop-shadow(0 10px 22px rgba(20, 134, 184, 0.24));
          transform-origin: 13px 6px;
        }

        .cursor svg,
        .claude-star svg {
          display: block;
          width: 100%;
          height: 100%;
        }

        .claude-star {
          position: absolute;
          color: var(--claude);
        }

        .star-center {
          left: 960px;
          top: 530px;
          width: 150px;
          height: 150px;
          transform: translate(-50%, -50%);
        }

        .star-brand {
          left: 1084px;
          top: 482px;
          width: 24px;
          height: 24px;
        }

        .star-panel {
          left: 398px;
          top: 272px;
          width: 42px;
          height: 42px;
        }

        .burst-block {
          position: absolute;
          background: var(--orange);
          border-radius: 9px;
          clip-path: polygon(
            2% 8%,
            14% 4%,
            42% 5%,
            63% 2%,
            92% 5%,
            99% 12%,
            97% 88%,
            86% 96%,
            55% 94%,
            28% 98%,
            5% 92%,
            0 18%
          );
          z-index: 4;
          will-change: transform, opacity, filter;
        }

        .burst-a {
          left: 735px;
          top: 418px;
          width: 162px;
          height: 90px;
        }

        .burst-b {
          left: 920px;
          top: 414px;
          width: 172px;
          height: 92px;
        }

        .burst-c {
          left: 1300px;
          top: 420px;
          width: 96px;
          height: 92px;
        }

        .burst-d {
          left: 790px;
          top: 648px;
          width: 172px;
          height: 94px;
        }

        .burst-e {
          left: 1042px;
          top: 642px;
          width: 90px;
          height: 96px;
        }

        .burst-f {
          left: 1110px;
          top: 476px;
          width: 64px;
          height: 44px;
          opacity: 0;
        }

        .selection-box {
          position: absolute;
          left: 380px;
          top: 252px;
          width: 550px;
          height: 176px;
          border: 1px solid rgba(198, 173, 144, 0.32);
          background: rgba(228, 206, 181, 0.34);
          opacity: 0;
          transform-origin: 0 0;
          z-index: 1;
        }

        .intro-remnants {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
        }

        .intro-remnant {
          position: absolute;
          left: 50%;
          top: 50%;
          color: var(--ink);
          font-size: 100px;
          font-weight: 620;
          line-height: 0.92;
          letter-spacing: -0.055em;
          white-space: nowrap;
          opacity: 0;
          will-change: transform, opacity, filter;
        }

        .rem-a {
          margin-left: -220px;
          margin-top: -44px;
        }

        .rem-b {
          margin-left: -42px;
          margin-top: -42px;
        }

        .rem-c {
          margin-left: 155px;
          margin-top: -48px;
        }

        .rem-d {
          margin-left: -82px;
          margin-top: -4px;
        }

        .fragment-word {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
        }

        .frag {
          position: absolute;
          color: var(--ink);
          font-size: 88px;
          font-weight: 590;
          line-height: 0.9;
          letter-spacing: -0.055em;
          opacity: 0;
          white-space: nowrap;
          will-change: transform, opacity, filter;
        }

        .frag-alg {
          left: 649px;
          top: 484px;
        }

        .frag-row {
          left: 770px;
          top: 495px;
        }

        .frag-x {
          left: 932px;
          top: 484px;
        }

        .frag-clau {
          left: 1000px;
          top: 480px;
        }

        .frag-de {
          left: 1162px;
          top: 480px;
        }

        .final-wordmark {
          position: absolute;
          inset: 0;
          z-index: 3;
          color: var(--ink);
          opacity: 0;
          pointer-events: none;
          will-change: transform, opacity, filter;
        }

        .final-wordmark span {
          position: absolute;
          white-space: nowrap;
          line-height: 0.9;
        }

        .final-algrow {
          left: 690px;
          top: 484px;
          font-size: 88px;
          font-weight: 590;
          letter-spacing: -0.055em;
          transform: scaleX(1);
          transform-origin: 0 0;
        }

        .final-x {
          left: 884px;
          top: 484px;
          font-size: 88px;
          font-weight: 590;
          letter-spacing: -0.055em;
        }

        .final-claude {
          left: 955px;
          top: 480px;
          font-size: 88px;
          font-weight: 590;
          letter-spacing: -0.055em;
          transform: scaleX(1);
          transform-origin: 0 0;
        }

        .ui-content {
          align-items: center;
          justify-content: center;
        }

        .input-stack {
          position: relative;
          width: 1300px;
          height: 332px;
          transform-origin: 50% 50%;
        }

        .input-panel {
          position: absolute;
          left: 0;
          width: 100%;
          background: var(--panel);
          border: 1px solid var(--line);
          border-radius: 42px;
          box-shadow: 0 18px 50px var(--panel-shadow);
          opacity: 0;
        }

        .panel-empty {
          top: -54px;
          height: 306px;
          opacity: 1;
        }

        .panel-full {
          top: 0;
          height: 318px;
        }

        .panel-thinking {
          top: 7px;
          height: 304px;
        }

        .placeholder {
          position: absolute;
          left: 54px;
          top: 48px;
          color: var(--muted);
          font-size: 34px;
          line-height: 1.15;
          letter-spacing: -0.03em;
        }

        .prompt-text {
          position: absolute;
          left: 54px;
          right: 56px;
          top: 42px;
          bottom: 110px;
          color: var(--ink);
          font-size: 32px;
          font-weight: 400;
          line-height: 1.16;
          letter-spacing: -0.035em;
        }

        .prompt-text span {
          opacity: 0;
        }

        .panel-plus {
          position: absolute;
          left: 52px;
          bottom: 44px;
          width: 42px;
          height: 42px;
        }

        .panel-plus::before,
        .panel-plus::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: 34px;
          height: 2px;
          background: var(--ink);
          transform: translate(-50%, -50%);
        }

        .panel-plus::after {
          transform: translate(-50%, -50%) rotate(90deg);
        }

        .model {
          position: absolute;
          right: 126px;
          bottom: 48px;
          display: flex;
          align-items: center;
          gap: 16px;
          color: var(--ink);
          font-size: 30px;
          line-height: 1;
          letter-spacing: -0.045em;
        }

        .panel-empty .model {
          right: 78px;
        }

        .model .muted {
          color: var(--muted);
        }

        .chevron {
          width: 14px;
          height: 14px;
          border-right: 2px solid var(--muted);
          border-bottom: 2px solid var(--muted);
          transform: rotate(45deg) translateY(-5px);
        }

        .send-button {
          position: absolute;
          right: 42px;
          bottom: 38px;
          display: grid;
          place-items: center;
          width: 64px;
          height: 64px;
          border-radius: 17px;
          background: var(--claude);
          box-shadow: 0 10px 20px rgba(200, 95, 69, 0.18);
          opacity: 0;
          transform-origin: 50% 50%;
        }

        .panel-thinking .send-button {
          opacity: 1;
        }

        .send-button svg {
          width: 30px;
          height: 30px;
        }

        .thinking-line {
          position: absolute;
          left: 54px;
          top: 48px;
          display: flex;
          align-items: center;
          gap: 16px;
          color: var(--ink);
          font-size: 30px;
          line-height: 1;
          letter-spacing: -0.035em;
          opacity: 0;
        }

        .thinking-line .claude-star {
          position: relative;
          left: auto;
          top: auto;
          width: 24px;
          height: 24px;
        }

        .x-result {
          position: absolute;
          left: 54px;
          top: 44px;
          display: flex;
          align-items: center;
          gap: 18px;
          color: var(--ink);
          font-size: 30px;
          line-height: 1;
          letter-spacing: -0.035em;
          opacity: 0;
        }

        .x-trigger {
          display: grid;
          place-items: center;
          width: 48px;
          height: 48px;
          border-radius: 15px;
          background: var(--ink);
          color: var(--panel);
          font-size: 29px;
          font-weight: 680;
          letter-spacing: -0.06em;
          box-shadow: 0 14px 28px rgba(17, 17, 15, 0.18);
        }

        .social-card {
          position: absolute;
          left: 560px;
          top: 178px;
          width: 800px;
          height: 430px;
          border: 1px solid var(--line);
          border-radius: 36px;
          background: var(--panel);
          box-shadow: 0 28px 70px rgba(36, 31, 24, 0.13);
          opacity: 0;
          overflow: hidden;
          transform-origin: 50% 50%;
        }

        .social-card::before {
          content: "";
          position: absolute;
          inset: 0 0 auto;
          height: 150px;
          background: linear-gradient(135deg, rgba(20, 134, 184, 0.14), rgba(200, 95, 69, 0.12));
        }

        .social-x {
          position: absolute;
          right: 28px;
          top: 24px;
          display: grid;
          place-items: center;
          width: 44px;
          height: 44px;
          border-radius: 14px;
          background: var(--ink);
          color: var(--panel);
          font-size: 28px;
          font-weight: 680;
        }

        .social-avatar {
          position: absolute;
          left: 52px;
          top: 94px;
          width: 118px;
          height: 118px;
          border: 5px solid var(--panel);
          border-radius: 50%;
          object-fit: cover;
          object-position: 50% 50%;
          box-shadow: 0 18px 34px rgba(20, 134, 184, 0.2);
        }

        .social-name {
          position: absolute;
          left: 52px;
          top: 236px;
          color: var(--ink);
          font-size: 44px;
          font-weight: 620;
          line-height: 1;
          letter-spacing: -0.055em;
        }

        .social-handle {
          position: absolute;
          left: 52px;
          top: 288px;
          color: var(--muted);
          font-size: 26px;
          line-height: 1;
          letter-spacing: -0.025em;
        }

        .social-bio {
          position: absolute;
          left: 52px;
          right: 52px;
          top: 334px;
          color: var(--ink);
          font-size: 25px;
          line-height: 1.16;
          letter-spacing: -0.035em;
        }

        .follow-button {
          position: absolute;
          right: 46px;
          top: 236px;
          display: grid;
          place-items: center;
          width: 174px;
          height: 54px;
          border-radius: 18px;
          background: var(--ink);
          color: var(--panel);
          font-size: 24px;
          font-weight: 620;
          letter-spacing: -0.035em;
          overflow: hidden;
          transform-origin: 50% 50%;
        }

        .follow-label {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          inset: 0;
          white-space: nowrap;
        }

        .follow-label-following {
          opacity: 0;
        }

        .follow-check {
          display: block;
          width: 20px;
          height: 20px;
        }

        .follow-check svg {
          display: block;
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div
        id="root"
        data-composition-id="blue-sweater-intro-video"
        data-start="0"
        data-duration="12"
        data-width="1920"
        data-height="1080"
      >
        <div
          id="base"
          class="clip base"
          data-start="0"
          data-duration="12"
          data-track-index="0"
          style="z-index: 0"
        ></div>

        <div
          id="warmup"
          class="clip"
          data-start="0"
          data-duration="0.48"
          data-track-index="1"
          style="z-index: 2"
        >
          <div class="scene-content">
            <div id="warmBlock" class="warm-block"></div>
          </div>
        </div>

        <div
          id="intro"
          class="clip"
          data-start="0.38"
          data-duration="1.28"
          data-track-index="2"
          style="z-index: 3"
        >
          <div class="scene-content">
            <h1 id="introTitle" class="title">Introducing</h1>
          </div>
        </div>

        <div
          id="burst"
          class="clip"
          data-start="1.38"
          data-duration="1.54"
          data-track-index="3"
          style="z-index: 4"
        >
          <div class="scene-content">
            <div class="selection-box"></div>
            <div class="intro-remnants" aria-hidden="true">
              <span class="intro-remnant rem-a">Intro</span>
              <span class="intro-remnant rem-b">ducin</span>
              <span class="intro-remnant rem-c">g</span>
              <span class="intro-remnant rem-d">tro</span>
            </div>
            <div class="burst-block burst-a"></div>
            <div class="burst-block burst-b"></div>
            <div class="burst-block burst-c"></div>
            <div class="burst-block burst-d"></div>
            <div class="burst-block burst-e"></div>
            <div class="burst-block burst-f"></div>
            <div class="claude-star star-center burst-star" aria-hidden="true">
              <svg viewBox="-50 -50 100 100">
                <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
                  <line x1="0" y1="-38" x2="0" y2="38" />
                  <line x1="-38" y1="0" x2="38" y2="0" />
                  <line x1="-27" y1="-27" x2="27" y2="27" />
                  <line x1="-27" y1="27" x2="27" y2="-27" />
                  <line x1="-14" y1="-35" x2="14" y2="35" />
                  <line x1="-35" y1="-14" x2="35" y2="14" />
                </g>
              </svg>
            </div>
          </div>
        </div>

        <div
          id="brand"
          class="clip"
          data-start="2.04"
          data-duration="1.04"
          data-track-index="4"
          style="z-index: 5"
        >
          <div class="scene-content">
            <div class="fragment-word" aria-hidden="true">
              <span class="frag frag-alg">blu</span>
              <span class="frag frag-row">e</span>
              <span class="frag frag-x">x</span>
              <span class="frag frag-clau">swea</span>
              <span class="frag frag-de">ter</span>
            </div>
            <div class="final-wordmark" aria-hidden="true">
              <span class="final-algrow">blue</span>
              <span class="final-x">x</span>
              <span class="final-claude">sweater</span>
            </div>
          </div>
        </div>

        <div
          id="ui"
          class="clip"
          data-start="2.76"
          data-duration="9"
          data-track-index="5"
          style="z-index: 6"
        >
          <div class="scene-content ui-content">
            <div class="claude-star star-panel" aria-hidden="true">
              <svg viewBox="-50 -50 100 100">
                <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
                  <line x1="0" y1="-38" x2="0" y2="38" />
                  <line x1="-38" y1="0" x2="38" y2="0" />
                  <line x1="-27" y1="-27" x2="27" y2="27" />
                  <line x1="-27" y1="27" x2="27" y2="-27" />
                  <line x1="-14" y1="-35" x2="14" y2="35" />
                  <line x1="-35" y1="-14" x2="35" y2="14" />
                </g>
              </svg>
            </div>

            <div class="input-stack">
              <div class="input-panel panel-empty">
                <div class="placeholder">How can I help you today?</div>
                <div class="panel-plus"></div>
                <div class="model">
                  <span>Opus 5.0 <span class="muted">Extended</span></span>
                  <span class="chevron"></span>
                </div>
              </div>

              <div class="input-panel panel-full">
                <div id="promptText" class="prompt-text">
                  Recommend one X creator who actively explores AI technology and, like me, is
                  building an AI startup. I want someone practical, curious, and worth following.
                </div>
                <div class="panel-plus"></div>
                <div class="model">
                  <span>Opus 5.0 <span class="muted">Extended</span></span>
                  <span class="chevron"></span>
                </div>
                <div id="sendFull" class="send-button" aria-hidden="true">
                  <svg viewBox="0 0 32 32" fill="none">
                    <path
                      d="M16 25V8M16 8L9 15M16 8L23 15"
                      stroke="#FBFAF6"
                      stroke-width="3.3"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>

              <div class="input-panel panel-thinking">
                <div class="thinking-line">
                  <span class="claude-star" aria-hidden="true">
                    <svg viewBox="-50 -50 100 100">
                      <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
                        <line x1="0" y1="-38" x2="0" y2="38" />
                        <line x1="-38" y1="0" x2="38" y2="0" />
                        <line x1="-27" y1="-27" x2="27" y2="27" />
                        <line x1="-27" y1="27" x2="27" y2="-27" />
                        <line x1="-14" y1="-35" x2="14" y2="35" />
                        <line x1="-35" y1="-14" x2="35" y2="14" />
                      </g>
                    </svg>
                  </span>
                  <span>thinking</span>
                </div>
                <div class="x-result">
                  <span class="x-trigger">x</span>
                  <span>Open the recommended X profile</span>
                </div>
                <div class="panel-plus"></div>
                <div class="model">
                  <span>Opus 5.0 <span class="muted">Extended</span></span>
                  <span class="chevron"></span>
                </div>
                <div class="send-button" aria-hidden="true">
                  <svg viewBox="0 0 32 32" fill="none">
                    <path
                      d="M16 25V8M16 8L9 15M16 8L23 15"
                      stroke="#FBFAF6"
                      stroke-width="3.3"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="social-card" aria-hidden="true">
              <div class="social-x">x</div>
              <img class="social-avatar" src="assets/joe-sai-avatar.png" alt="" />
              <div class="social-name">joe sai</div>
              <div class="social-handle">@_blue_sweater_</div>
              <div class="follow-button">
                <span class="follow-label follow-label-follow">Follow</span>
                <span class="follow-label follow-label-following">
                  <span>Following</span>
                  <span class="follow-check" aria-hidden="true">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="#FBFAF6"
                      stroke-width="2.8"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </span>
                </span>
              </div>
              <div class="social-bio">
                Exploring AI technology and building an AI startup in public.
              </div>
            </div>
          </div>
        </div>

        <div
          id="cursor"
          class="clip cursor"
          data-start="0"
          data-duration="12"
          data-track-index="9"
          aria-hidden="true"
          style="z-index: 20"
        >
          <svg viewBox="0 0 98 120" fill="none">
            <path
              d="M13 6L86 80L51 85L35 114L13 6Z"
              fill="#1486B8"
              stroke="#F7F5EF"
              stroke-width="7"
              stroke-linejoin="round"
            />
          </svg>
        </div>

        <audio
          id="audio-mix"
          data-start="0"
          data-duration="12"
          data-track-index="20"
          src="assets/sfx/integrated-melodic-tech-mix.wav"
          data-volume="1"
        ></audio>
      </div>

      <script>
        window.__timelines = window.__timelines || {};

        const promptEl = document.querySelector("#promptText");
        const promptText = promptEl.textContent.replace(/\s+/g, " ").trim();
        promptEl.textContent = "";
        for (const char of promptText) {
          const span = document.createElement("span");
          span.textContent = char;
          promptEl.appendChild(span);
        }

        const tl = gsap.timeline({ paused: true, defaults: { ease: "power3.out" } });

        tl.set(["#warmup", "#intro", "#burst", "#brand", "#ui"], { opacity: 0 });
        tl.set("#cursor", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });
        tl.set(".panel-full", { opacity: 0 });
        tl.set(".panel-thinking", { opacity: 0 });
        tl.set(".prompt-text span", { opacity: 0 });
        tl.set("#sendFull", { opacity: 0, scale: 0.84 });
        tl.set([".selection-box", ".intro-remnant", ".frag", ".final-wordmark"], { opacity: 0 });
        tl.set([".x-result", ".social-card"], { opacity: 0 });
        tl.set(".x-trigger", { scale: 1 });

        tl.to("#warmup", { opacity: 1, duration: 0.01 }, 0);
        tl.fromTo(
          "#warmBlock",
          { x: -820, scaleX: 0.42, opacity: 0, filter: "blur(14px)" },
          { x: -25, scaleX: 1, opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power2.out" },
          0.02,
        );
        tl.to(
          "#warmBlock",
          { x: 620, opacity: 0, filter: "blur(18px)", duration: 0.24, ease: "power2.in" },
          0.25,
        );
        tl.to("#warmup", { opacity: 0, duration: 0.08 }, 0.4);

        tl.to("#intro", { opacity: 1, duration: 0.1 }, 0.44);
        tl.fromTo(
          "#introTitle",
          { opacity: 0, y: 26, filter: "blur(10px)" },
          { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.46, ease: "expo.out" },
          0.48,
        );
        tl.to("#cursor", { opacity: 1, duration: 0.12 }, 0.44);
        tl.to(
          "#cursor",
          { x: 942, y: 604, rotation: -3, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
          0.44,
        );
        tl.to(
          "#cursor",
          { x: 982, y: 642, rotation: -6, duration: 0.24, ease: "power2.inOut", overwrite: "auto" },
          1.28,
        );
        tl.to(
          "#introTitle",
          { opacity: 0.26, filter: "blur(4px)", duration: 0.03, ease: "power2.in" },
          1.43,
        );
        tl.fromTo(
          ".intro-remnant",
          { opacity: 0, x: 0, y: 0, filter: "blur(2px)" },
          {
            opacity: 0.32,
            x: (index) => [-22, 8, 32, -10][index],
            y: (index) => [-10, 5, -18, 28][index],
            filter: "blur(7px)",
            duration: 0.055,
            stagger: 0.004,
            ease: "power2.out",
          },
          1.435,
        );
        tl.to(
          "#introTitle",
          { opacity: 0, y: -8, filter: "blur(10px)", duration: 0.08, ease: "power2.in" },
          1.47,
        );
        tl.to(
          ".intro-remnant",
          { opacity: 0, filter: "blur(11px)", duration: 0.07, ease: "power2.in" },
          1.49,
        );
        tl.to("#intro", { opacity: 0, duration: 0.06 }, 1.56);

        tl.to("#burst", { opacity: 1, duration: 0.02 }, 1.4);
        tl.fromTo(
          ".burst-star",
          { opacity: 0, scale: 0.08, rotation: -20 },
          { opacity: 1, scale: 0.16, rotation: -6, duration: 0.08, ease: "power2.out" },
          1.43,
        );
        tl.to(
          ".burst-star",
          { scale: 1, rotation: 0, duration: 0.42, ease: "expo.out", overwrite: "auto" },
          1.55,
        );
        const blockPaths = [
          {
            source: [-1, 28],
            scatter: [-160, -96],
            drift: [-151, -126],
            select: [-82, -86],
            squeeze: [19, -68],
            release: [19, -68],
            fade: 2.17,
          },
          {
            source: [-11, 5],
            scatter: [165, -123],
            drift: [153, -126],
            select: [61, -118],
            squeeze: [-81, -65],
            release: [-81, -65],
            fade: 2.17,
          },
          {
            source: [-3, -8],
            scatter: [169, -28],
            drift: [174, -24],
            select: [127, 9],
            squeeze: [37, 70],
            release: [-78, 96],
            fade: 2.33,
          },
          {
            source: [-9, 2],
            scatter: [-153, 80],
            drift: [-157, 76],
            select: [-133, 39],
            squeeze: [-90, -40],
            release: [-90, -40],
            fade: 2.17,
          },
          {
            source: [-7, -13],
            scatter: [-10, 129],
            drift: [-17, 128],
            select: [-38, 83],
            squeeze: [-67, -18],
            release: [-92, -87],
            fade: 2.33,
          },
        ];
        gsap.utils.toArray(".burst-block").forEach((block, index) => {
          const path = blockPaths[index];
          if (!path) {
            tl.set(block, { opacity: 0 });
            return;
          }
          tl.set(
            block,
            {
              x: path.source[0],
              y: path.source[1],
              scale: 0.78,
              rotation: index % 2 ? 3 : -3,
              filter: "blur(8px)",
            },
            1.45,
          );
          tl.to(
            block,
            {
              opacity: 1,
              scale: 1,
              rotation: 0,
              filter: "blur(0px)",
              duration: 0.055,
              ease: "power3.out",
            },
            1.455,
          );
          tl.to(
            block,
            {
              x: path.scatter[0],
              y: path.scatter[1],
              rotation: index % 2 ? 2 : -2,
              duration: 0.2,
              ease: "sine.out",
            },
            1.5,
          );
          tl.to(
            block,
            {
              x: path.drift[0],
              y: path.drift[1],
              rotation: index % 2 ? 1 : -1,
              duration: 0.2,
              ease: "sine.inOut",
            },
            1.7,
          );
          tl.to(
            block,
            { x: path.select[0], y: path.select[1], rotation: 0, duration: 0.2, ease: "sine.inOut" },
            1.9,
          );
          tl.to(
            block,
            {
              x: path.squeeze[0],
              y: path.squeeze[1],
              scale: 1,
              rotation: 0,
              filter: "blur(0.6px)",
              duration: 0.07,
              ease: "sine.inOut",
            },
            2.1,
          );
          tl.to(
            block,
            {
              x: path.release[0],
              y: path.release[1],
              scale: 0.84,
              rotation: 0,
              filter: "blur(1.5px)",
              duration: 0.05,
              ease: "sine.inOut",
            },
            2.17,
          );
          tl.to(
            block,
            { opacity: 0, scale: 0.38, filter: "blur(7px)", duration: 0.05, ease: "power2.in" },
            path.fade,
          );
        });
        tl.to(
          "#cursor",
          { x: 1540, y: 112, rotation: -9, duration: 0.26, ease: "power2.inOut", overwrite: "auto" },
          1.56,
        );
        tl.to(
          "#cursor",
          { x: 380, y: 252, rotation: -7, duration: 0.16, ease: "power2.inOut", overwrite: "auto" },
          1.82,
        );
        tl.fromTo(
          ".selection-box",
          { opacity: 0, scaleX: 0.06, scaleY: 0.1, x: 0, y: 0, filter: "blur(3px)" },
          {
            opacity: 1,
            scaleX: 1,
            scaleY: 1,
            x: 42,
            y: 52,
            filter: "blur(0px)",
            duration: 0.18,
            ease: "power2.out",
          },
          1.96,
        );
        tl.to(
          "#cursor",
          { x: 930, y: 478, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
          1.96,
        );
        tl.to(
          "#cursor",
          { x: 1168, y: 560, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
          2.12,
        );
        tl.to(
          ".selection-box",
          { x: 220, y: 158, width: 640, height: 190, duration: 0.2, ease: "power2.inOut" },
          2.16,
        );
        tl.to(
          ".burst-star",
          {
            x: 118,
            y: -62,
            scale: 0.16,
            opacity: 0.45,
            duration: 0.18,
            ease: "power2.inOut",
            overwrite: "auto",
          },
          2.12,
        );

        tl.to("#brand", { opacity: 1, duration: 0.04 }, 2.08);

        const fragmentMotion = [
          {
            selector: ".frag-alg",
            from: [112, -118, 4],
            carry: [88, -96],
            settle: [20, -24],
            lock: [0, 0],
            visible: 1,
          },
          {
            selector: ".frag-row",
            from: [-12, 78, 5],
            carry: [-22, 56],
            settle: [-8, 18],
            lock: [0, 0],
            visible: 1,
          },
          {
            selector: ".frag-x",
            from: [38, 70, 7],
            carry: [18, 48],
            settle: [6, 14],
            lock: [0, 0],
            visible: 0.82,
          },
          {
            selector: ".frag-clau",
            from: [-82, -108, 4],
            carry: [-54, -78],
            settle: [-18, -18],
            lock: [0, 0],
            visible: 1,
          },
          {
            selector: ".frag-de",
            from: [62, 22, 5],
            carry: [38, 12],
            settle: [12, 4],
            lock: [0, 0],
            visible: 1,
          },
        ];

        fragmentMotion.forEach((piece, index) => {
          tl.fromTo(
            piece.selector,
            {
              opacity: 0,
              x: piece.from[0],
              y: piece.from[1],
              scale: 0.99,
              filter: `blur(${piece.from[2]}px)`,
            },
            {
              opacity: piece.visible,
              x: piece.carry[0],
              y: piece.carry[1],
              scale: 1,
              filter: "blur(1.2px)",
              duration: 0.16,
              ease: "sine.out",
              overwrite: "auto",
            },
            2.12 + index * 0.004,
          );
          tl.to(
            piece.selector,
            {
              x: piece.settle[0],
              y: piece.settle[1],
              opacity: piece.visible,
              filter: "blur(0.35px)",
              duration: 0.28,
              ease: "power3.out",
              overwrite: "auto",
            },
            2.28 + index * 0.003,
          );
          tl.to(
            piece.selector,
            {
              opacity: 0,
              x: piece.settle[0] + [8, -6, 2, -8, 6][index],
              y: piece.settle[1] + [-6, 7, 4, -5, 3][index],
              filter: "blur(4px)",
              duration: 0.14,
              ease: "power2.out",
              overwrite: "auto",
            },
            2.31 + index * 0.002,
          );
        });

        tl.fromTo(
          ".final-wordmark",
          { opacity: 0, x: -12, y: 8, scale: 0.995, filter: "blur(5px)" },
          {
            opacity: 1,
            x: 0,
            y: 0,
            scale: 1,
            filter: "blur(0px)",
            duration: 0.24,
            ease: "power4.out",
            overwrite: "auto",
          },
          2.38,
        );
        tl.to(".burst-star", { opacity: 0, duration: 0.12, ease: "power2.in" }, 2.32);
        tl.to(
          ".selection-box",
          { opacity: 0, filter: "blur(5px)", duration: 0.16, ease: "power2.in" },
          2.33,
        );
        tl.to(
          "#cursor",
          { x: 1256, y: 587, rotation: -3, duration: 0.3, ease: "power2.inOut", overwrite: "auto" },
          2.34,
        );
        tl.to("#burst", { opacity: 0, filter: "blur(6px)", duration: 0.14, ease: "power2.in" }, 2.58);
        tl.to("#cursor", { opacity: 0, duration: 0.13, ease: "power2.in" }, 2.86);
        tl.set("#cursor", { opacity: 0 }, 3.0);
        tl.to(
          "#brand",
          { opacity: 0, y: 26, filter: "blur(9px)", duration: 0.22, ease: "power2.in" },
          2.9,
        );

        tl.to("#ui", { opacity: 1, duration: 0.08 }, 3.02);
        tl.fromTo(
          ".input-stack",
          { opacity: 0, scale: 0.88, y: 92, filter: "blur(14px)" },
          { opacity: 1, scale: 1, y: 0, filter: "blur(0px)", duration: 0.66, ease: "expo.out" },
          3.05,
        );
        tl.fromTo(
          ".star-panel",
          { opacity: 0, scale: 0.5, rotation: -16 },
          { opacity: 1, scale: 1, rotation: 0, duration: 0.38, ease: "power3.out" },
          3.18,
        );
        tl.fromTo(".placeholder", { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.34 }, 3.3);
        tl.fromTo(
          ".panel-empty .panel-plus, .panel-empty .model",
          { opacity: 0, y: 10 },
          { opacity: 1, y: 0, duration: 0.3, stagger: 0.06 },
          3.42,
        );

        tl.to(".panel-empty", { opacity: 0, duration: 0.18, ease: "power2.inOut" }, 4.12);
        tl.to(".panel-full", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 4.12);
        tl.to(
          ".input-stack",
          { scale: 1.32, x: 300, y: -100, duration: 0.26, ease: "power2.inOut" },
          4.14,
        );
        tl.to(".input-stack", { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" }, 4.92);

        tl.to(
          ".prompt-text span",
          { opacity: 1, duration: 0.01, stagger: { amount: 2.85 }, ease: "none" },
          4.18,
        );
        tl.to("#sendFull", { opacity: 1, scale: 1, duration: 0.24, ease: "power3.out" }, 7.32);
        tl.fromTo(
          "#cursor",
          { x: 1328, y: 900, rotation: -6, scale: 1, opacity: 0 },
          {
            x: 1530,
            y: 900,
            rotation: -5,
            scale: 1,
            opacity: 1,
            duration: 0.48,
            ease: "power2.inOut",
          },
          6.92,
        );
        tl.to(
          "#cursor",
          { x: 1512, y: 620, rotation: -5, duration: 0.5, ease: "power2.inOut" },
          7.44,
        );

        tl.to("#sendFull", { scale: 0.86, duration: 0.08, ease: "power2.in" }, 7.9);
        tl.to("#sendFull", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 7.98);
        tl.to(".panel-full", { opacity: 0, duration: 0.16, ease: "power2.inOut" }, 8.15);
        tl.to(".panel-thinking", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 8.15);
        tl.set(".thinking-line", { opacity: 0 }, 8.24);
        tl.to(
          ".thinking-line",
          { opacity: 1, duration: 0.3, ease: "power3.out", overwrite: "auto" },
          8.25,
        );
        tl.to("#cursor", { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: "power2.out" }, 7.94);
        tl.to(
          ".thinking-line",
          { opacity: 0, duration: 0.18, ease: "power2.inOut", overwrite: "auto" },
          8.64,
        );
        tl.fromTo(
          ".x-result",
          { opacity: 0, y: 12 },
          { opacity: 1, y: 0, duration: 0.28, ease: "power3.out" },
          8.82,
        );
        tl.to(
          "#cursor",
          { x: 365, y: 418, rotation: -6, duration: 0.58, ease: "power2.inOut", overwrite: "auto" },
          8.74,
        );
        tl.to(
          ".x-trigger",
          {
            keyframes: [
              { scale: 0.88, duration: 0.08, ease: "power2.in" },
              { scale: 1, duration: 0.14, ease: "back.out(1.7)" },
            ],
            overwrite: "auto",
          },
          9.34,
        );
        tl.to(".x-result", { opacity: 0, y: -8, duration: 0.18, ease: "power2.inOut" }, 9.5);
        tl.to(
          ".input-stack",
          {
            opacity: 0,
            scale: 0.93,
            y: 26,
            filter: "blur(12px)",
            duration: 0.4,
            ease: "power3.inOut",
          },
          9.5,
        );
        tl.to(
          ".star-panel",
          { opacity: 0, scale: 0.72, rotation: 12, duration: 0.28, ease: "power2.inOut" },
          9.5,
        );
        tl.fromTo(
          ".social-card",
          { opacity: 0, y: 34, scale: 0.88, filter: "blur(12px)" },
          { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "expo.out" },
          9.86,
        );
        tl.to(
          "#cursor",
          { x: 1408, y: 246, rotation: -5, duration: 0.42, ease: "power2.inOut", overwrite: "auto" },
          9.96,
        );
        tl.to(
          "#cursor",
          { x: 1242, y: 446, rotation: -5, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
          10.5,
        );
        tl.to(".follow-button", { scale: 0.9, duration: 0.08, ease: "power2.in" }, 10.88);
        tl.to(
          ".follow-button",
          { scale: 1, backgroundColor: "#2f2f2f", duration: 0.28, ease: "elastic.out(1, 0.45)" },
          10.96,
        );
        tl.to(".follow-label-follow", { opacity: 0, duration: 0.08, ease: "none" }, 10.96);
        tl.to(".follow-label-following", { opacity: 1, duration: 0.08, ease: "none" }, 10.99);
        tl.to(
          "#cursor",
          { x: 1286, y: 472, rotation: -5, duration: 0.16, ease: "power2.out", overwrite: "auto" },
          11,
        );

        window.__timelines["blue-sweater-intro-video"] = tl;
      </script>
    </body>
  </html>
  ```
</Accordion>

## Usage

After installing, add the block to your host composition:

```html theme={null}
<div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
```

Tagged `showcase` `ai` `creator` `sfx`.

Created by [Joe Sai](https://x.com/_blue_sweater_).

## Related topics

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