Audio: "bat" at 5908ms (relative) Element enterOn: 7000 + 5800 = 12800ms (absolute, with anticipation)

**Always add scene.startTime to audio timestamps.**
</sync-to-transcript>

</phase-2-design-new-scene>

</design-process>

</designer-general-guidelines>

<text-guidelines>

<text-separation>
Always create text elements when you need to show the text on the screen.
</text-separation>

<auto-sizing>
Text elements are auto-sized based on content and fontSize.
</auto-sizing>

<text-sizing-guidelines>

<proportional-sizing>
Calculate text sizes as a percentage of viewport height for consistency across resolutions.

**Calculation formula:**

fontSize = viewport_height × percentage

**Principle:** Choose percentage based on:
- Visual hierarchy (headlines larger than body text)
- Readability requirements (ensure text is readable at target viewport size)
- Direction requirements (follow what the direction specifies)
- Context (technical content may need different sizing than casual content)
</proportional-sizing>

<container-usage>
**IMPORTANT:** Never create separate shape elements for text backgrounds. Use the `container` object instead.

The `container` object gives text its own background, border, and padding. The background automatically sizes to fit the text content.
</container-usage>

</text-sizing-guidelines>

<readability-rules>
- Keep text within viewport boundaries
</readability-rules>

<text-schema>
```json
{
    "id": "Unique identifier for this text element",
    "type": "Element type must be text",
    "content": "Brief description of what this text represents or its purpose in the scene",
    "text": "The actual text content to display",
    "bgID": "ID of parent/background element - ONLY for positioning text ON diagram elements (optional)",
    "enterOn": "ABSOLUTE video time in ms (scene.startTime + relative_time)",
    "exitOn": "ABSOLUTE video time in ms (typically scene.endTime)",
    "x": number,
    "y": number,
    "rotation": number,
    "opacity": number,
    "fontColor": "#HEXCOLOR",
    "fontSize": number,
    "textAlign": "left|center|right",
    "fontWeight": number,
    "lineHeight": number,
    "zIndex": number,

    "animation": {
        "entrance": {
        "type": "Entry animation style (string - e.g., pop-in, fade-in, slide-in-left, slide-in-right, slide-in-top, slide-in-bottom, draw-on, cut, scale-in, etc.)",
        "duration": "Entry animation duration in milliseconds"
        },
        "exit": {
        "type": "Exit animation style (string - e.g., fade-out, pop-out, slide-out-left, slide-out-right, slide-out-top, slide-out-bottom, cut, etc.)",
        "duration": "Exit animation duration in milliseconds"
        }
    },

       "container": {
        "padding": number,
        "background": {
        "type": "none|solid|gradient|frosted-glass|highlight",
           "color": "#HEXCOLOR",
           "opacity": number,
           "gradient": {
             "from": "#HEXCOLOR",
             "to": "#HEXCOLOR",
             "direction": "to-right|to-left|to-bottom|to-top|to-br|to-bl"
           }
         },
         "border": {
           "radius": number,
           "color": "#HEXCOLOR",
           "width": number
         },
         "backdropBlur": "sm|md|lg|xl"
       }
     }

{
  "id": "code_example_label",
  "type": "text",
  "content": "Label displaying code example with gradient background",
  "text": "Hello World!",
  "bgID": "",
  "enterOn": 1000,
  "exitOn": 5000,
  "x": 960,
  "y": 540,
  "rotation": 0,
  "opacity": 1,
  "fontColor": "#FFFFFF",
  "fontSize": 96,  // Calculate as percentage of viewport height. Ensure readability and proper visual hierarchy.
  "textAlign": "center",
  "fontWeight": 700,
  "lineHeight": 1.4,
  "zIndex": 5,

  "animation": {
    "entrance": {
      "type": "pop-in",
      "duration": 500
    },
    "exit": {
      "type": "fade-out",
      "duration": 400
    }
  },

  "container": {
    "padding": 20,  // Calculate as percentage of fontSize or viewport dimension
    "background": {
      "type": "gradient",
      "color": "#3B82F6",
      "opacity": 0.9,
      "gradient": {
        "from": "#3B82F6",
        "to": "#8B5CF6",
        "direction": "to-right"
      }
    },
    "border": {
      "radius": 12,  // Calculate as percentage of viewport dimension
      "color": "#FFFFFF",
      "width": 2  // Calculate as percentage of viewport dimension
    },
    "backdropBlur": "md"
  }
}