Skip to content

Recipe Steps

A hand-drawn glass fills step by step while a recipe card and step dots count you through it.

16:9Medium pace8.5swarmfriendlyhand-made

Warm, illustrated how-to style for recipes, setup guides and any process with a handful of steps. A centred SVG vessel with a soft ink outline fills layer by layer: liquids rise with a wobbling surface, ingredients drop in, bottles tilt and pour. A chunky red rounded title sits on top, a white step card on the right shows 'STEP 3 OF 5', a big quantity and the ingredient with a progress bar, numbered dots along the bottom fill as you advance, and it ends on a celebratory finish card.

Use this style

With Frame Jam installed, press Use this style in the local gallery, or just ask your agent:

Make a video with the Frame Jam style "recipe-steps" and open it for review.

style.json Install Frame Jam

Palette

background#fbf6ec

ink#3b2f2f

red#e5484d

redSoft#f6c3c4

muted#6b5d55

inactive#c9c0b4

glassTint#e3f1f1

card#fffdf8

matcha#86b552

honey#f0a93b

Type

Display: Baloo 2 700, 800Title 120px in red with a 4px ink stroke and a 6px soft-pink offset shadow; card quantity 104px, ingredient 50px, step labels 26–28px tracked 0.06–0.08em
Body: Patrick Hand 400Subtitle 40px, card notes 30px, measurement tick labels 30px in muted brown

Motion

Pour: power2.inOut
Level: power1.inOut
Wobble: elastic.out(1, 0.3)
Drop: bounce.out
Pop: back.out(2)
Average shot: 1.2s

Intro title 1.2s, then one step every 0.9–1.5s (pours get the longer slots), then a 1.5s finish card. Something always moves: the liquid surface scrolls its wave continuously.

Transitions and text

no scene cuts: one continuous illustrated set where only the vessel, card and dots change
card content crossfades (out 0.15s up, in 0.25s from 16px below) with a 3% card bump on each step
props (bottle, jug, spoon) enter from the upper left, tilt to pour, then leave the way they came
title letters rise from below at scale 2.2 with back.out, 0.04s stagger
card quantity and ingredient swap per step; progress bar scaleX fills over the step
step dot ring turns red and pops 1.25×, then fills red with a white check when the step ends
measurement tick label turns red when the liquid reaches it

Style guide your agent follows

Cream #fbf6ec background with a faint dot grain; every drawing has a 4–5px #3b2f2f round-joined outline and a flat light fill, so it feels hand-drawn. Never use gradients or photos.
Layout is fixed: red Baloo 2 800 title (120px, 4px ink stroke, 6px #f6c3c4 offset shadow) and Patrick Hand subtitle at top, the vessel centred-left (~360px wide), measurement ticks right of it, the step card at x≈1150, numbered dots along y≈950.
Liquids are clipped layers with a sine-wave top that scrolls continuously; raise them with power1.inOut and finish with an elastic.out(1, 0.3) rotation wobble. Solid ingredients drop with bounce.out.
Pours: the prop tilts to ~115° around its mouth, a 16px outlined stream grows to the surface (attr height), then retracts downward before the prop leaves.
The card always shows 'STEP N OF M' (red, tracked), a big quantity ('6 OZ', '1 TSP', '10 SEC'), the ingredient, a one-line note and a progress bar. Keep it to 4–6 steps.
Step dots: grey outline = upcoming, red ring = current (pop 1.25×), red fill with white check = done; connectors fill red as you advance.
Finish with an 'ALL DONE!' card (slight -2.5° tilt, back.out), red celebration rays drawing on around the vessel and every dot filled.