Path motion and trim

One Bézier curve drives both stroke reveal and marker travel.

Sample file

• Source: samples/story/path-motion-trim.story.yaml
• Gallery frame: 2.1s from the baked 5.00s sample.

Checked-in YAML

Exact complete YAML from the checked-in sample.

story: v1beta1
name: path-motion-trim
canvas: 1280x720
fps: 60

script:
  - create@background:
      rect: 0,0,1280,720
      fill: "#0b1020"

  - create@title:
      text: "Path Motion + Trim"
      fontSize: 44
      fontFamily: "Segoe UI"
      fontWeight: semi-bold
      color: "#f8fafc"
      x: 640
      y: 78
      align: center

  - create@subtitle:
      text: "One curve · matching duration and easing"
      fontSize: 20
      fontFamily: "Segoe UI"
      color: "#94a3b8"
      x: 640
      y: 126
      align: center

  # The dim guide shows the complete route.
  - create@guide:
      path: "M 140,500 C 300,150 560,150 640,360 C 720,570 980,570 1140,220"
      fill: null
      stroke: "#25324a"
      strokeWidth: 8
      cap: round
      join: round

  # The bright path starts empty and reveals behind the moving marker.
  - create@route:
      path: "M 140,500 C 300,150 560,150 640,360 C 720,570 980,570 1140,220"
      fill: null
      stroke: "#38bdf8"
      strokeWidth: 8
      cap: round
      join: round
      trimStart: 0
      trimEnd: 0

  - create@markerHalo:
      ellipse: null
      width: 34
      height: 34
      fill: "rgba(56,189,248,0.22)"
      x: 140
      y: 500
      align: center

  - create@marker:
      ellipse: null
      width: 18
      height: 18
      fill: "#f8fafc"
      x: 140
      y: 500
      align: center

  # Actions without an intervening wait begin at the same story time.
  - set@reveal:
      route.trimEnd: 1
    with:
      tween: 3s
      easing: 0.42,0,0.58,1

  - motion@haloTravel: $markerHalo
    path: "M 140,500 C 300,150 560,150 640,360 C 720,570 980,570 1140,220"
    with:
      tween: 3s
      easing: 0.42,0,0.58,1

  - motion@markerTravel: $marker
    path: "M 140,500 C 300,150 560,150 640,360 C 720,570 980,570 1140,220"
    with:
      tween: 3s
      easing: 0.42,0,0.58,1

  - wait: $markerTravel
  - wait: 0.8s

  - create@complete:
      text: "The marker and revealed stroke share the same arc-length progress."
      fontSize: 22
      fontFamily: "Segoe UI"
      color: "#cbd5e1"
      x: 640
      y: 650
      align: center
    with: $fade

  - wait: 1.2s

Mechanics walkthrough

1. The dim guide path shows the full route while route.trimEnd starts at 0, so the bright stroke can reveal progressively.
2. set@reveal, motion@haloTravel, and motion@markerTravel all begin at the same story time because there is no wait between them.
3. Matching 3s tweens and the same easing curve keep the moving marker, halo, and trimmed stroke in lockstep arc-length progress.

Preview and export

story preview samples\story\path-motion-trim.story.yaml
story export samples\story\path-motion-trim.story.yaml
story frame samples\story\path-motion-trim.story.yaml --time 2.1 -o docs\public\images\examples\path-motion-trim.png

Learn / Reference / Specs

Learn

• Animation and timing
• Preview, live, and export

Reference

• Story CLI
• Story syntax

Specs

• RUNE-1015 Story motion action
• RUNE-1016 Story path trim
• RUNE-304 Drawing