first commit

sn-infographic/references/layouts/storyboard.md

@@ -0,0 +1,43 @@
+# storyboard
+
+Panel layout resembling film storyboards, showing sequential scenes.
+
+## Structure
+
+- Multiple rectangular panels arranged in rows
+- Each panel shows a distinct scene or moment
+- Panels have a cinematic aspect ratio (wider than tall)
+- Scene transitions implied between panels
+
+## Variants
+
+| Variant | Focus | Visual Emphasis |
+|---------|-------|-----------------|
+| **Film Storyboard** | Scene-by-scene narrative | Cinematic framing, camera angles |
+| **Process Storyboard** | Step-by-step actions | Action focus, minimal background |
+
+## Best For
+
+- Narrative or scenario explanations
+- User journey or experience maps
+- Process walkthroughs with context
+- "How it works" storytelling
+
+## Visual Elements
+
+- Rectangular panels with consistent borders
+- Scene illustrations within each panel
+- Panel numbers or timestamps
+- Optional director's notes below panels
+
+## Text Placement
+
+- Scene description below each panel
+- Panel number at top corner
+- Overall title above the panel grid
+
+## Recommended Pairings
+
+- `cartoon-flat`: Classic storyboard panels
+- `crayon-hand-drawn`: Hand-drawn scene sketches
+- `high-contrast-ad`: High-contrast cinematic panels