Gradient brushes
Linear, radial, and conic fills use Story object syntax and animate like any other property.
Sample file
- Source:
samples/story/gradient-brush.story.yaml - Gallery frame:
3.5sfrom the baked4.27ssample.
Checked-in YAML
Exact complete YAML from the checked-in sample.
yaml
story: v1beta1
name: gradient-brush-demo
canvas: 1280x720
fps: 30
script:
- create@bg:
rect: null
width: 1280
height: 720
fill: "#0b1020"
- create@title:
text: "Gradient Story Brushes"
fontSize: 52
fontFamily: "Segoe UI"
fontWeight: bold
color: "#f8fafc"
x: 640
y: 72
align: center
with: $smooth
- create@subtitle:
text: "Solid colors stay compact. Linear, radial, and conic brushes use Story object syntax."
fontSize: 24
fontFamily: "Segoe UI"
color: "#94a3b8"
x: 640
y: 122
align: center
with: $smooth
- wait: 0.2s
- create@linearCard:
rect: null
x: 130
y: 210
width: 300
height: 260
radius: 28
fill:
linear: 0%,0%,100%,100%
stops:
0: "#0ea5e9"
0.55: "#22c55e"
1: "#a855f7"
colorSpace: oklab
with: $smooth
- create@radialCard:
rect: null
x: 490
y: 210
width: 300
height: 260
radius: 28
fill:
radial: 50%,45%,55%,65%
focal: 40%,35%
stops:
- "#ffffff"
- "#38bdf8"
- "#1d4ed8"
with: $smooth
- create@conicCard:
rect: null
x: 850
y: 210
width: 300
height: 260
radius: 28
fill:
conic: 50%,50%,0deg,360deg
stops:
- "#ef4444"
- "#facc15"
- "#22c55e"
- "#3b82f6"
- "#ef4444"
with: $smooth
- create@linearLabel:
text: "linear"
fontSize: 30
fontFamily: "Segoe UI"
fontWeight: semiBold
color: "#ffffff"
x: 280
y: 505
align: center
- create@radialLabel:
text: "radial"
fontSize: 30
fontFamily: "Segoe UI"
fontWeight: semiBold
color: "#ffffff"
x: 640
y: 505
align: center
- create@conicLabel:
text: "conic"
fontSize: 30
fontFamily: "Segoe UI"
fontWeight: semiBold
color: "#ffffff"
x: 1000
y: 505
align: center
- wait: settle
- set:
linearCard.fill:
linear: 0%,0%,100%,100%
stops:
0: "#f97316"
0.55: "#ec4899"
1: "#8b5cf6"
colorSpace: oklab
radialCard.fill:
radial: 50%,45%,55%,65%
focal: 40%,35%
stops:
- "#fff7ed"
- "#fb923c"
- "#7c2d12"
conicCard.fill:
conic: 50%,50%,0deg,360deg
stops:
- "#14b8a6"
- "#84cc16"
- "#eab308"
- "#f97316"
- "#14b8a6"
with:
tween: 1.0s
- wait: settle
- create@mixed:
rect: null
x: 260
y: 575
width: 760
height: 80
radius: 40
fill:
linear: 0,50%,100%,50%
stops: ["#f97316", "#ec4899", "#8b5cf6"]
with: $smooth
- wait: 1.0sMechanics walkthrough
- Each card uses a different brush object:
linear,radial, andconic, with inline stops that stay readable in YAML. - The second
setswaps every brush definition in place and uses a1.0stween so the gradient change is part of the same documented sample, not a post-processed screenshot. - The final
mixedpill reuses the same object syntax on a wide horizontal element, which is why the gallery frame was captured after that element appears.
Preview and export
powershell
story preview samples\story\gradient-brush.story.yaml
story export samples\story\gradient-brush.story.yaml
story frame samples\story\gradient-brush.story.yaml --time 3.5 -o docs\public\images\examples\gradient-brush.png