@lalalic/markcut 1.0.0

package/src/vision/vision_prompts.md

@@ -0,0 +1,67 @@
+# Vision Understanding Prompts
+
+These prompts are used by the `markcut vision` CLI to analyze images and videos.
+Each section is a named prompt template wrapped in `~~~md` fences.
+Override any prompt with `--<prompt-name> "your prompt text"`.
+Provide scene/character context with `--context "the girl is Maggie, the man in red is me"`.
+
+## image-perception
+
+Analyze the image and produce a detailed description.
+
+~~~md
+Describe this image in detail. What do you see? Include the setting, colors, objects, people, weather, and mood. Write at least 3-4 sentences.
+
+Be specific and thorough.
+~~~
+
+## video-perception
+
+Analyze the video and produce a detailed description.
+
+~~~md
+You are given several still frames sampled from a video. Based on these frames, describe the video scene in detail. What setting, subjects, actions, visual style, and mood do you observe? Write at least 3-4 sentences.
+
+Be specific and thorough. Note changes between frames — they represent different moments in time.
+~~~
+
+## detect-scenes
+
+Analyze the merged subtitle/transcript with candidate segment boundaries and split into meaningful segments with descriptions.
+
+~~~md
+You are an expert video editor. You are given candidate segment boundaries for a video, gathered from up to three sources (ordered by reliability):
+
+1. **User hints** (most reliable) — explicit timestamps with descriptions provided by the user
+2. **Speech subtitles (VTT)** — subtitle cues with timestamps and transcript text
+3. **Visual scene changes** (least reliable) — raw ffprobe shot-detection timestamps
+
+Your task: merge these candidate boundaries into meaningful, coherent segments.
+
+Rules:
+- Each final segment should be a coherent narrative or visual unit (5-60 seconds)
+- Respect user hint boundaries — they are the most reliable. If the user marked a boundary at 5s, keep it
+- Use subtitle cues to refine: if a subtitle sentence crosses a user hint boundary, prefer the cue boundary
+- Use ffprobe changes as tiebreakers only — they mark raw visual cuts, not narrative breaks
+- Output ONLY a JSON object where keys are time ranges (milliseconds) and values are objects with a "description" field
+- Descriptions: 5-20 words, summarize what happens in that segment (use user hint text or subtitle text)
+
+Input format:
+```
+Candidates:
+- 5000ms [userHint]: "开始游泳"
+- 15250ms [userHint]: "beach scene"
+- 3200ms [subtitle]: "Welcome to the beach everyone"
+- 8500ms [subtitle]: "Let's go swimming in the ocean"
+- 16000ms [subtitle]: "Now let's build a sandcastle"
+- 4800ms [scene]: ffprobe shot change
+- 15300ms [scene]: ffprobe shot change
+
+Duration: 30000ms
+```
+
+Output format:
+{"0to5000": {"description": "Introduction and welcome"}, "5000to15250": {"description": "Starting to swim"}, "15250to30000": {"description": "Building sandcastle"}}
+
+If inputs are too sparse for segmentation, return an empty object {}.
+~~~

package/tests/dsl.test.ts

