src/chronixel-src/scenes/motionGraphicsOrbit/Scene05Setup.tsx

// @ts-nocheck
// ============================================================================
// MOTION GRAPHICS — OBSIDIAN ORBIT · SCENE 05 / SETUP — "Drop Into Claude".
//
// BEAT 5 (12s). Hero = a "deploy guide / Claude" artifact slab whose FACE is a
// prompt panel (a typed prompt + a CLAUDE chip + a deploy-steps stub). The world
// orbits in slow hold→ease arcs; a "DROP INTO CLAUDE" Callout docks early; a
// progress ring/facet fills across the work phase as the AI "does the work"; a
// done Callout "AI DOES THE WORK" + a Check/ding land as the slab settles to a
// held angle with a weighty lock-in + impact. Effortless heavy lifting; keynote
// calm. Composed ENTIRELY from the Plinth module + shared engine.
//
//   compId  MotionGraphics-Orbit-Scene05-Setup
//   export  MgOrbitScene05Setup        duration 360f @ 30fps (12s)
// ============================================================================
import React from "react";
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";

import {
  Plinth,
  OrbitWorld,
  Extrude,
  Callout,
  DustMotes,
} from "../../plinth/plinth";
import { C, withAlpha, ACCENT_GRAD } from "../../chronixel/theme";
import { FONT, MONO } from "../../chronixel/fonts";
import {
  beat,
  clamp01,
  mix,
  osc,
  enter,
  springAt,
  EASE,
  SPRING,
} from "../../chronixel/motion";
import { Shockwave, GlowPulse } from "../../chronixel/fx";

