Animated recipe card videos for social

A recipe card video for social is one of the highest-converting formats food brands have. It also happens to be one of the most painful to produce — five plates, three reshoots, an editor in After Effects scrubbing through a sous chef's timing. None of that scales past a handful of dishes per week.

The version below is the entire card in HTML: ingredients that check themselves off, a step counter that ticks, a circular timer that fills. Drop a recipe JSON in, render an MP4, post the same day.

What the card animates

Three independent timelines, one composition:

1. Ingredients check off at 0.5s intervals. Each row gets a green-filled checkmark and a strikethrough on the ingredient name. The check-glyph is an SVG path with stroke-dashoffset animated — the line draws itself.
2. Step counter ticks at 0.6s intervals starting at 3.0s. The big number changes (1 → 2 → 3 → 4 → 5), the text beneath it changes with it.
3. Circular timer fills smoothly across the full 6 seconds, and a numeric countdown (15:00 → 0:00) ticks underneath. Quadratic-out easing so it slows toward the end.

The SVG ring timer

A circular progress ring is two concentric <circle> elements: a gray track and a colored arc. The arc's length is 2πr ≈ 380 for r=60. Animate stroke-dashoffset from 380 (empty) to 0 (full):

<svg viewBox="0 0 140 140">
  <circle class="bg-c" cx="70" cy="70" r="60" />
  <circle class="fg-c" id="fg" cx="70" cy="70" r="60"
          stroke-dasharray="380" stroke-dashoffset="380" />
</svg>

const p = Math.min(1, t / 6);
const eased = 1 - Math.pow(1 - p, 2);
fg.style.strokeDashoffset = 380 * (1 - eased);

The trick is transform: rotate(-90deg) on the SVG. Without it, the arc starts drawing from the 3 o'clock position; with it, it starts from 12 o'clock, which reads as "timer start."

The check-mark draw

Each checkmark is an SVG path with stroke-dasharray equal to its total length. Setting stroke-dashoffset to that length hides it; animating to 0 reveals it left-to-right:

.chk svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

const p = Math.min(1, (t - start) / 0.35);
path.style.strokeDashoffset = 24 * (1 - easeOut(p));

The 24 is approximate path length — measure with path.getTotalLength() once if your icon differs.

Customize the recipe

The JSON, the loop

{
"slug": "lemon-garlic-pasta",
"dish": "Lemon Garlic Pasta",
"tag": "15-minute dinner",
"minutes": 15,
"serves": 2,
"ingredients": [
  { "name": "Spaghetti", "amt": "220 g" },
  { "name": "Garlic cloves", "amt": "4" },
  { "name": "Lemon", "amt": "1" },
  { "name": "Olive oil", "amt": "3 tbsp" },
  { "name": "Parmesan", "amt": "40 g" }
],
"steps": [
  "Boil salted water",
  "Toast garlic in olive oil",
  "Add cooked pasta",
  "Zest lemon, toss",
  "Plate with parmesan"
]
}

Aspect ratios for each platform

The card layout adapts via flexbox, but you'll want different aspect ratios for different feeds:

• Instagram feed / Pinterest pin: 1080×1350 (4:5) — the column layout stacks vertically.
• Reels / TikTok / Shorts: 1080×1920 (9:16) — single column, ingredients above timer.
• YouTube thumbnail card: 1920×1080 (16:9) — the two-column layout from the demo, scaled up.

The CSS uses flex and percentages; the same HTML renders correctly across all three. The hf-seek timing is resolution-independent.

Render to MP4

hyperframes render input.html --out clip.mp4 --duration 6 --fps 30

For Reels, --width 1080 --height 1920. For Pinterest, --width 1080 --height 1350. See the quickstart for the full flag list, and the programmatic video recipe for batch operations.

Iterate the recipe text and color palette in the playground before locking the render — flatten the easing values once, then scale to your whole recipe catalog.

FAQ

How many ingredients fit on a recipe card video?

Five to seven is the comfort zone. Each check-off takes 0.5s, so seven ingredients consume 3.5s before the step counter even starts — that pushes the total runtime to 8 seconds. For longer ingredient lists, condense pantry staples ("salt + pepper" as one row) or split the card into two scenes.

Can I add a food photo to the card?

Yes. Add an <img> element at the top of the card and inline the photo as a base64 data URL. Fade it in over the first 0.5s alongside the title. For social, a hero photo on the card raises stop rate substantially.

How do I display metric and imperial units?

Render two MP4s per recipe — one with metric JSON, one with imperial. The same HTML template ingests either. Tag the output files (pasta-metric.mp4, pasta-imperial.mp4) and serve based on the viewer's geo or account preference.

Will the timer match a real cooking timer?

The countdown number is a scaled remap of t, not real seconds. For social video, a 6s loop showing a 15-minute timer compressing is the standard "time-lapse" effect — viewers read it as a cue, not a literal stopwatch. If you need real seconds, set --duration equal to the actual cook time.

Can I use this for cocktail recipes or coffee drinks?

Yes — the pattern is generic. Replace "ingredients" with "items," "steps" with "preparation," and the timer with a "serve at temp" badge. The check-off and step-counter animations carry equal weight in any structured recipe context.

Related: animated invoice summary video, animated KPI stat cards, batch personalized videos from CSV.