Quick start

This page explains the canonical Hello World in short pieces before showing the full file. The finished version stays checked in as samples/story/quick-start.story.yaml.

If the story command is not installed yet, complete Installation first.

If you have not read Core concepts yet, do that first. It defines Story, canvas, script, Action, Sprite, tokens, and wait.

1. Start the file

Create hello-rune.story.yaml:

story: v1beta1
name: hello-rune
canvas: 1280x720

script:

This gives the Story a version, a name, a 1280×720 canvas, and an empty action list.

2. Paint the background

Add one create action:

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

bg is the sprite name. rect is the sprite constructor. Because the rectangle already includes x, y, width, and height, there is nothing else to set yet.

3. Add centered text sprites

Now create the title and subtitle:

- create@title:
    text: "Hello, Rune Story"
    fontSize: 64
    fontFamily: "Segoe UI"
    fontWeight: bold
    color: "#f8fafc"
    x: 640
    y: 220
    align: center

- create@subtitle:
    text: "The public beta uses story: v1beta1"
    fontSize: 24
    fontFamily: "Segoe UI"
    color: "#94a3b8"
    x: 640
    y: 300
    align: center

These are the same text sprite fields you see across the checked-in samples. align: center makes x and y refer to the center of the text instead of its top-left corner.

4. Add one moving card

Create a simple rounded rectangle, then move it with a spring:

- create@card:
    rect: null
    width: 280
    height: 180
    x: 220
    y: 470
    align: center
    radius: 28
    fill: "#38bdf8"

- set:
    card.x: 1060
  with:
    spring: 0.8, 15

- wait: settle
- wait: 0.8s

This is the first time the file uses time explicitly:

• set changes card.x,
• with: spring: 0.8, 15 animates the change,
• wait: settle blocks until the spring settles,
• wait: 0.8s holds the last frame a little longer.

5. Preview and export

Preview while you edit:

story preview hello-rune.story.yaml

Then export the same file:

story export hello-rune.story.yaml

If the preview opens and the card crosses the canvas, you have a working first Story.

6. Full canonical sample

Once the snippets above make sense, compare or replace your file with the complete checked-in sample:

story: v1beta1
name: hello-rune
canvas: 1280x720

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

  - create@title:
      text: "Hello, Rune Story"
      fontSize: 64
      fontFamily: "Segoe UI"
      fontWeight: bold
      color: "#f8fafc"
      x: 640
      y: 220
      align: center

  - create@subtitle:
      text: "The public beta uses story: v1beta1"
      fontSize: 24
      fontFamily: "Segoe UI"
      color: "#94a3b8"
      x: 640
      y: 300
      align: center

  - create@card:
      rect: null
      width: 280
      height: 180
      x: 220
      y: 470
      align: center
      radius: 28
      fill: "#38bdf8"

  - set:
      card.x: 1060
    with:
      spring: 0.8, 15

  - wait: settle
  - wait: 0.8s

Next steps

• Read Animation and timing to go beyond one spring.
• Read Layout and cameras to work in world and screen space.
• Read Preview, live, and export for the main CLI workflows.