> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-remotion/setup.md).

# Setup

## Remotion Video Development Instructions for Claude

### Overview

You are creating **vibrant, fun, exciting, production-quality video experiences** that communicate stories from a **solid, polished marketing perspective**. Every video should feel professional, intentional, and engaging.

***

### Phase 1: Creativity Loop

#### 1.1 Story Conception

**Goal:** Define the video's purpose, audience, and emotional impact.

**Process:**

1. **Identify the core message** — What is the ONE thing the viewer should remember?
2. **Define the audience** — Who is watching? What do they care about?
3. **Set the tone** — Exciting? Inspirational? Educational? Playful?
4. **Determine duration** — 15s (punchy), 30s (standard), 60s (detailed)
5. **Establish the hook** — What grabs attention in the first 2-3 seconds?

**Questions to answer:**

* What problem does this solve or story does it tell?
* What emotion should the viewer feel at the end?
* What action should they take after watching?

**Output:** A brief (2-3 sentence) video concept statement.

***

#### 1.2 Storyline Engineering

**Goal:** Break the concept into a scene-by-scene narrative arc with timing and asset requirements.

**Process:**

**A. Define the Narrative Arc**

Structure the video with clear story beats:

| Beat           | Purpose                                  | Typical Timing |
| -------------- | ---------------------------------------- | -------------- |
| **Hook**       | Grab attention, create curiosity         | 0-3s           |
| **Setup**      | Establish context or problem             | 3-8s           |
| **Build**      | Develop the story, introduce elements    | 8-20s          |
| **Climax**     | Key message, main reveal, or peak moment | 20-25s         |
| **Resolution** | CTA, logo, or closing thought            | 25-30s         |

**B. Create Scene Breakdown**

Label each scene as **S1, S2, S3...** with:

```
S[#] | [Time Range] | [Visual Description] | [Text/Copy] | [Animation Style]
```

**Example:**

```
S1 | 0-4s    | Dark bg, bold text          | "Your website is static" / "Your content isn't" | fadeSlideRight/Left
S2 | 4-8s    | Gradient bg, logo centered  | Webflow logo + "Design visually"                | zoomIn bg, fadeSlideUp logo
S3 | 8-12s   | Product screenshot          | "See it in action"                              | panLeft with overlay
S4 | 12-15s  | Dark bg, 3 icons in row     | Logo trio + "Build with us"                     | staggered fadeSlide
```

**C. Identify Assets Required**

For each scene, list:

* **Images:** Logos, icons, screenshots, backgrounds
* **Colors:** Brand colors, accent colors, text colors
* **Typography:** Font families, weights, sizes

Create an asset checklist:

```
☐ Logo (SVG preferred)
☐ Icon set
☐ Background images/gradients
☐ Product screenshots
☐ Brand color hex codes
```

**D. Plan Visual Hierarchy**

For each scene with multiple text elements:

* **Primary:** Largest, boldest — the key message
* **Secondary:** Supporting text — context or detail
* **Tertiary:** Smallest — taglines, CTAs, attributions

**Spacing rule:** Ensure 15-25% vertical distance between text lines to prevent overlap.

**E. Loop or Exit**

* **Loop back to Story Conception if:**
  * The narrative feels weak or unclear
  * Too many scenes for the duration
  * Missing emotional impact
* **Exit to Build & Test Path when:**
  * Clear scene-by-scene breakdown exists
  * All required assets are identified
  * Timing feels natural when read aloud

***

### Phase 2: Script Generation

#### 2.1 Script Structure

Generate a Remotion JSON script following this structure:

```json
{
  "version": "1.0",
  "settings": {
    "fps": 30,
    "duration": 30,
    "backgroundColor": "#0a0a0f",
    "width": 1920,
    "height": 1080
  },
  "scenes": [ ... ]
}
```

#### 2.2 Scene Construction Rules

**Timing Principles**

* **Minimum scene duration:** 2.5s (allows animation + reading time)
* **Text on screen:** At least 2s for short phrases, 3-4s for sentences
* **Transitions:** 0.3-0.5s overlap between scenes for smooth flow
* **Stagger animations:** 0.3-0.5s delay between elements in same scene

**Layer Management**

Use layers to control rendering order:

* `"layer": "background"` — Images, shapes, overlays (renders first)
* `"layer": "content"` — Text, logos, foreground elements (renders on top)

**Critical:** Dark overlays for text readability go on `"background"` layer, not `"overlay"`.

**Positioning Guidelines**

Use percentage-based positioning for scalability:

| Position    | Y Value | Use Case               |
| ----------- | ------- | ---------------------- |
| Upper third | 25-35%  | Headlines, intro text  |
| Center      | 45-55%  | Primary content, logos |
| Lower third | 65-78%  | Supporting text, CTAs  |

**Text spacing formula:**

* Single line: Center at 50%
* Two lines: 42% and 56% (14% gap)
* Three lines: 28%, 50%, 78% (22% gaps) — adjust based on font size

**Font Size Guidelines (1920x1080)**

| Element         | Size     | Weight |
| --------------- | -------- | ------ |
| Hero headline   | 96-120px | Bold   |
| Section title   | 64-80px  | Bold   |
| Body text       | 40-56px  | Normal |
| Caption/tagline | 32-40px  | Normal |
| Small text      | 24-32px  | Normal |

**Warning:** Text over 64px may wrap. Test and reduce if needed.

**Animation Selection**

Match animation to content purpose:

