Skip to main content
Glama
panel_cascade_examples.py4.71 kB
#!/usr/bin/env python3 """ PanelCascade Examples Demonstrates all 7 cascade types with different grid configurations: - from_edges: Spatial animation from nearest edge - from_center: Radial animation from center - bounce_in: Playful bounce with overshoot - sequential_left: Left-to-right reading order - sequential_right: Right-to-left reverse flow - sequential_top: Top-to-bottom vertical flow - wave: Diagonal wave pattern Perfect for Grid, multi-panel layouts, and photo galleries. """ # Example 1: From Edges - 3x3 Grid (9 panels) FROM_EDGES_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ {"type": "CodeBlock", "config": {"code": f"Panel {i}", "language": "python"}} for i in range(1, 10) ], "cascade_type": "from_edges", "stagger_delay": 0.08, "duration": 10.0, }, } # Example 2: From Center - 3x3 Grid (radial reveal) FROM_CENTER_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ {"type": "DemoBox", "config": {}} for _ in range(9) ], "cascade_type": "from_center", "stagger_delay": 0.1, "duration": 10.0, }, } # Example 3: Bounce In - 3x2 Grid (playful energy) BOUNCE_IN_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ { "type": "Counter", "config": { "start_value": 0, "end_value": (i + 1) * 1000, "suffix": " users", "animation": "count_up", }, } for i in range(6) ], "cascade_type": "bounce_in", "stagger_delay": 0.12, "duration": 10.0, }, } # Example 4: Sequential Left - 4-panel row (reading order) SEQUENTIAL_LEFT_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ { "type": "TitleScene", "config": {"text": f"Step {i}", "variant": "minimal"}, } for i in range(1, 5) ], "cascade_type": "sequential_left", "stagger_delay": 0.15, "duration": 8.0, }, } # Example 5: Sequential Right - 4-panel row (reverse flow) SEQUENTIAL_RIGHT_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ { "type": "CodeBlock", "config": {"code": f"Feature {i}", "language": "typescript"}, } for i in range(1, 5) ], "cascade_type": "sequential_right", "stagger_delay": 0.1, "duration": 8.0, }, } # Example 6: Sequential Top - 2x3 Grid (vertical flow) SEQUENTIAL_TOP_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ {"type": "DemoBox", "config": {}} for _ in range(6) ], "cascade_type": "sequential_top", "stagger_delay": 0.1, "duration": 10.0, }, } # Example 7: Wave - 3x3 Grid (diagonal wave) WAVE_EXAMPLE = { "type": "PanelCascade", "config": { "items": [ { "type": "CodeBlock", "config": { "code": f"Panel {i}", "language": ["python", "javascript", "rust", "go"][i % 4], }, } for i in range(1, 10) ], "cascade_type": "wave", "stagger_delay": 0.08, "duration": 12.0, }, } # Real-world use case: Portfolio showcase PORTFOLIO_SHOWCASE = { "type": "PanelCascade", "config": { "items": [ {"type": "WebPage", "config": {"url": f"https://example.com/project-{i}"}} for i in range(1, 10) ], "cascade_type": "from_edges", "stagger_delay": 0.1, "duration": 15.0, }, } # Motion Token Usage Summary MOTION_TOKENS_USED = """ PanelCascade Motion Token Usage: Durations: - fast: Used for quick sequential animations (0.2s) - medium: Used for balanced cascade timing (0.5s) Easings: - ease_out_expo: Snappy deceleration for slides - ease_out_back: Slight overshoot for bounce_in Springs: - bouncy: Used for bounce_in cascade (playful, energetic) Recommended Stagger Delays: - 0.05s-0.08s: Fast cascade (sprint tempo) - 0.08s-0.12s: Balanced cascade (medium tempo) - 0.12s-0.2s: Deliberate cascade (slow tempo) Best Practices: - Use from_edges for professional, spatial reveals - Use from_center for attention-grabbing radial effects - Use bounce_in for playful, energetic content - Use sequential_left for reading-order familiarity - Use wave for dynamic, flowing reveals - Match stagger_delay to content tempo/platform """ print(MOTION_TOKENS_USED)

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/chrishayuk/chuk-mcp-remotion'

If you have feedback or need assistance with the MCP directory API, please join our Discord server