@devinilabs/reelstack 1.3.2 → 1.4.1

package/reference/glass/claudewatchcta.tsx

@@ -0,0 +1,599 @@
+/**
+ * REFERENCE — ClaudeWatchCTAReel  (Family: glass)
+ *
+ * Canonical example of the glass 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/ClaudeWatchCTAReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.826Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  interpolate,
+  spring,
+  useCurrentFrame,
+} from "remotion";
+import {
+  C,
+  CausticBlobs,
+  EyebrowPill,
+  FONT,
+  FloatingGlyphs,
+  GLASS_SHADOW,
+  LightBeam,
+  MONO,
+  ParticleBurst,
+  SonarRings,
+  ease,
+  glassBase,
+} from "./ClaudeWatchReel";
+
+// 240 frames @ 30fps = 8s
+export const CWCTA_TOTAL = 240;
+
+const SAFE_TOP = 290;
+const SAFE_BOTTOM = 410;
+
+const BEATS = {
+  b1: 0,    // 0.0s — atmosphere & eyebrow
+  b2: 30,   // 1.0s — hero word stagger
+  b3: 105,  // 3.5s — sub-line + glass play disc
+  b4: 165,  // 5.5s — description pill
+  b5: 225,  // 7.5s — "Start building." kicker
+} as const;
+
+// ───────────────────────────────────────────────────────────
+// Frame-based tween (matches the pattern used in ClaudeWatchReel)
+// ───────────────────────────────────────────────────────────
+const tween = (
+  frame: number,
+  startFrame: number,
+  duration: number,
+  from: number,
+  to: number,
+  easeFn: (t: number) => number = ease.expoOut,
+) =>
+  interpolate(frame, [startFrame, startFrame + duration], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: easeFn,
+  });
+
+// ───────────────────────────────────────────────────────────
+// HERO LINE — single line with per-word stagger (fade-up + blur)
+// Variant: optional emphasis word recolored & scaled-overshoot.
+// ───────────────────────────────────────────────────────────
+const HeroLine: React.FC<{
+  text: string;
+  startFrame: number;
+  fontSize: number;
+  fontWeight?: number;
+  color?: string;
+  letterSpacing?: string;
+  italic?: boolean;
+  perWordDelay?: number;
+  duration?: number;
+  emphasisOvershoot?: boolean;
+}> = ({
+  text,
+  startFrame,
+  fontSize,
+  fontWeight = 800,
+  color = C.ink,
+  letterSpacing = "-0.04em",
+  italic = false,
+  perWordDelay = 5,
+  duration = 22,
+  emphasisOvershoot = false,
+}) => {
+  const frame = useCurrentFrame();
+  const words = text.split(" ");
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "nowrap",
+        gap: "0.28em",
+        justifyContent: "center",
+        fontFamily: FONT,
+        fontSize,
+        fontWeight,
+        color,
+        letterSpacing,
+        lineHeight: 1.02,
+        fontStyle: italic ? "italic" : "normal",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {words.map((w, i) => {
+        const wordStart = startFrame + i * perWordDelay;
+        const local = frame - wordStart;
+        const op = interpolate(local, [0, duration], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const y = interpolate(local, [0, duration], [38, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.power3Out,
+        });
+        const blur = interpolate(local, [0, duration], [10, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        // Emphasis overshoot bumps the LAST word past 1.0 then settles
+        const isLast = i === words.length - 1;
+        const baseScale = interpolate(local, [0, duration], [0.92, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const overshoot = emphasisOvershoot && isLast
+          ? interpolate(local, [duration, duration + 8, duration + 18], [1, 1.06, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+              easing: ease.power3Out,
+            })
+          : 1;
+        return (
+          <span
+            key={i}
+            style={{
+              display: "inline-block",
+              opacity: op,
+              transform: `translateY(${y}px) scale(${baseScale * overshoot})`,
+              filter: `blur(${blur}px)`,
+              willChange: "transform, opacity, filter",
+            }}
+          >
+            {w}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ───────────────────────────────────────────────────────────
+// GLASS PLAY DISC — 240px disc with ▶ triangle + dual sonar
+// ───────────────────────────────────────────────────────────
+const GlassPlayDisc: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+
+  // Spring entrance with overshoot
+  const entrance = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 11, stiffness: 130 },
+    from: 0,
+    to: 1,
+  });
+  const op = interpolate(local, [0, 18], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Subtle scale-breathe (±2% at ~0.5 Hz)
+  const breathe = 1 + Math.sin(frame * 0.06) * 0.02;
+  // Outro kick at B5 — extra 4% pop on the last 15 frames
+  const kickStart = BEATS.b5;
+  const kick = interpolate(frame, [kickStart, kickStart + 8, kickStart + 15], [1, 1.04, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+
+  const size = 240;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 820,
+        left: "50%",
+        width: size,
+        height: size,
+        marginLeft: -size / 2,
+        opacity: op,
+        transform: `scale(${entrance * breathe * kick})`,
+        willChange: "transform, opacity",
+      }}
+    >
+      {/* Sonar layer 1 — claude coral */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+        }}
+      >
+        <DiscSonar startFrame={startFrame + 6} accent={C.claude} period={70} />
+      </div>
+      {/* Sonar layer 2 — vector indigo, offset phase */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+        }}
+      >
+        <DiscSonar startFrame={startFrame + 30} accent={C.vector} period={70} />
+      </div>
+
+      {/* The disc itself */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          background: C.glassFillStrong,
+          backdropFilter: "blur(32px) saturate(180%)",
+          WebkitBackdropFilter: "blur(32px) saturate(180%)",
+          border: `1.5px solid ${C.glassBorder}`,
+          boxShadow: GLASS_SHADOW,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {/* ▶ triangle — CSS border, optically nudged right */}
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: `66px solid ${C.claude}`,
+            borderTop: "44px solid transparent",
+            borderBottom: "44px solid transparent",
+            marginLeft: 16,
+            filter: `drop-shadow(0 6px 16px ${C.claude}55)`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+// Sonar pulse anchored to the disc center (not the canvas center)
+const DiscSonar: React.FC<{ startFrame: number; accent: string; period: number }> = ({
+  startFrame,
+  accent,
+  period,
+}) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+  if (local < 0) return null;
+  const rings = [0, period * 0.33, period * 0.66];
+  return (
+    <>
+      {rings.map((birth, i) => {
+        const ringLocal = local - birth;
+        if (ringLocal < 0) return null;
+        const cycle = ringLocal % period;
+        const scale = interpolate(cycle, [0, period], [0.5, 1.9], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const op = interpolate(cycle, [0, period * 0.3, period], [0, 0.32, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: "50%",
+              border: `2px solid ${accent}`,
+              transform: `scale(${scale})`,
+              opacity: op,
+              willChange: "transform, opacity",
+            }}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+// ───────────────────────────────────────────────────────────
+// DESCRIPTION PILL — bottom glass card with arrow caption above
+// ───────────────────────────────────────────────────────────
+const DescriptionPill: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = frame - startFrame;
+
+  const entrance = spring({
+    frame: local,
+    fps: 30,
+    config: { damping: 14, stiffness: 140 },
+    from: 0,
+    to: 1,
+  });
+  const op = interpolate(local, [0, 15], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const y = interpolate(local, [0, 22], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+
+  // Caption pulse (arrows nudge down rhythmically)
+  const arrowBob = Math.sin(frame * 0.15) * 6;
+  const captionOp = interpolate(local, [0, 18], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 60,
+        right: 60,
+        bottom: SAFE_BOTTOM + 20,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 22,
+        transform: `translateY(${y}px) scale(${0.96 + entrance * 0.04})`,
+        opacity: op,
+      }}
+    >
+      {/* Mono caption with bobbing arrows */}
+      <div
+        style={{
+          fontFamily: MONO,
+          fontSize: 22,
+          fontWeight: 500,
+          letterSpacing: "0.22em",
+          textTransform: "uppercase",
+          color: C.inkSoft,
+          opacity: captionOp,
+          display: "flex",
+          alignItems: "center",
+          gap: 14,
+        }}
+      >
+        <span style={{ transform: `translateY(${arrowBob}px)`, color: C.claude }}>↓</span>
+        <span>Tap the description</span>
+        <span style={{ transform: `translateY(${arrowBob}px)`, color: C.claude }}>↓</span>
+      </div>
+
+      {/* Glass pill with the message */}
+      <div
+        style={{
+          ...glassBase,
+          borderRadius: 32,
+          padding: "26px 44px",
+          textAlign: "center",
+          fontFamily: FONT,
+          fontSize: 38,
+          fontWeight: 600,
+          color: C.ink,
+          letterSpacing: "-0.01em",
+          lineHeight: 1.18,
+          maxWidth: 880,
+        }}
+      >
+        Complete toolkit in <span style={{ color: C.vector, fontWeight: 700 }}>the description</span>
+      </div>
+    </div>
+  );
+};
+
+// ───────────────────────────────────────────────────────────
+// VIGNETTE — slow inward darkening
+// ───────────────────────────────────────────────────────────
+const Vignette: React.FC = () => {
+  const frame = useCurrentFrame();
+  const op = interpolate(frame, [0, 60, BEATS.b5, CWCTA_TOTAL], [0.2, 0.32, 0.32, 0.5], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <AbsoluteFill
+      style={{
+        background:
+          "radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(20,15,28,1) 100%)",
+        opacity: op,
+        pointerEvents: "none",
+      }}
+    />
+  );
+};
+
+// ───────────────────────────────────────────────────────────
+// MAIN COMPONENT
+// ───────────────────────────────────────────────────────────
+export const ClaudeWatchCTAReel: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ─── B2 hero word starts (3 stacked lines)
+  const heroStart = BEATS.b2;
+  const line1Start = heroStart;             // "CATCH THE"  (96px, 800)
+  const line2Start = heroStart + 18;        // "FULL VIDEO" (132px, 800)
+  const line3Start = heroStart + 38;        // "BELOW"      (168px, 800 italic, claude)
+
+  // ─── B3 sub-line "Dive into this custom skill"
+  const subStart = BEATS.b3 + 14;
+
+  // ─── B5 "Start building." italic kicker
+  const kickerLocal = frame - BEATS.b5;
+  const kickerScale = spring({
+    frame: kickerLocal,
+    fps: 30,
+    config: { damping: 10, stiffness: 130 },
+    from: 0.6,
+    to: 1,
+  });
+  const kickerOp = interpolate(kickerLocal, [0, 14], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const kickerY = interpolate(kickerLocal, [0, 22], [22, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+
+  // ─── Eyebrow pill spring
+  const eyebrowSpring = spring({
+    frame: frame - 4,
+    fps: 30,
+    config: { damping: 14, stiffness: 140 },
+    from: 0,
+    to: 1,
+  });
+  const eyebrowOp = interpolate(frame, [0, 18], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const eyebrowY = interpolate(frame, [0, 24], [24, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.power3Out,
+  });
+
+  return (
+    <AbsoluteFill style={{ background: C.bg, overflow: "hidden" }}>
+      {/* Always-on atmosphere */}
+      <CausticBlobs />
+      <FloatingGlyphs />
+
+      {/* B2 emphasis — particle burst behind the headline */}
+      {frame >= BEATS.b2 + 40 && frame < BEATS.b2 + 130 && (
+        <ParticleBurst count={48} palette={[C.claude, C.film, C.vector, C.plasma]} />
+      )}
+
+      {/* B2 light beam sweep #1 (upper third) */}
+      {frame >= BEATS.b2 && frame < BEATS.b2 + 70 && (
+        <LightBeam delay={BEATS.b2 + 8} angle={-6} />
+      )}
+
+      {/* B4 light beam sweep #2 (opposite diagonal) */}
+      {frame >= BEATS.b4 && frame < BEATS.b4 + 70 && (
+        <LightBeam delay={BEATS.b4 + 6} angle={10} />
+      )}
+
+      {/* B4 emphasis — particle burst behind the description pill */}
+      {frame >= BEATS.b4 + 6 && frame < BEATS.b4 + 90 && (
+        <ParticleBurst count={36} palette={[C.vector, C.plasma, C.claude, C.film]} />
+      )}
+
+      {/* Background sonar around the whole canvas (subtle) */}
+      <div style={{ opacity: 0.55 }}>
+        <SonarRings accent={C.claude} secondary={C.vector} />
+      </div>
+
+      {/* Eyebrow pill — top */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP - 50,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: eyebrowOp,
+          transform: `translateY(${eyebrowY - (1 - eyebrowSpring) * 6}px)`,
+        }}
+      >
+        <EyebrowPill dot={C.claude}>Watch full video</EyebrowPill>
+      </div>
+
+      {/* Hero block — 3 stacked lines, centered horizontally */}
+      <div
+        style={{
+          position: "absolute",
+          top: 400,
+          left: 0,
+          right: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 6,
+        }}
+      >
+        <HeroLine text="Catch the" startFrame={line1Start} fontSize={96} fontWeight={800} />
+        <HeroLine text="full video" startFrame={line2Start} fontSize={132} fontWeight={800} letterSpacing="-0.045em" />
+        <HeroLine
+          text="below"
+          startFrame={line3Start}
+          fontSize={168}
+          fontWeight={800}
+          color={C.claude}
+          italic
+          letterSpacing="-0.05em"
+          emphasisOvershoot
+        />
+      </div>
+
+      {/* Glass play disc + dual sonar (B3 onwards) */}
+      {frame >= BEATS.b3 && <GlassPlayDisc startFrame={BEATS.b3} />}
+
+      {/* Sub-line below the disc */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1100,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+        }}
+      >
+        <HeroLine
+          text="Dive into this custom skill"
+          startFrame={subStart}
+          fontSize={42}
+          fontWeight={600}
+          letterSpacing="-0.01em"
+          color={C.inkSoft}
+          perWordDelay={3}
+          duration={18}
+        />
+      </div>
+
+      {/* B5 "Start building." italic kicker */}
+      {frame >= BEATS.b5 && (
+        <div
+          style={{
+            position: "absolute",
+            top: 1230,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            fontFamily: FONT,
+            fontSize: 56,
+            fontWeight: 700,
+            fontStyle: "italic",
+            color: C.ink,
+            letterSpacing: "-0.02em",
+            opacity: kickerOp,
+            transform: `translateY(${kickerY}px) scale(${kickerScale})`,
+          }}
+        >
+          Start building.
+        </div>
+      )}
+
+      {/* B4 description pill (bottom) */}
+      {frame >= BEATS.b4 && <DescriptionPill startFrame={BEATS.b4} />}
+
+      {/* Slow inward vignette */}
+      <Vignette />
+    </AbsoluteFill>
+  );
+};