/**
* Tutorial - Claude Prompts MCP Visual Guide
*
* An educational walkthrough of the MCP tool's core features.
* Focus: Clarity over spectacle, teaching over selling.
*
* Sections:
* 1. Introduction (0:00-0:08) - What is Claude Prompts MCP
* 2. Basic Usage (0:08-0:25) - Running prompts with >>
* 3. Chains (0:25-0:45) - Sequential execution with -->
* 4. Frameworks (0:45-1:00) - Methodology injection with @
* 5. Gates (1:00-1:15) - Quality validation with ::
* 6. Putting It Together (1:15-1:30) - Combined example
*
* Total: 90 seconds / 2700 frames @ 30fps
*/
import React from 'react';
import {
AbsoluteFill,
Sequence,
useCurrentFrame,
useVideoConfig,
interpolate,
spring,
} from 'remotion';
import { void_tokens, light_tokens, signal_tokens, stateColors } from '../design-system/tokens/colors';
import { springs } from '../design-system/tokens/motion';
import { liquidFadeIn, liquidBreath } from '../utils/liquescent-animations';
import {
LiquescentTerminal,
type TerminalLine,
CAGEERFField,
ValidationMembrane,
type ValidationStatus,
FlowChannel,
type FlowStatus,
} from '../components/domain';
import { LiquescentMembrane, CoalesceText, StateNucleus } from '../components/primitives';
import { DepthField } from '../components/environment';
import type { LiquescentState } from '../design-system/types';
// 3D Components
import {
SceneRoot,
BackgroundScene,
CinematicCamera,
CommandRipple,
SuccessRipple,
SubtleEffects,
SectionTransition,
CameraShake,
} from '../components/3d';
// =============================================================================
// CONSTANTS
// =============================================================================
const SECTION_TITLES = {
intro: 'Introduction',
basic: 'Basic Usage',
chains: 'Chaining Prompts',
frameworks: 'Frameworks',
gates: 'Quality Gates',
combined: 'Complete Example',
};
// =============================================================================
// SECTION CONTENT
// =============================================================================
const INTRO_LINES: TerminalLine[] = [
{ type: 'command', text: '>>help' },
{ type: 'tool', name: 'prompt_engine', args: '>>help' },
{ type: 'mcp-return', text: '← Prompt template prepared' },
{ type: 'output', text: '' },
{ type: 'assistant', text: 'Claude Prompts MCP - Template automation for Claude' },
{ type: 'output', text: '' },
{ type: 'output', text: 'Core tools:' },
{ type: 'output', text: ' prompt_engine Execute prompts and chains' },
{ type: 'output', text: ' resource_manager Create, update, delete prompts' },
{ type: 'output', text: ' system_control Configure frameworks and gates' },
];
const BASIC_LINES: TerminalLine[] = [
{ type: 'command', text: '>>code-review file:"src/api.ts"' },
{ type: 'tool', name: 'prompt_engine', args: '>>code-review' },
{ type: 'mcp-return', text: '← Template: "Review {file} for issues..."' },
{ type: 'output', text: '' },
{ type: 'assistant', text: 'Reviewing src/api.ts...' },
{ type: 'output', text: '' },
{ type: 'success', text: '✓ No critical issues found' },
{ type: 'output', text: ' - Consider adding error handling at line 42' },
{ type: 'output', text: ' - Missing JSDoc for exported function' },
];
const CHAIN_LINES: TerminalLine[] = [
{ type: 'command', text: '>>analyze --> >>plan --> >>implement' },
{ type: 'tool', name: 'prompt_engine', args: 'chain (3 steps)' },
{ type: 'mcp-return', text: '← Step 1: analyze template prepared' },
{ type: 'output', text: '' },
{ type: 'output', text: '[Step 1/3]' },
{ type: 'assistant', text: 'Analysis: Found 3 modules, 2 need refactoring...' },
{ type: 'success', text: '✓ Analysis complete → context passed to step 2' },
{ type: 'output', text: '' },
{ type: 'mcp-return', text: '← Step 2: plan template + step 1 context' },
{ type: 'output', text: '[Step 2/3]' },
{ type: 'assistant', text: 'Plan: 1) Extract shared logic 2) Add tests...' },
{ type: 'success', text: '✓ Plan ready for review' },
];
const FRAMEWORK_LINES: TerminalLine[] = [
{ type: 'command', text: '>>research @CAGEERF topic:"API design"' },
{ type: 'tool', name: 'prompt_engine', args: '>>research @CAGEERF' },
{ type: 'mcp-return', text: '← Template + CAGEERF methodology injected' },
{ type: 'output', text: '' },
{ type: 'assistant', text: 'Following CAGEERF methodology for API design:' },
{ type: 'output', text: '' },
{ type: 'output', text: ' [C] Context: REST vs GraphQL trade-offs' },
{ type: 'output', text: ' [A] Analysis: GraphQL fits data relationships' },
{ type: 'output', text: ' [G] Goals: Type-safe, efficient queries' },
{ type: 'output', text: ' [E] Execution: Schema-first approach...' },
];
const GATE_LINES: TerminalLine[] = [
{ type: 'command', text: ">>refactor :: 'no breaking changes'" },
{ type: 'tool', name: 'prompt_engine', args: ">>refactor :: 'no breaking...'" },
{ type: 'mcp-return', text: '← Template + gate criteria attached' },
{ type: 'output', text: '' },
{ type: 'assistant', text: 'Refactoring auth module...' },
{ type: 'output', text: ' Extracting validateToken() to utils/' },
{ type: 'output', text: ' Updating import paths...' },
{ type: 'output', text: '' },
{ type: 'mcp-return', text: '← Validating response against gate...' },
{ type: 'success', text: '✓ GATE PASS: No breaking changes' },
{ type: 'output', text: ' Signature compatibility: maintained' },
];
const COMBINED_LINES: TerminalLine[] = [
{ type: 'command', text: '>>analyze @CAGEERF --> >>implement :: code-quality' },
{ type: 'tool', name: 'prompt_engine', args: 'chain + framework + gate' },
{ type: 'output', text: '' },
{ type: 'mcp-return', text: '← Step 1: analyze + CAGEERF methodology' },
{ type: 'output', text: '[1/2]' },
{ type: 'assistant', text: '[C] Context: Auth module complexity...' },
{ type: 'success', text: '✓ Analysis complete → context to step 2' },
{ type: 'output', text: '' },
{ type: 'mcp-return', text: '← Step 2: implement + code-quality gate' },
{ type: 'output', text: '[2/2]' },
{ type: 'assistant', text: 'Implementing: Extract, test, refactor...' },
{ type: 'mcp-return', text: '← Validating against code-quality...' },
{ type: 'success', text: '✓ GATE PASS: All criteria satisfied' },
];
// =============================================================================
// SUBCOMPONENTS
// =============================================================================
interface SectionTitleProps {
title: string;
subtitle?: string;
startFrame: number;
}
const SectionTitle: React.FC<SectionTitleProps> = ({ title, subtitle, startFrame }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const localFrame = frame - startFrame;
const opacity = liquidFadeIn(frame, startFrame, 20, 'membrane', fps);
const titleScale = spring({
frame: localFrame,
fps,
config: { damping: 200 },
durationInFrames: 25,
});
return (
<div
style={{
position: 'absolute',
top: 80,
left: 0,
right: 0,
textAlign: 'center',
opacity,
}}
>
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 42,
fontWeight: 600,
color: signal_tokens.primary.hex,
transform: `scale(${interpolate(titleScale, [0, 1], [0.9, 1])})`,
letterSpacing: '-0.5px',
}}
>
{title}
</div>
{subtitle && (
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 18,
color: signal_tokens.secondary.hex,
marginTop: 12,
opacity: interpolate(localFrame, [15, 30], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
}),
}}
>
{subtitle}
</div>
)}
</div>
);
};
interface OperatorBadgeProps {
operator: string;
label: string;
description: string;
startFrame: number;
}
const OperatorBadge: React.FC<OperatorBadgeProps> = ({
operator,
label,
description,
startFrame,
}) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = liquidFadeIn(frame, startFrame, 15, 'membrane', fps);
const slideY = interpolate(frame, [startFrame, startFrame + 20], [20, 0], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<div
style={{
opacity,
transform: `translateY(${slideY}px)`,
display: 'flex',
alignItems: 'center',
gap: 16,
padding: '12px 20px',
backgroundColor: `${void_tokens.surface.hex}99`,
borderRadius: 8,
border: `1px solid ${void_tokens.film.hex}`,
}}
>
<span
style={{
fontFamily: '"JetBrains Mono", monospace',
fontSize: 24,
fontWeight: 700,
color: light_tokens.awakening.hex,
minWidth: 50,
textAlign: 'center',
}}
>
{operator}
</span>
<div>
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 16,
fontWeight: 600,
color: signal_tokens.primary.hex,
}}
>
{label}
</div>
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 13,
color: signal_tokens.tertiary.hex,
marginTop: 2,
}}
>
{description}
</div>
</div>
</div>
);
};
// =============================================================================
// 3D BACKGROUND COMPONENT
// =============================================================================
type SectionType = 'intro' | 'basic' | 'chains' | 'frameworks' | 'gates' | 'combined';
interface ThreeBackgroundProps {
state: LiquescentState;
depthProgress: number;
commandFrame?: number;
successFrame?: number;
currentSection: SectionType;
sectionProgress: number; // 0-1 progress within current section
transitionFrames: number[]; // Frames where section transitions occur
shakeFrame?: number; // Frame for camera shake effect
}
// Camera configurations per section for cinematic feel
const SECTION_CAMERA_CONFIG: Record<SectionType, {
baseZ: number;
fov: number;
breathIntensity: number;
enablePush: boolean;
orbitAmount: number;
}> = {
intro: { baseZ: 14, fov: 50, breathIntensity: 0.2, enablePush: true, orbitAmount: 0 },
basic: { baseZ: 12, fov: 45, breathIntensity: 0.15, enablePush: false, orbitAmount: 0 },
chains: { baseZ: 11, fov: 45, breathIntensity: 0.12, enablePush: false, orbitAmount: 0.02 },
frameworks: { baseZ: 10, fov: 42, breathIntensity: 0.15, enablePush: false, orbitAmount: 0.01 },
gates: { baseZ: 10, fov: 42, breathIntensity: 0.18, enablePush: true, orbitAmount: 0 },
combined: { baseZ: 9, fov: 40, breathIntensity: 0.2, enablePush: true, orbitAmount: 0.05 },
};
const ThreeBackground: React.FC<ThreeBackgroundProps> = ({
state,
depthProgress,
commandFrame,
successFrame,
currentSection,
sectionProgress,
transitionFrames,
shakeFrame,
}) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Get camera config for current section
const cameraConfig = SECTION_CAMERA_CONFIG[currentSection];
// Calculate push-in effect on success frames
// Uses viscous spring for organic, honey-like movement
const pushAmount = React.useMemo(() => {
if (!cameraConfig.enablePush || successFrame === undefined) return 0;
const framesSinceSuccess = frame - successFrame;
if (framesSinceSuccess < 0 || framesSinceSuccess > 50) return 0;
// Push in then ease out with viscous spring physics
return spring({
frame: framesSinceSuccess,
fps,
config: springs.viscous, // damping: 30, stiffness: 80, mass: 1.2
durationInFrames: 50,
}) * 0.6; // Subtle push amount
}, [cameraConfig.enablePush, successFrame, frame, fps]);
// Calculate subtle orbit for dynamic sections
const orbitOffset = React.useMemo(() => {
if (cameraConfig.orbitAmount === 0) return { x: 0, y: 0 };
const orbitPhase = sectionProgress * Math.PI * 2;
return {
x: Math.sin(orbitPhase) * cameraConfig.orbitAmount * 3,
y: Math.cos(orbitPhase) * cameraConfig.orbitAmount * 2,
};
}, [cameraConfig.orbitAmount, sectionProgress]);
// Final camera position
const cameraZ = cameraConfig.baseZ - pushAmount;
const cameraPosition: [number, number, number] = [
orbitOffset.x,
orbitOffset.y,
cameraZ,
];
return (
<SceneRoot state={state}>
{/* Cinematic camera with section-specific settings */}
<CinematicCamera
position={cameraPosition}
lookAt={[0, 0, 0]}
fov={cameraConfig.fov}
enableBreathing
breathingIntensity={cameraConfig.breathIntensity}
springPreset="viscous"
/>
{/* 3D Background with particles and caustics */}
<BackgroundScene
state={state}
depthProgress={depthProgress}
enableParticles
particleIntensity={0.6}
enableCaustics={depthProgress > 0.1}
causticsIntensity={0.4}
/>
{/* Command execution ripple */}
{commandFrame !== undefined && (
<CommandRipple impactFrame={commandFrame} center={[0, -1, 0]} />
)}
{/* Success ripple */}
{successFrame !== undefined && (
<SuccessRipple impactFrame={successFrame} center={[0, 0, 0]} />
)}
{/* Section transitions - liquid wipes between major sections */}
{transitionFrames.map((transitionFrame, index) => (
<SectionTransition
key={`transition-${index}`}
startFrame={transitionFrame}
duration={25}
direction="right"
/>
))}
{/* Camera shake on major success moments */}
{shakeFrame !== undefined && (
<CameraShake
startFrame={shakeFrame}
duration={20}
intensity={0.15}
decay
/>
)}
{/* Subtle postprocessing */}
<SubtleEffects state={state} />
</SceneRoot>
);
};
// =============================================================================
// MAIN COMPOSITION
// =============================================================================
export const Tutorial: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Section timing (in frames at 30fps)
const INTRO_START = 0;
const INTRO_END = 8 * fps; // 240 frames
const BASIC_START = INTRO_END;
const BASIC_END = 25 * fps; // 750 frames
const CHAIN_START = BASIC_END;
const CHAIN_END = 45 * fps; // 1350 frames
const FRAMEWORK_START = CHAIN_END;
const FRAMEWORK_END = 60 * fps; // 1800 frames
const GATE_START = FRAMEWORK_END;
const GATE_END = 75 * fps; // 2250 frames
const COMBINED_START = GATE_END;
// COMBINED_END = 90 * fps = 2700 frames
// Background depth progress
const depthProgress = interpolate(frame, [0, 2700], [0, 0.3], {
extrapolateRight: 'clamp',
});
// Determine global state based on section
const getGlobalState = (): LiquescentState => {
if (frame < BASIC_START) return 'dormant';
if (frame < GATE_END) return 'awakening';
return 'liquescent';
};
// Determine current section and progress within it
const getCurrentSection = (): { section: SectionType; progress: number } => {
if (frame < BASIC_START) {
return { section: 'intro', progress: frame / INTRO_END };
}
if (frame < CHAIN_START) {
return { section: 'basic', progress: (frame - BASIC_START) / (BASIC_END - BASIC_START) };
}
if (frame < FRAMEWORK_START) {
return { section: 'chains', progress: (frame - CHAIN_START) / (CHAIN_END - CHAIN_START) };
}
if (frame < GATE_START) {
return { section: 'frameworks', progress: (frame - FRAMEWORK_START) / (FRAMEWORK_END - FRAMEWORK_START) };
}
if (frame < COMBINED_START) {
return { section: 'gates', progress: (frame - GATE_START) / (GATE_END - GATE_START) };
}
return { section: 'combined', progress: (frame - COMBINED_START) / (2700 - COMBINED_START) };
};
const { section: currentSection, progress: sectionProgress } = getCurrentSection();
// Key frames for ripple effects
const introCommandFrame = 60; // When >>help is typed
const basicSuccessFrame = BASIC_START + 350; // Success in basic section
const chainSuccessFrame = CHAIN_START + 350; // Chain step success
const gateSuccessFrame = GATE_START + 280; // Gate pass moment
const finalSuccessFrame = COMBINED_START + 350; // Final success
// Determine which ripple to show based on current frame
const getActiveCommandFrame = () => {
if (frame >= introCommandFrame && frame < introCommandFrame + 60) return introCommandFrame;
return undefined;
};
const getActiveSuccessFrame = () => {
if (frame >= basicSuccessFrame && frame < basicSuccessFrame + 60) return basicSuccessFrame;
if (frame >= chainSuccessFrame && frame < chainSuccessFrame + 60) return chainSuccessFrame;
if (frame >= gateSuccessFrame && frame < gateSuccessFrame + 60) return gateSuccessFrame;
if (frame >= finalSuccessFrame && frame < finalSuccessFrame + 60) return finalSuccessFrame;
return undefined;
};
// Section transition frames (liquid wipe between sections)
// Offset by -15 frames so transition overlaps with section end
const transitionFrames = [
INTRO_END - 15, // Intro → Basic
BASIC_END - 15, // Basic → Chains
CHAIN_END - 15, // Chains → Frameworks
FRAMEWORK_END - 15, // Frameworks → Gates
GATE_END - 15, // Gates → Combined
];
// Camera shake on the final success moment for impact
const getActiveShakeFrame = () => {
if (frame >= finalSuccessFrame && frame < finalSuccessFrame + 30) return finalSuccessFrame;
return undefined;
};
return (
<DepthField progress={depthProgress} enableGanzfeld={false}>
{/* 3D Background Layer */}
<ThreeBackground
state={getGlobalState()}
depthProgress={depthProgress}
commandFrame={getActiveCommandFrame()}
successFrame={getActiveSuccessFrame()}
currentSection={currentSection}
sectionProgress={sectionProgress}
transitionFrames={transitionFrames}
shakeFrame={getActiveShakeFrame()}
/>
<AbsoluteFill
style={{
justifyContent: 'center',
alignItems: 'center',
}}
>
{/* Section 1: Introduction */}
<Sequence from={INTRO_START} durationInFrames={INTRO_END - INTRO_START} premountFor={30}>
<IntroSection />
</Sequence>
{/* Section 2: Basic Usage */}
<Sequence from={BASIC_START} durationInFrames={BASIC_END - BASIC_START} premountFor={30}>
<BasicSection />
</Sequence>
{/* Section 3: Chains */}
<Sequence from={CHAIN_START} durationInFrames={CHAIN_END - CHAIN_START} premountFor={30}>
<ChainSection />
</Sequence>
{/* Section 4: Frameworks */}
<Sequence
from={FRAMEWORK_START}
durationInFrames={FRAMEWORK_END - FRAMEWORK_START}
premountFor={30}
>
<FrameworkSection />
</Sequence>
{/* Section 5: Gates */}
<Sequence from={GATE_START} durationInFrames={GATE_END - GATE_START} premountFor={30}>
<GateSection />
</Sequence>
{/* Section 6: Combined */}
<Sequence from={COMBINED_START} durationInFrames={2700 - COMBINED_START} premountFor={30}>
<CombinedSection />
</Sequence>
</AbsoluteFill>
</DepthField>
);
};
// =============================================================================
// SECTION COMPONENTS
// =============================================================================
const IntroSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// State progression through intro
const getNucleusState = () => {
if (frame < 60) return 'dormant';
if (frame < 150) return 'awakening';
return 'liquescent';
};
const breath = liquidBreath(frame, fps, { intensity: 0.3, seed: 7 });
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
{/* Decorative state nucleus */}
<div
style={{
position: 'absolute',
top: 30,
right: 60,
opacity: liquidFadeIn(frame, 20, 30, 'dissolution', fps) * 0.7,
transform: `scale(${0.9 + breath * 0.1})`,
}}
>
<StateNucleus
state={getNucleusState()}
previousState={frame < 150 ? 'dormant' : 'awakening'}
transitionFrame={frame < 150 ? 60 : 150}
size={80}
glowIntensity={0.4}
/>
</div>
{/* Hero title */}
<div style={{ marginTop: 60 }}>
<CoalesceText
text="Claude Prompts MCP"
startFrame={0}
scatterRadius={80}
springPreset="membrane"
fontSize={56}
fontWeight={700}
color={signal_tokens.primary.hex}
glowIntensity={0.3}
/>
</div>
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 20,
color: signal_tokens.secondary.hex,
marginTop: 24,
opacity: liquidFadeIn(frame, 30, 20, 'membrane', fps),
}}
>
Template automation for Claude Code
</div>
{/* Terminal demo */}
<div style={{ marginTop: 60, width: 700 }}>
<LiquescentTerminal
state={getNucleusState()}
title="claude-prompts"
lines={INTRO_LINES}
typing={{ enabled: true, charsPerSecond: 40, startFrame: 60 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={45}
/>
</div>
</div>
);
};
const BasicSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
<SectionTitle
title={SECTION_TITLES.basic}
subtitle="Execute prompts with >> prefix"
startFrame={0}
/>
{/* Syntax explanation */}
<div style={{ marginTop: 180, display: 'flex', gap: 24 }}>
<OperatorBadge
operator=">>"
label="Prompt Prefix"
description="Execute a registered prompt"
startFrame={20}
/>
</div>
{/* Terminal demo */}
<div style={{ marginTop: 40, width: 700 }}>
<LiquescentTerminal
state="awakening"
title="example"
lines={BASIC_LINES}
typing={{ enabled: true, charsPerSecond: 30, startFrame: 90 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={60}
/>
</div>
{/* Hint */}
<div
style={{
position: 'absolute',
bottom: 80,
fontFamily: 'system-ui, sans-serif',
fontSize: 14,
color: signal_tokens.tertiary.hex,
opacity: liquidFadeIn(frame, 300, 20, 'membrane', fps),
}}
>
Arguments are passed as key:"value" pairs
</div>
</div>
);
};
const ChainSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Determine step statuses based on frame timing
const getStepStatus = (index: number): FlowStatus => {
const stepFrame = 250 + index * 40;
if (frame < stepFrame) return 'pending';
if (frame < stepFrame + 30) return 'flowing';
return 'complete';
};
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
<SectionTitle
title={SECTION_TITLES.chains}
subtitle="Connect prompts for multi-step workflows"
startFrame={0}
/>
{/* Operator explanation */}
<div style={{ marginTop: 180, display: 'flex', gap: 24 }}>
<OperatorBadge
operator="-->"
label="Chain Operator"
description="Run prompts in sequence, passing context"
startFrame={20}
/>
</div>
{/* Terminal demo */}
<div style={{ marginTop: 40, width: 700 }}>
<LiquescentTerminal
state="awakening"
title="chain-demo"
lines={CHAIN_LINES}
typing={{ enabled: true, charsPerSecond: 25, startFrame: 90 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={60}
/>
</div>
{/* Visual chain with FlowChannel connections */}
<div
style={{
position: 'relative',
marginTop: 30,
width: 400,
height: 80,
opacity: liquidFadeIn(frame, 250, 20, 'membrane', fps),
}}
>
{/* FlowChannel connections */}
<FlowChannel
from={{ x: 60, y: 40 }}
to={{ x: 140, y: 40 }}
status={getStepStatus(0) === 'complete' ? 'complete' : 'pending'}
activateFrame={260}
/>
<FlowChannel
from={{ x: 220, y: 40 }}
to={{ x: 300, y: 40 }}
status={getStepStatus(1) === 'complete' ? 'complete' : 'pending'}
activateFrame={300}
/>
{/* Step boxes */}
{['analyze', 'plan', 'implement'].map((step, i) => {
const status = getStepStatus(i);
const state = status === 'complete' ? 'liquescent' : status === 'flowing' ? 'awakening' : 'dormant';
return (
<div
key={step}
style={{
position: 'absolute',
left: i * 160,
top: 15,
}}
>
<LiquescentMembrane
state={state}
breathIntensity={status === 'flowing' ? 0.6 : 0.3}
glowIntensity={status === 'complete' ? 0.5 : 0.2}
>
<div
style={{
padding: '8px 16px',
fontFamily: '"JetBrains Mono", monospace',
fontSize: 12,
color: signal_tokens.primary.hex,
}}
>
{step}
</div>
</LiquescentMembrane>
</div>
);
})}
</div>
</div>
);
};
const FrameworkSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Determine active phase based on frame
const getActivePhase = (): 'context' | 'analysis' | 'goals' | 'execution' | undefined => {
const phaseFrame = frame - 200;
if (phaseFrame < 0) return undefined;
if (phaseFrame < 40) return 'context';
if (phaseFrame < 80) return 'analysis';
if (phaseFrame < 120) return 'goals';
return 'execution';
};
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
<SectionTitle
title={SECTION_TITLES.frameworks}
subtitle="Apply structured methodologies to prompts"
startFrame={0}
/>
{/* Operator explanation */}
<div style={{ marginTop: 180, display: 'flex', gap: 24 }}>
<OperatorBadge
operator="@"
label="Framework Operator"
description="Inject methodology guidance (CAGEERF, ReACT, etc.)"
startFrame={20}
/>
</div>
{/* Terminal wrapped in CAGEERF methodology field */}
<div style={{ marginTop: 40, width: 750, opacity: liquidFadeIn(frame, 50, 25, 'dissolution', fps) }}>
<CAGEERFField
activePhase={getActivePhase()}
state={getActivePhase() ? 'awakening' : 'dormant'}
expandFrame={50}
>
<LiquescentTerminal
state="liquescent"
title="framework-demo"
lines={FRAMEWORK_LINES}
typing={{ enabled: true, charsPerSecond: 25, startFrame: 90 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={60}
/>
</CAGEERFField>
</div>
</div>
);
};
const GateSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// Determine gate validation status based on timing
const getValidationStatus = (): ValidationStatus => {
if (frame < 200) return 'pending';
if (frame < 280) return 'validating';
return 'pass';
};
const validationStatus = getValidationStatus();
const breath = liquidBreath(frame, fps, { intensity: 0.4 });
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
<SectionTitle
title={SECTION_TITLES.gates}
subtitle="Validate outputs against quality criteria"
startFrame={0}
/>
{/* Operator explanation */}
<div style={{ marginTop: 180, display: 'flex', gap: 24 }}>
<OperatorBadge
operator="::"
label="Gate Operator"
description="Apply inline or named quality gates"
startFrame={20}
/>
</div>
{/* Terminal + Validation visualization */}
<div style={{ marginTop: 40, display: 'flex', gap: 30, alignItems: 'flex-start' }}>
{/* Terminal demo */}
<div style={{ width: 550 }}>
<LiquescentTerminal
state={validationStatus === 'pass' ? 'liquescent' : 'awakening'}
title="gate-demo"
lines={GATE_LINES}
typing={{ enabled: true, charsPerSecond: 25, startFrame: 90 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={60}
/>
</div>
{/* Validation membrane visualization */}
<div
style={{
opacity: liquidFadeIn(frame, 180, 20, 'membrane', fps),
transform: `scale(${0.95 + breath * 0.05})`,
}}
>
<ValidationMembrane
status={validationStatus}
criterionName="No breaking changes"
criterionDescription="Validates that API signatures remain compatible"
statusChangeFrame={280}
showRipple={validationStatus === 'pass'}
/>
</div>
</div>
{/* Gate criteria visual */}
<div
style={{
marginTop: 30,
display: 'flex',
gap: 12,
opacity: liquidFadeIn(frame, 250, 20, 'membrane', fps),
}}
>
{['Signature compatibility', 'Return type stable', 'No removed exports'].map((criterion, i) => {
const criterionPassed = frame > 260 + i * 15;
return (
<div
key={criterion}
style={{
padding: '6px 12px',
borderRadius: 6,
backgroundColor: criterionPassed
? `${stateColors.liquescent.hex}20`
: `${stateColors.dormant.hex}20`,
border: `1px solid ${criterionPassed ? stateColors.liquescent.hex : stateColors.dormant.hex}40`,
fontFamily: '"JetBrains Mono", monospace',
fontSize: 11,
color: criterionPassed ? stateColors.liquescent.hex : stateColors.dormant.hex,
}}
>
{criterionPassed ? '✓' : '○'} {criterion}
</div>
);
})}
</div>
</div>
);
};
const CombinedSection: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<div
style={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 60,
}}
>
<SectionTitle
title={SECTION_TITLES.combined}
subtitle="Combine operators for powerful workflows"
startFrame={0}
/>
{/* All operators */}
<div style={{ marginTop: 160, display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
<OperatorBadge operator=">>" label="Prompt" description="Execute" startFrame={20} />
<OperatorBadge operator="@" label="Framework" description="Methodology" startFrame={30} />
<OperatorBadge operator="-->" label="Chain" description="Sequence" startFrame={40} />
<OperatorBadge operator="::" label="Gate" description="Validate" startFrame={50} />
</div>
{/* Terminal demo */}
<div style={{ marginTop: 30, width: 800 }}>
<LiquescentTerminal
state="liquescent"
title="complete-workflow"
lines={COMBINED_LINES}
typing={{ enabled: true, charsPerSecond: 20, startFrame: 90 }}
cursor={{ visible: true, blinkRate: 25 }}
startFrame={60}
/>
</div>
{/* Closing message */}
<div
style={{
position: 'absolute',
bottom: 100,
textAlign: 'center',
opacity: liquidFadeIn(frame, 350, 30, 'dissolution', fps),
}}
>
<div
style={{
fontFamily: 'system-ui, sans-serif',
fontSize: 24,
fontWeight: 600,
color: signal_tokens.primary.hex,
}}
>
Start building with Claude Prompts MCP
</div>
<div
style={{
fontFamily: '"JetBrains Mono", monospace',
fontSize: 14,
color: signal_tokens.tertiary.hex,
marginTop: 12,
}}
>
npm install claude-prompts
</div>
</div>
</div>
);
};
export default Tutorial;