/* ---- mono eyebrow pinned over the void (mirrors ObsidianOrbit idiom) ------- */
const Eyebrow: React.FC<{ at: number; children: React.ReactNode }> = ({
  at,
  children,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return (
    <div
      style={{
        position: "absolute",
        left: 120,
        top: 120,
        display: "flex",
        alignItems: "center",
        gap: 14,
        fontFamily: MONO,
        fontSize: 15,
        letterSpacing: 5,
        textTransform: "uppercase",
        color: C.accent2,
        ...enter(frame, fps, at, { from: "left", dist: 32, blur: 0 }),
      }}
    >
      <span
        style={{
          width: 30,
          height: 2,
          background: ACCENT_GRAD,
          boxShadow: `0 0 12px ${C.accentGlow}`,
        }}
      />
      {children}
    </div>
  );
};

/* ============================================================================
   SCENE 05 — SETUP / DROP INTO CLAUDE.
   ========================================================================== */
export const MgOrbitScene05Setup: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const t = frame / fps;

  // Beat timeline (seconds):
  //   prompt face types on        ~0.6 → 2.2
  //   "DROP INTO CLAUDE" docks    ~2.4
  //   work ring fills (AI works)  ~3.0 → 8.4
  //   LOCK-IN settles + payoff    ~8.6  (held angle, impact)
  //   "AI DOES THE WORK" + check  ~9.0
  const LOCK = 8.6;

  // Prompt panel: typed lines, then a CLAUDE chip ignites.
  const typeP = beat(frame, fps, 0.6, 2.2, EASE.out);
  const chipP = beat(frame, fps, 2.2, 2.9, EASE.backOut);
  const chipPulse = 0.5 + 0.5 * osc(t, 1.7);

  // The progress facet/ring: 0→100% across the work phase, then holds full.
  const workP = beat(frame, fps, 3.0, 8.4, EASE.cine);
  const pct = Math.round(100 * workP);

  // Lock-in: a weighty settle that snaps the face to a held, slightly-raked rest
  // and stamps the "done" state. flash decays after the beat.
  const stamp = springAt(frame, fps, LOCK, SPRING.HEAVY);
  const stampScale = mix(1.1, 1, clamp01(stamp));
  const flash = clamp01(1 - (t - LOCK) / 0.4) * (t >= LOCK ? 1 : 0);
  const done = clamp01(stamp);

  // The check / ding lands on the settle.
  const checkP = springAt(frame, fps, LOCK + 0.12, SPRING.SNAPPY);

  // Orbit choreography: a slow reveal arc, a working hold→ease, then SETTLE to a
  // held angle by LOCK so the lock-in reads as the object coming to rest.
  //   leg0: ease in to -18° (reveal the face turning into the light)
  //   leg1: long working hold, then ease to +14° while "AI does the work"
  //   leg2: settle to a held ~ -6° rest exactly at the payoff
  const legs = [
    { arc: -18, hold: 0.5, travel: 2.2 },
    { arc: 32, hold: 1.4, travel: 3.0 },
    { arc: -14, hold: 0.6, travel: 1.4 },
  ];

  // Ring geometry for the work facet on the face.
  const R = 132;
  const CIRC = 2 * Math.PI * R;

  const promptLines = [0.74, 0.52, 0.88, 0.64];

  /* ---- hero face: a prompt panel + a CLAUDE chip + a fill ring/facet ------- */
  const HeroFace = (
    <div
      style={{
        position: "absolute",
        inset: 0,
        padding: 36,
        display: "grid",
        gridTemplateColumns: "1.15fr auto",
        alignItems: "center",
        gap: 26,
        transform: `scale(${stampScale})`,
      }}
    >
      {/* PROMPT panel — the "deploy guide" you drop into Claude */}
      <div
        style={{
          borderRadius: 16,
          padding: 18,
          height: 300,
          background: withAlpha("#0a0e16", 0.72),
          border: `1px solid ${C.glassBorder}`,
          display: "flex",
          flexDirection: "column",
          gap: 13,
          justifyContent: "flex-start",
        }}
      >
        {/* panel header — file/prompt id + a CLAUDE chip that ignites */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            opacity: typeP,
          }}
        >
          <div
            style={{
              fontFamily: MONO,
              fontSize: 11,
              letterSpacing: 3,
              color: C.textDim,
              textTransform: "uppercase",
            }}
          >
            deploy-guide.md
          </div>
          <div
            style={{
              fontFamily: MONO,
              fontSize: 11,
              letterSpacing: 2,
              textTransform: "uppercase",
              color: "#1a0d03",
              padding: "4px 10px",
              borderRadius: 999,
              background: ACCENT_GRAD,
              opacity: chipP,
              transform: `scale(${mix(0.7, 1, chipP) * (1 + 0.04 * chipPulse)})`,
              boxShadow: `0 0 ${(16 * chipPulse).toFixed(0)}px ${C.accentGlow}`,
              fontWeight: 700,
            }}
          >
            CLAUDE
          </div>
        </div>

        {/* the typed prompt body */}
        {promptLines.map((w, i) => {
          const lp = clamp01((typeP - i * 0.16) / 0.5);
          return (
            <div
              key={i}
              style={{
                height: 11,
                width: `${w * 100 * lp}%`,
                borderRadius: 6,
                background:
                  i === 0
                    ? withAlpha(C.accent2, 0.7)
                    : withAlpha("#ffffff", 0.2),
              }}
            />
          );
        })}

        {/* deploy-steps stub that "checks off" as the work completes */}
        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 9 }}>
          {[0, 1, 2].map((i) => {
            const sp = clamp01((workP - i * 0.22) / 0.3);
            return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div
                  style={{
                    width: 16,
                    height: 16,
                    borderRadius: 5,
                    flex: "0 0 auto",
                    border: `1px solid ${withAlpha(C.accent, 0.5)}`,
                    background: sp > 0.99 ? C.accent : "transparent",
                    boxShadow: sp > 0.99 ? `0 0 10px ${C.accentGlow}` : "none",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {sp > 0.99 && (
                    <span style={{ color: "#1a0d03", fontSize: 11, fontWeight: 900, lineHeight: 1 }}>
                      ✓
                    </span>
                  )}
                </div>
                <div
                  style={{
                    height: 8,
                    flex: 1,
                    borderRadius: 4,
                    background: withAlpha("#ffffff", mix(0.12, 0.26, sp)),
                  }}
                />
              </div>
            );
          })}
        </div>
      </div>

      {/* WORK ring — fills as the AI does the work, then a check lands */}
      <div style={{ position: "relative", width: R * 2 + 36, height: R * 2 + 36 }}>
        <svg
          width={R * 2 + 36}
          height={R * 2 + 36}
          viewBox={`0 0 ${R * 2 + 36} ${R * 2 + 36}`}
          style={{ transform: "rotate(-90deg)" }}
        >
          <circle
            cx={R + 18}
            cy={R + 18}
            r={R}
            fill="none"
            stroke={withAlpha("#ffffff", 0.08)}
            strokeWidth={16}
          />
          <circle
            cx={R + 18}
            cy={R + 18}
            r={R}
            fill="none"
            stroke={C.accent}
            strokeWidth={16}
            strokeLinecap="round"
            strokeDasharray={CIRC}
            strokeDashoffset={CIRC * (1 - workP)}
            style={{ filter: `drop-shadow(0 0 12px ${C.accentGlow})` }}
          />
        </svg>
        {/* center readout: % while working → a check chip on done */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            pointerEvents: "none",
          }}
        >
          {/* working percentage (fades out as the check lands) */}
          <div
            style={{
              position: "absolute",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              opacity: 1 - clamp01(checkP),
            }}
          >
            <div
              style={{
                fontFamily: FONT,
                fontWeight: 800,
                fontSize: 84,
                lineHeight: 0.9,
                letterSpacing: "-0.04em",
                color: C.text,
                textShadow: `0 0 26px ${withAlpha(C.accent, 0.4)}`,
              }}
            >
              {pct}%
            </div>
            <div
              style={{
                fontFamily: MONO,
                fontSize: 14,
                letterSpacing: 5,
                textTransform: "uppercase",
                color: C.accent2,
                marginTop: 6,
              }}
            >
              Working
            </div>
          </div>

          {/* the landed check */}
          <div
            style={{
              position: "absolute",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              opacity: clamp01(checkP),
              transform: `scale(${mix(0.4, 1, clamp01(checkP))})`,
            }}
          >
            <div
              style={{
                width: 116,
                height: 116,
                borderRadius: "50%",
                background: ACCENT_GRAD,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: `0 0 44px ${C.accentGlow}, inset 0 0 22px ${withAlpha(
                  "#ffffff",
                  0.4,
                )}`,
                color: "#1a0d03",
                fontSize: 64,
                fontWeight: 900,
                lineHeight: 1,
              }}
            >
              ✓
            </div>
            <div
              style={{
                fontFamily: MONO,
                fontSize: 14,
                letterSpacing: 5,
                textTransform: "uppercase",
                color: C.accent2,
                marginTop: 10,
              }}
            >
              Done
            </div>
          </div>
        </div>

        {/* settle ring that snaps tight on the lock-in */}
        <div
          style={{
            position: "absolute",
            inset: -6,
            borderRadius: "50%",
            border: `2px solid ${withAlpha(C.accent, 0.35 + 0.4 * chipPulse)}`,
            opacity: done,
            boxShadow: `0 0 26px ${withAlpha(C.accent, 0.3 * done)}`,
          }}
        />
      </div>
    </div>
  );

  return (
    <Plinth>
      <Eyebrow at={0.2}>Drop Into Claude</Eyebrow>

      {/* impact + sub flash on the lock-in payoff */}
      <AbsoluteFill style={{ pointerEvents: "none", zIndex: 5 }}>
        <GlowPulse
          size={1150}
          color={withAlpha(C.accent, 0.16 * flash)}
          strength={flash}
        />
        <Shockwave at={LOCK} size={780} />
        <Shockwave at={LOCK + 0.09} size={1080} />
      </AbsoluteFill>

      <OrbitWorld legs={legs} perspective={2200} bobAmp={13}>
        <DustMotes layers={3} opacity={0.42} />
        <Extrude w={840} h={460} depth={22} layers={17} radius={30}>
          {HeroFace}
        </Extrude>

        {/* docks early — the action that kicks off the work */}
        <Callout
          title="Action"
          value="DROP INTO CLAUDE"
          at={fps * 2.4}
          x={0}
          y={-300}
          leader={120}
          side="right"
        />
        {/* mid-work spec — effortless heavy lifting */}
        <Callout
          title="Your Effort"
          value="ZERO"
          at={fps * 4.2}
          x={-470}
          y={130}
          leader={150}
          side="left"
        />
        {/* lands on the payoff */}
        <Callout
          title="Result"
          value="AI DOES THE WORK"
          at={fps * (LOCK + 0.35)}
          x={480}
          y={140}
          leader={160}
          side="right"
        />
      </OrbitWorld>

      <Plinth.Reflection>
        <Extrude w={840} h={460} depth={22} layers={10} radius={30} sheen={false}>
          {HeroFace}
        </Extrude>
      </Plinth.Reflection>
    </Plinth>
  );
};