| Animation          | Best For                        |
| ------------------ | ------------------------------- |
| `fadeIn`           | Subtle reveals, supporting text |
| `fadeSlideUp`      | Positive, uplifting content     |
| `fadeSlideDown`    | Introductions, "dropping in"    |
| `fadeSlideRight`   | Forward motion, progress        |
| `fadeSlideLeft`    | Contrast, opposition            |
| `zoomIn`           | Backgrounds, emphasis           |
| `panLeft/panRight` | Screenshots, wide images        |

**Stagger pattern for multi-element scenes:**

```
Element 1: startTime = X
Element 2: startTime = X + 0.3
Element 3: startTime = X + 0.6
```

#### 2.3 Color & Contrast

**Text Readability Rules**

* **Light backgrounds:** Use dark text (#0a0a0f, #1a1a2e)
* **Dark backgrounds:** Use white (#ffffff) or brand accent colors
* **Busy backgrounds:** Add semi-transparent overlay (rgba with 0.5-0.7 alpha)

**Overlay Pattern**

```json
{
  "type": "shape",
  "shape": "rectangle",
  "style": {
    "backgroundColor": "rgba(10, 10, 15, 0.6)",
    "width": "100%",
    "height": "100%"
  },
  "layer": "background"
}
```

#### 2.4 Asset Integration

**Images**

```json
{
  "type": "image",
  "src": "https://cdn.example.com/logo.svg",
  "position": { "x": "center", "y": "42%" },
  "size": { "width": "20%" },
  "fit": "contain",
  "animation": "fadeSlideUp",
  "startTime": 4.2,
  "duration": 3.6,
  "layer": "content"
}
```

**Size Guidelines**

* **Full logos:** 18-25% width
* **Icons:** 6-10% width
* **Background images:** Use `"fit": "cover"` with no size constraint

#### 2.5 Scene Template Examples

**Hero Intro (S1 Pattern)**

```json
{
  "type": "text",
  "content": "Primary Message",
  "style": {
    "fontSize": 96,
    "fontFamily": "sans-serif",
    "fontWeight": "bold",
    "color": "#ffffff",
    "textAlign": "center"
  },
  "position": { "x": "center", "y": "42%" },
  "animation": "fadeSlideRight",
  "startTime": 0.3,
  "duration": 3.5,
  "layer": "content"
}
```

**Logo + Tagline (S2 Pattern)**

```json
// Background
{ "type": "image", "src": "bg.jpg", "fit": "cover", "animation": "zoomIn", "startTime": 4, "duration": 4, "layer": "background" },
// Logo
{ "type": "image", "src": "logo.svg", "position": { "x": "center", "y": "42%" }, "size": { "width": "22%" }, "animation": "fadeSlideUp", "startTime": 4.2, "duration": 3.6, "layer": "content" },
// Tagline
{ "type": "text", "content": "Tagline here", "position": { "x": "center", "y": "62%" }, "animation": "fadeIn", "startTime": 4.8, "duration": 3, "layer": "content" }
```

**Three-Logo Finale (Closing Pattern)**

```json
// Logo 1 (left)
{ "type": "image", "src": "logo1.svg", "position": { "x": "30%", "y": "38%" }, "size": { "width": "8%" }, "animation": "fadeSlideRight", "startTime": 26.2, "layer": "content" },
// Logo 2 (center)
{ "type": "image", "src": "logo2.svg", "position": { "x": "center", "y": "38%" }, "size": { "width": "8%" }, "animation": "fadeSlideUp", "startTime": 26.5, "layer": "content" },
// Logo 3 (right)
{ "type": "image", "src": "logo3.svg", "position": { "x": "70%", "y": "38%" }, "size": { "width": "8%" }, "animation": "fadeSlideLeft", "startTime": 26.8, "layer": "content" },
// CTA Text
{ "type": "text", "content": "Call to Action", "position": { "x": "center", "y": "62%" }, "animation": "fadeSlideUp", "startTime": 27.2, "layer": "content" }
```

***

### Quality Checklist

Before moving to Preview & Test:

#### Content

* \[ ] Hook captures attention in first 3 seconds
* \[ ] Core message is clear and memorable
* \[ ] Story arc has beginning, middle, end
* \[ ] CTA or closing is strong

#### Technical

* \[ ] All scenes labeled (S1, S2, S3...)
* \[ ] Timing adds up to target duration
* \[ ] No text overlap (sufficient Y-position gaps)
* \[ ] Font sizes appropriate for content hierarchy
* \[ ] Animations match content tone
* \[ ] Layers correctly assigned (background vs content)

#### Visual

* \[ ] Text readable on all backgrounds
* \[ ] Brand colors consistent throughout
* \[ ] Asset URLs valid and accessible
* \[ ] Overlays applied where needed for contrast

#### Polish

* \[ ] Animation stagger feels natural (0.3-0.5s)
* \[ ] No jarring transitions between scenes
* \[ ] Pacing allows reading time
* \[ ] Ending feels complete, not abrupt

***

### Common Issues & Fixes

| Issue            | Cause                 | Fix                                  |
| ---------------- | --------------------- | ------------------------------------ |
| Text overlapping | Y positions too close | Increase gap to 15-25%               |
| Text wrapping    | Font too large        | Reduce fontSize or shorten copy      |
| Text unreadable  | Low contrast          | Add overlay or change text color     |
| Content hidden   | Wrong layer           | Move to `"content"` layer            |
| Choppy feel      | No stagger            | Add 0.3-0.5s delays between elements |
| Abrupt ending    | Short final scene     | Extend final scene to 3-4s           |

***

*Remember: Every frame should look intentional. If it doesn't feel polished, iterate.*