hyperframes/registry/examples/product-promo/compositions/scene5-logo-outro.html

<template id="scene5-logo-outro-template">
  <div
    data-composition-id="scene5-logo-outro"
    data-width="1920"
    data-height="1080"
    data-duration="6"
  >
    <div class="canvas">
      <!-- Glow effect behind the logo -->
      <div class="logo-glow"></div>

      <!-- Logo Container -->
      <div class="logo-container">
        <svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
          <!-- Figma Logo Pieces -->
          <!-- Top-left: Red (#F24E1E) -->
          <path
            class="logo-piece logo-tl"
            d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
            fill="#F24E1E"
          />
          <!-- Top-right: Purple (#A259FF) -->
          <path
            class="logo-piece logo-tr"
            d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
            fill="#A259FF"
          />
          <!-- Middle-left: Pink (#FF7262) -->
          <path
            class="logo-piece logo-ml"
            d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
            fill="#FF7262"
          />
          <!-- Middle-right: Blue (#1ABCFE) -->
          <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
          <!-- Bottom-left: Green (#0ACF83) -->
          <path
            class="logo-piece logo-bl"
            d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
            fill="#0ACF83"
          />
        </svg>
      </div>

      <div class="text-container">
        <div class="tagline">Nothing great is made alone.</div>
        <div class="url-pill">
          <span class="url-text">figma.com</span>
        </div>
      </div>
    </div>

    <style>
      [data-composition-id="scene5-logo-outro"] .canvas {
        width: 1920px;
        height: 1080px;
        background: #0a0a0f;
        position: relative;
        overflow: hidden;
        font-family: "Inter", sans-serif;
      }

      [data-composition-id="scene5-logo-outro"] .logo-container {
        position: absolute;
        left: 880px; /* Center X: 960 - 80 */
        top: 380px; /* Adjusted for tagline space: 540 - 120 - 40 */
        width: 160px;
        height: 240px;
        z-index: 2;
      }

      [data-composition-id="scene5-logo-outro"] .logo-piece {
        transform-origin: center center;
        opacity: 0;
      }

      [data-composition-id="scene5-logo-outro"] .logo-glow {
        position: absolute;
        left: 760px; /* 960 - 200 */
        top: 300px; /* 500 - 200 */
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
      }

      [data-composition-id="scene5-logo-outro"] .text-container {
        position: absolute;
        top: 720px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 3;
      }

      [data-composition-id="scene5-logo-outro"] .tagline {
        font-size: 44px;
        font-weight: 500;
        color: white;
        opacity: 0;
        margin-bottom: 32px;
        text-align: center;
      }

      [data-composition-id="scene5-logo-outro"] .url-pill {
        background: #1a1a1f;
        border: 1px solid #2c2c2c;
        border-radius: 100px;
        padding: 8px 24px;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      [data-composition-id="scene5-logo-outro"] .url-text {
        font-size: 18px;
        color: #666;
        letter-spacing: 0.5px;
      }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <script>
      (function () {
        const tl = gsap.timeline({ paused: true });

        const pieces = {
          tl: '[data-composition-id="scene5-logo-outro"] .logo-tl',
          tr: '[data-composition-id="scene5-logo-outro"] .logo-tr',
          ml: '[data-composition-id="scene5-logo-outro"] .logo-ml',
          mr: '[data-composition-id="scene5-logo-outro"] .logo-mr',
          bl: '[data-composition-id="scene5-logo-outro"] .logo-bl',
        };

        const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
        const logoGlow = '[data-composition-id="scene5-logo-outro"] .logo-glow';
        const tagline = '[data-composition-id="scene5-logo-outro"] .tagline';
        const urlPill = '[data-composition-id="scene5-logo-outro"] .url-pill';

        // 1. Pieces slide in from the RIGHT (x: 1920 -> 0) with a ripple stagger (0.08s). Duration: 1.2s.
        pieceArray.forEach((piece, i) => {
          tl.fromTo(
            piece,
            { x: 1920, opacity: 0 },
            { x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
            i * 0.08,
          );
        });

        // 2. Once at the center (960, 540), the pieces should simply EXPAND (scale 1 -> 1.15)
        // and then CLOSE back to their done state (scale 1.15 -> 1).
        // NO positional 'explode' or pushing to corners.
        const expandTime = 1.2; // Start right after the first piece arrives, or after all?
        // Let's start it after the last piece has arrived or is near arrival for a fluid motion.
        // The last piece starts at 0.32s and takes 1.2s to arrive (1.52s total).
        // Let's trigger the expand at 1.2s so it feels like a continuous flow.

        tl.to(
          pieceArray,
          {
            scale: 1.15,
            duration: 0.5,
            ease: "back.out(1.7)",
            stagger: 0.02,
          },
          expandTime,
        );

        tl.to(
          pieceArray,
          {
            scale: 1,
            duration: 0.4,
            ease: "power2.inOut",
          },
          expandTime + 0.3,
        );

        // 3. Subtle glow bloom effect (optional but adds polish, keeping it from original as it fits the 'expand')
        tl.fromTo(
          logoGlow,
          { opacity: 0, scale: 0.5 },
          { opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
          expandTime,
        );
        tl.to(
          logoGlow,
          {
            opacity: 0,
            scale: 1.8,
            duration: 1.2,
            ease: "power2.out",
          },
          expandTime + 0.4,
        );

        // 4. Tagline and URL pill fade in as before.
        const textStartTime = expandTime + 0.8;
        tl.fromTo(
          tagline,
          { opacity: 0, y: 20 },
          { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
          textStartTime,
        );

        tl.fromTo(
          urlPill,
          { opacity: 0, y: 15 },
          { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
          textStartTime + 0.4,
        );

        // 5. Remove the final pulse animation. (Omitted)
        // 6. After they return to the done state, there should be NO MORE movement for the logo. (Ensured)

        // Register timeline
        window.__timelines = window.__timelines || {};
        window.__timelines["scene5-logo-outro"] = tl;
      })();
    </script>
  </div>
</template>