@devinilabs/reelstack 1.3.2 → 1.4.0

package/reference/dark/resourcescta.tsx

@@ -0,0 +1,609 @@
+/**
+ * REFERENCE — ResourcesCTAReel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/ResourcesCTAReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.832Z
+ */
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  AbsoluteFill,
+} from "remotion";
+import { gsap } from "gsap";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// TOKENS
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+const C = {
+  bg: "#0a0a0b",
+  bgLift: "#141416",
+  surface: "#1a1a1d",
+  surfaceLift: "#222226",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.14)",
+  fg: "#f5f5f7",
+  fgSoft: "#d1d1d6",
+  fgMuted: "#8e8e93",
+  fgDim: "#5a5a60",
+  yt: "#FF0033",
+  ytDeep: "#cc0029",
+  ytSoft: "#ff5577",
+  ytGlow: "rgba(255,0,51,0.45)",
+  gold: "#F0C23A",
+} as const;
+
+// ═══════════════════════════════════════════════════════════════
+// GSAP EASES — industry-standard curves via gsap.parseEase
+// ═══════════════════════════════════════════════════════════════
+
+const ease = {
+  expoOut: gsap.parseEase("expo.out"),
+  power4Out: gsap.parseEase("power4.out"),
+  power3Out: gsap.parseEase("power3.out"),
+  power2InOut: gsap.parseEase("power2.inOut"),
+  backOut: gsap.parseEase("back.out(2)"),
+  backOutSoft: gsap.parseEase("back.out(1.4)"),
+  elasticOut: gsap.parseEase("elastic.out(1, 0.55)"),
+  circOut: gsap.parseEase("circ.out"),
+};
+
+// Tween driven by gsap ease — maps local frames to an output range
+const tween = (
+  frame: number,
+  fps: number,
+  delaySec: number,
+  durSec: number,
+  from: number,
+  to: number,
+  easeFn: (t: number) => number = ease.expoOut,
+) => {
+  const start = delaySec * fps;
+  const end = start + durSec * fps;
+  return interpolate(frame, [start, end], [from, to], {
+    easing: easeFn,
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+};
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — drifting spotlights, grid, grain, vignette
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => {
+  const drift = (Math.sin(frame * 0.004) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.003) + 1) * 0.5;
+  const vignettePulse = 0.38 + Math.sin(frame * 0.008) * 0.04;
+
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 820px 920px at ${20 + drift * 55}% ${18 + drift2 * 36}%, rgba(255,0,51,0.15) 0%, transparent 62%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 620px 820px at ${82 - drift * 48}% ${72 + drift2 * 22}%, rgba(255,100,130,0.08) 0%, transparent 55%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)
+          `,
+          backgroundSize: "72px 72px",
+          maskImage:
+            "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: 0.06,
+          mixBlendMode: "overlay",
+          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>")`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,${vignettePulse}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SAFE ZONE — YouTube Shorts: top ~280px, bottom ~410px
+// ═══════════════════════════════════════════════════════════════
+
+const SafeZone: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      position: "absolute",
+      top: 280,
+      left: 60,
+      right: 140,
+      bottom: 410,
+    }}
+  >
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN — 7s Resources + Like/Subscribe CTA
+// ═══════════════════════════════════════════════════════════════
+
+export const ResourcesCTAReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const f = frame;
+
+  // ── Top eyebrow badge ─────────────────────────────────
+  const badgeOp = tween(f, fps, 0.05, 0.45, 0, 1, ease.expoOut);
+  const badgeY = tween(f, fps, 0.05, 0.6, -30, 0, ease.power4Out);
+
+  // ── Hero word reveal — "FOR · RESOURCES" ──────────────
+  const heroWords = ["FOR", "RESOURCES"];
+  const heroDelays = [0.2, 0.35];
+
+  // ── Secondary "check the" ─────────────────────────────
+  const subOp = tween(f, fps, 0.85, 0.45, 0, 1, ease.expoOut);
+  const subY = tween(f, fps, 0.85, 0.6, 20, 0, ease.power3Out);
+
+  // ── "PINNED COMMENT" gradient pop ─────────────────────
+  const pinnedScale = tween(f, fps, 1.05, 0.9, 0.6, 1, ease.backOut);
+  const pinnedOp = tween(f, fps, 1.05, 0.4, 0, 1, ease.expoOut);
+  const pinnedGlow = 0.35 + Math.sin(f * 0.12) * 0.15;
+
+  // ── Comment bubble icon ───────────────────────────────
+  const bubbleScale = tween(f, fps, 1.5, 0.7, 0, 1, ease.elasticOut);
+  const bubbleOp = tween(f, fps, 1.5, 0.3, 0, 1, ease.expoOut);
+  const bubbleBob = Math.sin(f * 0.14) * 6;
+
+  // ── Down arrow pointing to pinned area ────────────────
+  const arrowOp = tween(f, fps, 2.1, 0.4, 0, 1, ease.expoOut);
+  const arrowBounce = Math.sin(f * 0.18) * 10;
+
+  // ── Divider ───────────────────────────────────────────
+  const dividerScale = tween(f, fps, 2.3, 0.6, 0, 1, ease.power4Out);
+
+  // ── Action pills ──────────────────────────────────────
+  const likeOp = tween(f, fps, 2.7, 0.45, 0, 1, ease.expoOut);
+  const likeY = tween(f, fps, 2.7, 0.7, 30, 0, ease.backOutSoft);
+
+  const subscribeOp = tween(f, fps, 3.0, 0.45, 0, 1, ease.expoOut);
+  const subscribeY = tween(f, fps, 3.0, 0.7, 30, 0, ease.backOutSoft);
+
+  // Heart fill + pop at 3.9s
+  const heartFilled = f > 3.9 * fps;
+  const heartPop = tween(f, fps, 3.9, 0.55, 0, 1, ease.elasticOut);
+  const heartScale = heartFilled ? 1 + heartPop * 0.35 - heartPop * 0.25 : 1;
+  const heartBurstOp = tween(f, fps, 3.9, 0.8, 1, 0, ease.expoOut);
+
+  // Subscribe activates at 4.4s — bell ring + label flip
+  const subActive = f > 4.4 * fps;
+  const bellRingT = tween(f, fps, 4.4, 0.9, 0, 1, ease.power2InOut);
+  const bellTilt = Math.sin(bellRingT * Math.PI * 4) * (1 - bellRingT) * 14;
+  const subPulse = 0.45 + Math.sin(f * 0.15) * 0.2;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
+      <Background frame={f} />
+
+      <SafeZone>
+        {/* ── EYEBROW BADGE ─────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            opacity: badgeOp,
+            transform: `translateY(${badgeY}px)`,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "12px 22px",
+              borderRadius: 999,
+              background: "rgba(255,0,51,0.08)",
+              border: `1.5px solid ${C.yt}`,
+              boxShadow: `0 0 24px rgba(255,0,51,0.25)`,
+            }}
+          >
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: "50%",
+                background: C.yt,
+                boxShadow: `0 0 12px ${C.yt}`,
+              }}
+            />
+            <span
+              style={{
+                fontFamily: MONO,
+                fontSize: 22,
+                fontWeight: 600,
+                color: C.fgSoft,
+                letterSpacing: "0.18em",
+                textTransform: "uppercase",
+              }}
+            >
+              Pinned Comment
+            </span>
+          </div>
+        </div>
+
+        {/* ── HERO HEADLINE — "FOR RESOURCES" ───────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 90,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 4,
+            fontFamily: FONT,
+          }}
+        >
+          {heroWords.map((w, i) => {
+            const op = tween(f, fps, heroDelays[i], 0.45, 0, 1, ease.expoOut);
+            const y = tween(f, fps, heroDelays[i], 0.7, 60, 0, ease.power4Out);
+            const scale = tween(
+              f,
+              fps,
+              heroDelays[i],
+              0.8,
+              0.82,
+              1,
+              ease.backOutSoft,
+            );
+            const isAccent = i === 1;
+            return (
+              <span
+                key={w}
+                style={{
+                  display: "inline-block",
+                  opacity: op,
+                  transform: `translateY(${y}px) scale(${scale})`,
+                  fontSize: isAccent ? 138 : 64,
+                  fontWeight: isAccent ? 800 : 600,
+                  letterSpacing: "-0.045em",
+                  lineHeight: 0.95,
+                  color: isAccent ? "transparent" : C.fgSoft,
+                  background: isAccent
+                    ? `linear-gradient(135deg, ${C.fg} 0%, ${C.fg} 40%, ${C.ytSoft} 100%)`
+                    : undefined,
+                  WebkitBackgroundClip: isAccent ? "text" : undefined,
+                  backgroundClip: isAccent ? "text" : undefined,
+                  WebkitTextFillColor: isAccent ? "transparent" : undefined,
+                  filter: isAccent
+                    ? `drop-shadow(0 0 40px rgba(255,255,255,0.15))`
+                    : undefined,
+                  textTransform: i === 0 ? "uppercase" : "none",
+                }}
+              >
+                {w}
+              </span>
+            );
+          })}
+        </div>
+
+        {/* ── "check the" ───────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 320,
+            width: "100%",
+            textAlign: "center",
+            opacity: subOp,
+            transform: `translateY(${subY}px)`,
+            fontFamily: FONT,
+            fontSize: 34,
+            fontWeight: 500,
+            color: C.fgMuted,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          check the
+        </div>
+
+        {/* ── "PINNED COMMENT" gradient ─────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 370,
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 20,
+            opacity: pinnedOp,
+            transform: `scale(${pinnedScale})`,
+          }}
+        >
+          {/* Comment bubble icon */}
+          <div
+            style={{
+              width: 88,
+              height: 88,
+              borderRadius: 20,
+              background: `linear-gradient(135deg, ${C.yt}, ${C.ytDeep})`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: `0 14px 34px -8px ${C.ytGlow}, inset 0 1px 0 rgba(255,255,255,0.25)`,
+              opacity: bubbleOp,
+              transform: `scale(${bubbleScale}) translateY(${bubbleBob}px)`,
+              flexShrink: 0,
+            }}
+          >
+            <svg
+              width="50"
+              height="50"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              strokeWidth="2.4"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            {/* Pin dot */}
+            <div
+              style={{
+                position: "absolute",
+                top: -6,
+                right: -6,
+                width: 22,
+                height: 22,
+                borderRadius: "50%",
+                background: C.gold,
+                border: `3px solid ${C.bg}`,
+                boxShadow: `0 0 14px rgba(240,194,58,0.6)`,
+              }}
+            />
+          </div>
+
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 78,
+              fontWeight: 800,
+              letterSpacing: "-0.045em",
+              lineHeight: 1,
+              background: `linear-gradient(135deg, ${C.yt}, ${C.ytSoft})`,
+              WebkitBackgroundClip: "text",
+              backgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              textTransform: "uppercase",
+              filter: `drop-shadow(0 0 28px rgba(255,0,51,${pinnedGlow}))`,
+            }}
+          >
+            Pinned
+          </span>
+        </div>
+
+        {/* ── Down arrow hint ───────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 520,
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            opacity: arrowOp,
+            transform: `translateY(${arrowBounce}px)`,
+          }}
+        >
+          <svg
+            width={48}
+            height={48}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke={C.fgMuted}
+            strokeWidth="2.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M12 5v14M5 12l7 7 7-7" />
+          </svg>
+        </div>
+
+        {/* ── DIVIDER ───────────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 620,
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <div
+            style={{
+              height: 2,
+              width: `${dividerScale * 60}%`,
+              background: `linear-gradient(90deg, transparent, ${C.borderLoud}, transparent)`,
+              transformOrigin: "center",
+            }}
+          />
+        </div>
+
+        {/* ── ACTION PILLS — Like + Subscribe ───────────── */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 20,
+            left: 0,
+            right: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+          }}
+        >
+          {/* LIKE pill */}
+          <div
+            style={{
+              position: "relative",
+              opacity: likeOp,
+              transform: `translateY(${likeY}px)`,
+              padding: "22px 30px",
+              borderRadius: 22,
+              background: heartFilled
+                ? `linear-gradient(135deg, rgba(255,0,51,0.16), ${C.surface})`
+                : C.surface,
+              border: `1.5px solid ${heartFilled ? C.yt : C.borderLoud}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 22,
+              boxShadow: heartFilled
+                ? `0 0 36px -10px ${C.ytGlow}, inset 0 1px 0 rgba(255,255,255,0.05)`
+                : `inset 0 1px 0 rgba(255,255,255,0.04)`,
+            }}
+          >
+            {/* Heart burst ring on fill */}
+            {heartFilled && (
+              <div
+                style={{
+                  position: "absolute",
+                  left: 38,
+                  top: "50%",
+                  width: 90,
+                  height: 90,
+                  marginTop: -45,
+                  borderRadius: "50%",
+                  border: `2.5px solid ${C.yt}`,
+                  opacity: heartBurstOp * 0.6,
+                  transform: `scale(${0.5 + (1 - heartBurstOp) * 1.2})`,
+                  pointerEvents: "none",
+                }}
+              />
+            )}
+            <svg
+              width={56}
+              height={56}
+              viewBox="0 0 24 24"
+              fill={heartFilled ? C.yt : "none"}
+              stroke={heartFilled ? C.yt : C.fg}
+              strokeWidth="2"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              style={{
+                transform: `scale(${heartScale})`,
+                flexShrink: 0,
+                filter: heartFilled
+                  ? `drop-shadow(0 0 14px ${C.ytGlow})`
+                  : undefined,
+              }}
+            >
+              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+            </svg>
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 42,
+                fontWeight: 700,
+                color: C.fg,
+                letterSpacing: "-0.03em",
+                flex: 1,
+              }}
+            >
+              {heartFilled ? "Liked" : "Like"}
+            </span>
+          </div>
+
+          {/* SUBSCRIBE pill */}
+          <div
+            style={{
+              opacity: subscribeOp,
+              transform: `translateY(${subscribeY}px)`,
+              padding: "24px 30px",
+              borderRadius: 22,
+              background: subActive
+                ? `linear-gradient(135deg, ${C.yt}, ${C.ytSoft})`
+                : `linear-gradient(135deg, ${C.yt}, ${C.ytDeep})`,
+              border: `1.5px solid ${subActive ? C.ytSoft : C.yt}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 22,
+              boxShadow: `0 20px 44px -12px rgba(255,0,51,${subPulse}), 0 0 60px rgba(255,0,51,${subPulse * 0.4})`,
+            }}
+          >
+            <svg
+              width={56}
+              height={56}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              strokeWidth="2.4"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              style={{
+                transform: `rotate(${bellTilt}deg)`,
+                transformOrigin: "50% 20%",
+                flexShrink: 0,
+              }}
+            >
+              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+              <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+            </svg>
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 44,
+                fontWeight: 800,
+                color: "#fff",
+                letterSpacing: "-0.03em",
+                flex: 1,
+                textTransform: "uppercase",
+              }}
+            >
+              {subActive ? "Subscribed" : "Subscribe"}
+            </span>
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};