// @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 (
{children}
);
};
/* ============================================================================
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 = (
{/* PROMPT panel — the "deploy guide" you drop into Claude */}
{/* panel header — file/prompt id + a CLAUDE chip that ignites */}
deploy-guide.md
CLAUDE
{/* the typed prompt body */}
{promptLines.map((w, i) => {
const lp = clamp01((typeP - i * 0.16) / 0.5);
return (
);
})}
{/* deploy-steps stub that "checks off" as the work completes */}
{/* WORK ring — fills as the AI does the work, then a check lands */}
{/* center readout: % while working → a check chip on done */}
{/* working percentage (fades out as the check lands) */}
{pct}%
Working
{/* the landed check */}
✓
Done
{/* settle ring that snaps tight on the lock-in */}
);
return (
Drop Into Claude
{/* impact + sub flash on the lock-in payoff */}
{HeroFace}
{/* docks early — the action that kicks off the work */}
{/* mid-work spec — effortless heavy lifting */}
{/* lands on the payoff */}
{HeroFace}
);
};