@@ -0,0 +1,317 @@
+import { describe, expect, it } from "vitest";
+import {
+  DslError,
+  LAYOUT_VALUES,
+  TRANSITION_VALUES,
+  isQuoted,
+  unquote,
+  splitTokens,
+  parseNumberMaybe,
+  parseWaypoints,
+  parseProps,
+  parseOnSpec,
+  parseEffects,
+  parseKeyValueTokens,
+} from "../src/descriptive/dsl";
+
+describe("dsl — string helpers", () => {
+  it("isQuoted detects double-quoted tokens", () => {
+    expect(isQuoted('"hello"')).toBe(true);
+    expect(isQuoted('""')).toBe(true);
+    expect(isQuoted("hello")).toBe(false);
+    expect(isQuoted('"unterminated')).toBe(false);
+    expect(isQuoted('"')).toBe(false);
+  });
+
+  it("unquote strips surrounding double quotes", () => {
+    expect(unquote('"hello"')).toBe("hello");
+    expect(unquote("hello")).toBe("hello");
+    expect(unquote('""')).toBe("");
+  });
+});
+
+describe("dsl — splitTokens", () => {
+  it("splits on whitespace", () => {
+    expect(splitTokens("a b c")).toEqual(["a", "b", "c"]);
+  });
+
+  it("keeps quoted spans together", () => {
+    expect(splitTokens('a "b c" d')).toEqual(["a", '"b c"', "d"]);
+  });
+
+  it("keeps curly-brace groups together", () => {
+    expect(splitTokens('subtitle:{fontSize:"20px"}')).toEqual(['subtitle:{fontSize:"20px"}']);
+  });
+
+  it("keeps bracket groups together", () => {
+    expect(splitTokens("effects:[fadeIn, bounceIn]")).toEqual(["effects:[fadeIn, bounceIn]"]);
+  });
+
+  it("keeps paren groups together", () => {
+    expect(splitTokens("on:(start, slide1.current=1)")).toEqual(["on:(start, slide1.current=1)"]);
+  });
+
+  it("handles nested brackets", () => {
+    expect(splitTokens("a:[1,[2,3]] b")).toEqual(["a:[1,[2,3]]", "b"]);
+  });
+
+  it("collapses runs of whitespace", () => {
+    expect(splitTokens("a    b\tc")).toEqual(["a", "b", "c"]);
+  });
+
+  it("returns empty array for blank input", () => {
+    expect(splitTokens("   ")).toEqual([]);
+  });
+});
+
+describe("dsl — parseNumberMaybe", () => {
+  it("parses integers", () => {
+    expect(parseNumberMaybe("42")).toBe(42);
+  });
+
+  it("parses floats", () => {
+    expect(parseNumberMaybe("3.14")).toBe(3.14);
+  });
+
+  it("parses negative numbers", () => {
+    expect(parseNumberMaybe("-5")).toBe(-5);
+  });
+
+  it("parses booleans", () => {
+    expect(parseNumberMaybe("true")).toBe(true);
+    expect(parseNumberMaybe("false")).toBe(false);
+  });
+
+  it("returns strings unchanged when not numeric", () => {
+    expect(parseNumberMaybe("hello")).toBe("hello");
+    expect(parseNumberMaybe("20px")).toBe("20px");
+  });
+});
+
+describe("dsl — parseWaypoints", () => {
+  it("parses multiple semicolon-separated waypoints", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC"; 34.05,-118.25,"LA"]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "NYC" },
+      { lat: 34.05, lng: -118.25, label: "LA" },
+    ]);
+  });
+
+  it("parses waypoints without labels", () => {
+    expect(parseWaypoints("[40.7,-74.0]")).toEqual([{ lat: 40.7, lng: -74.0, label: undefined }]);
+  });
+
+  it("returns empty array for non-bracket input", () => {
+    expect(parseWaypoints("not a list")).toEqual([]);
+  });
+
+  it("returns empty array for empty brackets", () => {
+    expect(parseWaypoints("[]")).toEqual([]);
+  });
+});
+
+describe("dsl — parseProps", () => {
+  it("parses standard JSON objects", () => {
+    expect(parseProps('{"a":1,"b":"x"}')).toEqual({ a: 1, b: "x" });
+  });
+
+  it("parses standard JSON arrays", () => {
+    expect(parseProps("[1,2,3]")).toEqual([1, 2, 3]);
+  });
+
+  it("leniently parses unquoted keys", () => {
+    expect(parseProps("{fontSize:20}")).toEqual({ fontSize: 20 });
+  });
+
+  it("leniently parses unquoted string values", () => {
+    expect(parseProps('{name:John}')).toEqual({ name: "John" });
+  });
+
+  it("returns {} for non-object input", () => {
+    expect(parseProps("hello")).toEqual({});
+  });
+
+  it("returns {} for unclosed object", () => {
+    expect(parseProps("{a:1")).toEqual({});
+  });
+});
+
+describe("dsl — parseOnSpec", () => {
+  it("parses a two-argument on() spec", () => {
+    expect(parseOnSpec("(start, slide1.current=1)")).toEqual({
+      when: "start",
+      state: "slide1.current=1",
+    });
+  });
+
+  it("joins extra comma-separated state parts", () => {
+    expect(parseOnSpec("(start, a=1, b=2)")).toEqual({
+      when: "start",
+      state: "a=1,b=2",
+    });
+  });
+
+  it("returns undefined for non-paren input", () => {
+    expect(parseOnSpec("start")).toBeUndefined();
+  });
+
+  it("returns undefined for single argument", () => {
+    expect(parseOnSpec("(start)")).toBeUndefined();
+  });
+
+  it("returns undefined for empty parens", () => {
+    expect(parseOnSpec("()")).toBeUndefined();
+  });
+});
+
+describe("dsl — parseEffects", () => {
+  it("parses a single effect", () => {
+    expect(parseEffects("[fadeIn]")).toEqual(["fadeIn"]);
+  });
+
+  it("parses multiple comma-separated effects", () => {
+    expect(parseEffects("[fadeIn, bounceIn]")).toEqual(["fadeIn", "bounceIn"]);
+  });
+
+  it("parses parameterized effects", () => {
+    expect(parseEffects("[fadeIn(timingFunction:ease-out iterationCount:2)]")).toEqual([
+      "fadeIn(timingFunction:ease-out iterationCount:2)",
+    ]);
+  });
+
+  it("returns empty array for non-bracket input", () => {
+    expect(parseEffects("fadeIn")).toEqual([]);
+  });
+
+  it("returns empty array for empty brackets", () => {
+    expect(parseEffects("[]")).toEqual([]);
+  });
+});
+
+describe("dsl — parseKeyValueTokens", () => {
+  it("parses simple key:value pairs", () => {
+    expect(parseKeyValueTokens(["src:a.mp4", "duration:2"])).toEqual({
+      src: "a.mp4",
+      duration: 2,
+    });
+  });
+
+  it("coerces numeric and boolean values", () => {
+    expect(parseKeyValueTokens(["duration:2", "loop:true", "volume:0.8"])).toEqual({
+      duration: 2,
+      loop: true,
+      volume: 0.8,
+    });
+  });
+
+  it("preserves raw string keys (jsx, prompt, instruction) verbatim", () => {
+    expect(parseKeyValueTokens(['jsx:"<Foo/>"'])).toEqual({ jsx: "<Foo/>" });
+    expect(parseKeyValueTokens(["instruction:hello world"])).toEqual({ instruction: "hello world" });
+  });
+
+  it("peeks next quoted token when value after colon is empty", () => {
+    expect(parseKeyValueTokens(['instruction:', '"fast opener"'])).toEqual({
+      instruction: "fast opener",
+    });
+  });
+
+  it("parses inline object values as lenient JSON", () => {
+    expect(parseKeyValueTokens(['subtitle:{fontSize:"20px"}'])).toEqual({
+      subtitle: { fontSize: "20px" },
+    });
+  });
+
+  it("dispatches on:(...) to parseOnSpec", () => {
+    expect(parseKeyValueTokens(["on:(start, slide1.current=1)"])).toEqual({
+      on: { when: "start", state: "slide1.current=1" },
+    });
+  });
+
+  it("rejects the bare key(value) paren form (colon required)", () => {
+    expect(() => parseKeyValueTokens(["on(start, slide1.current=1)"])).toThrow(DslError);
+    expect(() => parseKeyValueTokens(["on(start, slide1.current=1)"])).toThrow(/unrecognized token/);
+  });
+
+  it("dispatches effects=[...] to parseEffects", () => {
+    expect(parseKeyValueTokens(["effects:[fadeIn, bounceIn]"])).toEqual({
+      effects: ["fadeIn", "bounceIn"],
+    });
+  });
+
+  it("validates layout against the enum", () => {
+    expect(parseKeyValueTokens(["layout:series"])).toEqual({ layout: "series" });
+    expect(() => parseKeyValueTokens(["layout:bogus"])).toThrow(DslError);
+    expect(() => parseKeyValueTokens(["layout:bogus"])).toThrow(/invalid layout value/);
+  });
+
+  it("validates transition against the enum", () => {
+    expect(parseKeyValueTokens(["transition:fade"])).toEqual({ transition: "fade" });
+    expect(() => parseKeyValueTokens(["transition:bogus"])).toThrow(/invalid transition value/);
+  });
+
+  it("parses merged transition:fade(0.5) into transition + transitionTime", () => {
+    expect(parseKeyValueTokens(["transition:fade(0.5)"])).toEqual({
+      transition: "fade",
+      transitionTime: 0.5,
+    });
+  });
+
+  it("throws DslError on unrecognized tokens", () => {
+    expect(() => parseKeyValueTokens(["@@bogus@@"])).toThrow(DslError);
+    expect(() => parseKeyValueTokens(["@@bogus@@"])).toThrow(/unrecognized token/);
+  });
+
+  it("includes line context in error messages when provided", () => {
+    const ctx = { line: 8, lineText: "layout:bogus" };
+    try {
+      parseKeyValueTokens(["layout:bogus"], ctx);
+      expect.fail("should have thrown");
+    } catch (e) {
+      expect(e).toBeInstanceOf(DslError);
+      const msg = (e as DslError).message;
+      expect(msg).toContain("line 8");
+      expect(msg).toContain("layout:bogus");
+    }
+  });
+
+  it("includes token context in error messages", () => {
+    try {
+      parseKeyValueTokens(["layout:bogus"], { line: 1 });
+      expect.fail("should have thrown");
+    } catch (e) {
+      expect((e as DslError).message).toContain('near "layout:bogus"');
+    }
+  });
+});
+
+describe("dsl — DslError", () => {
+  it("formats a message with line and token context", () => {
+    const err = new DslError("bad value", { line: 5, token: "foo", lineText: "foo bar" });
+    expect(err.message).toContain("bad value");
+    expect(err.message).toContain("line 5");
+    expect(err.message).toContain('near "foo"');
+    expect(err.message).toContain("foo bar");
+    expect(err.name).toBe("DslError");
+  });
+
+  it("formats a message without context", () => {
+    const err = new DslError("something broke");
+    expect(err.message).toBe("something broke");
+  });
+});
+
+describe("dsl — exported constants", () => {
+  it("LAYOUT_VALUES contains the four layout types", () => {
+    expect(LAYOUT_VALUES.has("series")).toBe(true);
+    expect(LAYOUT_VALUES.has("parallel")).toBe(true);
+    expect(LAYOUT_VALUES.has("transitionSeries")).toBe(true);
+    expect(LAYOUT_VALUES.has("transition")).toBe(true);
+  });
+
+  it("TRANSITION_VALUES contains the five transition types", () => {
+    expect(TRANSITION_VALUES.has("fade")).toBe(true);
+    expect(TRANSITION_VALUES.has("slide")).toBe(true);
+    expect(TRANSITION_VALUES.has("wipe")).toBe(true);
+    expect(TRANSITION_VALUES.has("flip")).toBe(true);
+    expect(TRANSITION_VALUES.has("clockWipe")).toBe(true);
+  });
+});

