Settle demo
Three spring presets, repeated wait: settle, and one final convergence shot.
Sample file
- Source:
samples/story/settle-demo.story.yaml - Gallery frame:
10.8sfrom the baked12.13ssample.
Checked-in YAML
Exact complete YAML from the checked-in sample.
yaml
# ── Perceptual Settle Time Demo ──────────────────────────────────
# Demonstrates how perceptual settle cuts the invisible oscillation
# tail from spring animations, making transitions snappier.
# Run with: story export settle-demo.story.yaml
# story preview settle-demo.story.yaml
story: v1beta1
name: settle-demo
canvas: 1280x720
tokens:
- spring@bouncy: 0.3, 12
- spring@normal: 0.7, 12
- spring@stiff: 0.8, 15
script:
# ── Background ─────────────────────────────────────────────────
- create@bg:
rect: 0,0,1280,720
fill: "#0d1117"
- create@title:
text: "Perceptual Settle Demo"
fontSize: 48
fontFamily: "Segoe UI"
fontWeight: bold
color: "#58a6ff"
x: 80
y: 40
- create@subtitle:
text: "spring animations with settle wait"
fontSize: 24
fontFamily: "Segoe UI"
color: "#8b949e"
x: 80
y: 100
- wait: 1s
# ── Test 1: Stiff spring (ζ=0.8) ──────────────────────────────
- create@label1:
text: "ζ=0.8 stiff"
fontSize: 20
fontFamily: "Segoe UI"
color: "#8b949e"
x: 80
y: 180
- create@box1:
rect: null
fill: "#238636"
width: 80
height: 80
x: 80
y: 220
- set:
box1.x: 1100
with: $stiff
- wait: settle
- set:
box1.x: 80
with: $stiff
- wait: settle
# ── Test 2: Normal spring (ζ=0.7) ─────────────────────────────
- create@label2:
text: "ζ=0.7 normal"
fontSize: 20
fontFamily: "Segoe UI"
color: "#8b949e"
x: 80
y: 340
- create@box2:
rect: null
fill: "#1f6feb"
width: 80
height: 80
x: 80
y: 380
- set:
box2.x: 1100
with: $normal
- wait: settle
- set:
box2.x: 80
with: $normal
- wait: settle
# ── Test 3: Bouncy spring (ζ=0.3) ─────────────────────────────
- create@label3:
text: "ζ=0.3 bouncy"
fontSize: 20
fontFamily: "Segoe UI"
color: "#8b949e"
x: 80
y: 500
- create@box3:
rect: null
fill: "#da3633"
width: 80
height: 80
x: 80
y: 540
- set:
box3.x: 1100
with: $bouncy
- wait: settle
- set:
box3.x: 80
with: $bouncy
- wait: settle
# ── Simultaneous multi-property ────────────────────────────────
- set:
subtitle.color: "#58a6ff"
- set:
title.y: -80
subtitle.y: -80
label1.y: -80
label2.y: -80
label3.y: -80
with: $normal
- wait: settle
- create@final-label:
text: "All three at once"
fontSize: 28
fontFamily: "Segoe UI"
fontWeight: bold
color: "#ffffff"
x: 80
y: 40
- set:
box1.x: 600
box1.y: 200
box2.x: 600
box2.y: 200
box3.x: 600
box3.y: 200
with: $normal
- wait: settle
- set:
box1.x: 200
box1.y: 300
box2.x: 600
box2.y: 500
box3.x: 1000
box3.y: 300
with: $bouncy
- wait: settle
- set:
box1.opacity: 0
box2.opacity: 0
box3.opacity: 0
final-label.opacity: 0
with: $stiff
- wait: settle
- wait: 1sMechanics walkthrough
- The sample defines
$bouncy,$normal, and$stiffspring tokens, then reuses them on three matching boxes so timing differences are easy to compare. - Each forward and return motion is followed by
wait: settle, which trims the invisible oscillation tail instead of waiting for mathematical infinity. - The gallery frame at
10.8slands in the final triangular arrangement, after the combined move has finished but before the fade-out begins.
Preview and export
powershell
story preview samples\story\settle-demo.story.yaml
story export samples\story\settle-demo.story.yaml
story frame samples\story\settle-demo.story.yaml --time 10.8 -o docs\public\images\examples\settle-demo.png