#!/usr/bin/env python3
"""
Code Display Example
Demonstrates both static and animated typing code components
for technical tutorials and coding videos.
"""
import asyncio
import sys
from pathlib import Path
# Add parent directory to path
sys.path.insert(0, str(Path(__file__).parent.parent / "src"))
from chuk_mcp_remotion.utils.project_manager import ProjectManager
from chuk_mcp_remotion.generator.composition_builder import CompositionBuilder
async def main():
"""Generate a video with code display examples."""
print("\n" + "="*70)
print("CODE DISPLAY EXAMPLE")
print("="*70)
# Initialize project manager
manager = ProjectManager()
# Step 1: Create project
print("\n💻 Step 1: Creating code tutorial project...")
project = manager.create_project(
name="code_tutorial",
theme="tech",
fps=30,
width=1920,
height=1080
)
print(f"✓ Project created: {project['name']}")
print(f" Theme: {project['theme']}")
print(f" Resolution: {project['resolution']}")
# Initialize composition
manager.current_composition = CompositionBuilder(
fps=30,
width=1920,
height=1080,
transparent=False
)
manager.current_composition.theme = "tech"
print("\n 🎨 Using dark background for code display")
# Step 2: Add examples
print("\n📝 Step 2: Adding code examples...")
# Example 1: Static code block - Quick reference
static_code_1 = """const fibonacci = (n) => {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
};
console.log(fibonacci(10));"""
manager.current_composition.add_code_block(
code=static_code_1,
language="javascript",
title="fibonacci.js",
start_time=0.5,
duration=4.0,
variant="editor",
animation="slide_up",
show_line_numbers=True
)
print("✓ Example #1: Static Fibonacci (editor style)")
print(" Animation: slide_up")
print(" Duration: 4.0s")
# Example 2: Typing code - Shows the process
typing_code_1 = """function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}"""
manager.current_composition.add_typing_code(
code=typing_code_1,
language="javascript",
title="isPrime.js",
start_time=5.0,
duration=8.0,
variant="editor",
cursor_style="line",
typing_speed="normal",
show_line_numbers=True
)
print("\n✓ Example #2: Typing isPrime function")
print(" Animation: character-by-character typing")
print(" Typing speed: normal")
print(" Duration: 8.0s")
# Example 3: Terminal variant with command
terminal_code = """$ npm install remotion
+ remotion@4.0.358
added 247 packages in 12s
$ npm run dev
> dev
> remotion studio
Server running at http://localhost:3000"""
manager.current_composition.add_code_block(
code=terminal_code,
language="bash",
title="",
start_time=14.0,
duration=4.0,
variant="terminal",
animation="fade_in",
show_line_numbers=False
)
print("\n✓ Example #3: Terminal commands")
print(" Variant: terminal (no line numbers)")
print(" Duration: 4.0s")
# Example 4: Hacker-style typing
hacker_code = """async function hack() {
const target = await connect();
const data = await infiltrate(target);
return decrypt(data);
}"""
manager.current_composition.add_typing_code(
code=hacker_code,
language="javascript",
title="",
start_time=19.0,
duration=6.0,
variant="hacker",
cursor_style="block",
typing_speed="fast",
show_line_numbers=False
)
print("\n✓ Example #4: Hacker-style typing")
print(" Variant: hacker (green glow)")
print(" Typing speed: fast")
print(" Duration: 6.0s")
# Example 5: Python code with glass effect
python_code = """def merge_sort(arr):
if len(arr) <= 1:
return arr
mid = len(arr) // 2
left = merge_sort(arr[:mid])
right = merge_sort(arr[mid:])
return merge(left, right)"""
manager.current_composition.add_code_block(
code=python_code,
language="python",
title="merge_sort.py",
start_time=26.0,
duration=5.0,
variant="glass",
animation="scale_in",
show_line_numbers=True
)
print("\n✓ Example #5: Python with glass effect")
print(" Variant: glass (glassmorphism)")
print(" Animation: scale_in")
print(" Duration: 5.0s")
# Step 3: Get composition info
print("\n📊 Step 3: Composition summary...")
info = manager.get_project_info()
composition = info['composition']
print(f" Total duration: {composition['duration_seconds']:.1f} seconds")
print(f" Total frames: {composition['duration_frames']}")
print(f" Components: {len(composition['components'])}")
print("\n Timeline:")
for comp in composition['components']:
comp_type = comp['type']
start = comp['start_time']
end = comp['start_time'] + comp['duration']
variant = comp['props'].get('variant', 'N/A')
title = comp['props'].get('title', 'untitled')
if comp_type == "CodeBlock":
print(f" 📄 CodeBlock ({variant}): {start:.1f}s - {end:.1f}s | {title}")
elif comp_type == "TypingCode":
speed = comp['props'].get('typing_speed', 'normal')
print(f" ⌨️ TypingCode ({speed}): {start:.1f}s - {end:.1f}s | {title}")
# Step 4: Generate TSX files
print("\n⚙️ Step 4: Generating TSX components...")
# Generate CodeBlock component if present
if any(c.component_type == "CodeBlock" for c in manager.current_composition.components):
code_component = next(
c for c in manager.current_composition.components
if c.component_type == "CodeBlock"
)
code_file = manager.add_component_to_project(
"CodeBlock",
code_component.props,
manager.current_composition.theme
)
print(f"✓ Generated: {Path(code_file).name}")
# Generate TypingCode component if present
if any(c.component_type == "TypingCode" for c in manager.current_composition.components):
typing_component = next(
c for c in manager.current_composition.components
if c.component_type == "TypingCode"
)
typing_file = manager.add_component_to_project(
"TypingCode",
typing_component.props,
manager.current_composition.theme
)
print(f"✓ Generated: {Path(typing_file).name}")
# Generate main composition
print("\n📝 Step 5: Generating VideoComposition.tsx...")
composition_file = manager.generate_composition()
print(f"✓ Generated: {Path(composition_file).name}")
# Step 5: Show next steps
print("\n" + "="*70)
print("🎉 CODE TUTORIAL VIDEO GENERATED!")
print("="*70)
print(f"\nProject location: {project['path']}")
print("\n✨ Key Features:")
print(" • Static code blocks with animations")
print(" • Character-by-character typing effect")
print(" • Multiple variants: editor, terminal, hacker, glass")
print(" • Blinking cursor for typing animations")
print(" • Line numbers and syntax theming")
print(" • Monospace fonts from design system")
print("\nNext steps:")
print("\n1. Install dependencies:")
print(f" cd {project['path']}")
print(" npm install")
print("\n2. Preview in Remotion Studio:")
print(" npm start")
print("\n3. Render video:")
print(" npx remotion render src/index.ts code-tutorial out/tutorial.mp4")
print("\n💡 Use Cases:")
print(" • Coding tutorials")
print(" • Programming courses")
print(" • Tech explainer videos")
print(" • Live coding demonstrations")
print(" • Algorithm visualizations")
print(" • Command line tutorials")
print("\n🎨 Variants:")
print(" • editor: IDE-style with window buttons")
print(" • terminal: Command-line interface look")
print(" • glass: Glassmorphism with blur")
print(" • hacker: Matrix-style green glow")
print(" • minimal: Clean and simple")
print("\n" + "="*70)
print("\n✨ Your code tutorial video is ready!\n")
if __name__ == "__main__":
asyncio.run(main())