package/tests/fixtures/audio.json

@@ -0,0 +1,25 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": false,
+  "children": [
+    {
+      "id": "bgm",
+      "type": "audio",
+      "src": "assets/bgm/ambient-loop.mp3",
+      "volume": 0.3,
+      "isBackground": true,
+      "actions": [{ "start": 0, "end": 3 }]
+    },
+    {
+      "id": "bg",
+      "type": "image",
+      "src": "https://picsum.photos/seed/audio-test/640/480",
+      "fit": "cover",
+      "actions": [{ "start": 0, "end": 3 }]
+    }
+  ]
+}

package/tests/fixtures/basic.json

@@ -0,0 +1,27 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "children": [
+    {
+      "id": "scene-1",
+      "type": "folder",
+      "title": "Scene 1",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg",
+          "type": "image",
+          "src": "https://picsum.photos/seed/test-basic/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 2 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/component-all.json

@@ -0,0 +1,38 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "children": [
+    {
+      "id": "scene-html",
+      "type": "scene",
+      "name": "HTML-JSX",
+      "layout": "parallel",
+      "children": [
+        {
+          "id": "c-hello",
+          "type": "component",
+          "jsx": "<div style={{color:'#fff',fontSize:28,textAlign:'center'}}>Hello World</div>",
+          "actions": [{ "start": 0, "end": 2 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-tween",
+      "type": "scene",
+      "name": "Tween-Animation",
+      "layout": "parallel",
+      "children": [
+        {
+          "id": "c-tween",
+          "type": "component",
+          "jsx": "<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\"><rect x=\"0\" y={tween(0,150)} width=\"50\" height={tween(50,200)} fill=\"#667eea\" /><rect x=\"70\" y={tween(50,100)} width=\"50\" height={tween(100,50)} fill=\"#764ba2\" /><rect x=\"140\" y={tween(100,0)} width=\"50\" height={tween(50,200)} fill=\"#f093fb\" /></svg>",
+          "actions": [{ "start": 0, "end": 3 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/components.json

@@ -0,0 +1,38 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "children": [
+    {
+      "id": "scene-1",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "headline",
+          "type": "component",
+          "jsx": "<div style={{background:'linear-gradient(135deg,#667eea,#764ba2)',padding:'40px',borderRadius:'16px',textAlign:'center'}}><h1 style={{color:'white',fontSize:'36px',margin:0}}>Component Test</h1><p style={{color:'rgba(255,255,255,0.7)',fontSize:'18px'}}>Built-in components render correctly</p></div>",
+          "actions": [{ "start": 0, "end": 3 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-2",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "stats",
+          "type": "component",
+          "jsx": "<div style={{background:'#1a1a2e',padding:'30px',borderRadius:'16px',textAlign:'center'}}><span style={{color:'#667eea',fontSize:'64px',fontWeight:'bold'}}>100%</span><p style={{color:'rgba(255,255,255,0.6)',fontSize:'16px'}}>Working</p></div>",
+          "actions": [{ "start": 0, "end": 3 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/effects.json

@@ -0,0 +1,64 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "stylesheet": ".effect { overflow: hidden; }",
+  "children": [
+    {
+      "id": "fade-in",
+      "type": "effect",
+      "animation": "fadeIn",
+      "animationTimingFunction": "ease-in-out",
+      "children": [
+        {
+          "id": "bg-fade",
+          "type": "image",
+          "src": "https://picsum.photos/seed/effect-fade/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 2 }]
+        }
+      ],
+      "actions": [{ "start": 0, "end": 2 }]
+    },
+    {
+      "id": "bounce",
+      "type": "effect",
+      "animation": "bounceIn",
+      "children": [
+        {
+          "id": "bg-bounce",
+          "type": "image",
+          "src": "https://picsum.photos/seed/effect-bounce/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 2 }]
+        }
+      ],
+      "actions": [{ "start": 0, "end": 2 }]
+    },
+    {
+      "id": "custom-kf",
+      "type": "effect",
+      "animation": "custom",
+      "customKeyframes": {
+        "0": { "opacity": "0", "transform": "scale(0.5) rotate(-10deg)" },
+        "50": { "opacity": "1", "transform": "scale(1.1) rotate(5deg)" },
+        "100": { "opacity": "1", "transform": "scale(1) rotate(0deg)" }
+      },
+      "children": [
+        {
+          "id": "bg-custom",
+          "type": "image",
+          "src": "https://picsum.photos/seed/effect-custom/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 2 }]
+        }
+      ],
+      "actions": [{ "start": 0, "end": 2 }]
+    }
+  ]
+}

package/tests/fixtures/full.json

@@ -0,0 +1,51 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": false,
+  "children": [
+    {
+      "id": "bgm",
+      "type": "audio",
+      "src": "assets/bgm/ambient-loop.mp3",
+      "volume": 0.15,
+      "actions": [{ "start": 0, "end": 5 }]
+    },
+    {
+      "id": "scene-1",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg1",
+          "type": "component",
+          "jsx": "<div style={{position:'absolute',inset:0,background:'radial-gradient(circle at center,#667eea,#764ba2)'}} />",
+          "isBackground": true,
+          "actions": [{ "start": 0, "end": 5 }]
+        },
+        {
+          "id": "headline",
+          "type": "component",
+          "jsx": "<div style={{background:'linear-gradient(135deg,#667eea,#764ba2)',padding:'40px',borderRadius:'16px',textAlign:'center'}}><h1 style={{color:'white',fontSize:'32px',margin:0}}>Full Feature Test</h1><p style={{color:'rgba(255,255,255,0.7)',fontSize:'16px'}}>All systems operational</p></div>",
+          "actions": [{ "start": 0.3, "end": 4.5 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-2",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "stats",
+          "type": "component",
+          "type": "component",
+          "jsx": "<div style={{background:'#1a1a2e',padding:'30px',borderRadius:'16px',textAlign:'center'}}><span style={{color:'#667eea',fontSize:'64px',fontWeight:'bold'}}>100%</span><p style={{color:'rgba(255,255,255,0.6)',fontSize:'16px'}}>Coverage</p></div>",
+          "actions": [{ "start": 0.5, "end": 4.5 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/map.json

@@ -0,0 +1,23 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": false,
+  "children": [
+    {
+      "id": "route",
+      "type": "map",
+      "name": "sf-to-la",
+      "waypoints": [
+        { "lat": 37.7749, "lng": -122.4194, "label": "SF" },
+        { "lat": 36.7783, "lng": -119.4179, "label": "Fresno" },
+        { "lat": 34.0522, "lng": -118.2437, "label": "LA" }
+      ],
+      "routeColor": "#4285F4",
+      "routeWeight": 5,
+      "actions": [{ "start": 0, "end": 3 }]
+    }
+  ]
+}

package/tests/fixtures/md/all-nodes.md

@@ -0,0 +1,28 @@
+# video
+width:640 height:480 fps:30 layout:series instruction:"Full node type demo" metadata:"all-nodes"
+## Media
+layout:parallel
+- image src:photo.jpg duration:3 fit:cover
+- video src:movie.mp4 startFrom:0.5 endAt:3.5 volume:0.9 playbackRate:1.2
+- audio src:bgm.mp3 duration:4 volume:0.5 foreground:true
+## Components
+layout:parallel
+- component duration:3 jsx:"<AnimatedHeadline text='Hello World' gradient />"
+- component duration:2 jsx:"<div style={{color:'red'}}>Inline</div>"
+## Effects
+layout:parallel
+- image src:card.jpg duration:2 fit:cover effects:[fadeIn(3)]
+- image src:badge.png duration:1 effects:[bounceIn(,ease-out,2)]
+## Rhythm
+layout:parallel
+- rhythm src:beat.mp3 spots:[0.5,1.2,1.9,2.8] volume:0.8
+  - image src:flash1.jpg
+  - image src:flash2.jpg
+  - image src:flash3.jpg
+  - image src:flash4.jpg
+## Map
+layout:parallel
+- map duration:4 travelMode:DRIVING waypoints:[37.77,-122.41,"SF";34.05,-118.24,"LA";36.16,-115.15,"LV"]
+## Include
+layout:parallel
+- include src:./child.json duration:3