Examples
These checked-in stories are grouped by what you learn next, not by file name. Every featured page includes a real frame rendered from the matching sample, the exact checked-in YAML (or a clearly labeled deterministic excerpt for longer files), a mechanics walkthrough, and supported CLI commands.
Start here
| Preview | Example |
|---|---|
![]() | Hello Rune example Minimal create → set → wait authoring with one spring-settled move.story preview samples\story\quick-start.story.yaml |
![]() | Settle demo What wait: settle feels like across stiff, normal, and bouncy springs.story preview samples\story\settle-demo.story.yaml |
More checked-in starts: sample.story.yaml, property-binding.story.yaml
Motion and animation
| Preview | Example |
|---|---|
![]() | Path motion and trim One curve drives both stroke reveal and marker travel. story preview samples\story\path-motion-trim.story.yaml |
More checked-in motion studies: motion-blur-demo.story.yaml
Composition
| Preview | Example |
|---|---|
![]() | Camera, world, and HUD composition Camera and world transforms move the stage while the HUD stays in screen space. story preview samples\story\camera-world-demo.story.yaml |
![]() | Layer 3D store window A rigid plane subtree enters in perspective before later 3D interaction scenes. story preview samples\story\layer-3d-store-window.story.yaml |
More checked-in composition samples: composite-sprite.story.yaml
Visual systems
| Preview | Example |
|---|---|
![]() | Gradient brushes Linear, radial, and conic fills rendered from Story object syntax. story preview samples\story\gradient-brush.story.yaml |
More checked-in visual systems: svg-demo.story.yaml, shadow-api.story.yaml, shader-contour-dots.story.yaml
Data and presentation
| Preview | Example |
|---|---|
![]() | Presentation demo Cue-driven slides, morphing, and live chart updates in one deck. story live samples\story\presentation-demo.story.yaml |
More checked-in data/presentation samples: chart-test.story.yaml, solari-board.story.yaml
Media and narration
| Preview | Example |
|---|---|
![]() | Video playback A checked-in MP4 becomes a Story sprite driven by playback@....story preview samples\story\video-demo.story.yaml |
![]() | TTS demo Speech labels, subtitle sync, and narration-driven tween timing. story preview samples\story\tts-demo.story.yaml |
More checked-in media samples: image-demo.story.yaml
How to use this gallery
- Use Start here first if you want the smallest runnable files.
- Use Motion and animation and Composition once you are comfortable reading
set,motion, andwaitflows. - Use Visual systems, Data and presentation, and Media and narration when you want feature-specific samples with real assets and richer timelines.
- Use Reference for generated CLI and syntax material, and Specs for developer-facing contracts.








