מה אפשר
לבקש.

<inputs>
Ask me for the data series (one value per day) and its label. If I skip it, invent a plausible 30-day series of workout minutes that trends upward with natural noise, and say so.
</inputs>

<direction>
A 7-second clip, 1920x1080, 60fps. A Recharts AreaChart draws itself from left to right as the data is revealed. A dot in the accent colour rides the tip of the line. At the end, a dashed goal line at 60 lands on a beat with the label "יעד: 60 דקות".
Look: light background #EEF3FB, navy text and grid #12163F, the line is a gradient #FFC74E → #FF8F3A → #F56B49, the area fill is the same orange fading to transparent. Axis labels in Hebrew in Assistant; the title in Karantina 700. Swap the colours and fonts for your brand.
Banned: 3D charts, drop shadows on the line, legends that nobody needs, gridlines on both axes.
</direction>

<structure>
120 BPM, a beat every 0.5s. Beats 0-1: the empty axes. Beats 1-9: the line draws with an ease-in-out. Beat 10: the goal line springs in. Beats 10-13: hold, with the dot pulsing once per beat.
</structure>

<build>
One HTML file with React and Recharts that exposes window.seek(t). Every frame is computed from t alone: no CSS transitions, no timers, no state between frames.
Set isAnimationActive={false} on every series. For each frame, compute how far along the line we are, pass only the points revealed so far plus one interpolated point at the tip, and render with flushSync so the DOM is ready before the screenshot.
Use type="monotone" for the curve. The goal line's stroke width and label size come from a closed-form spring of t.
Render with Playwright at 60fps and assemble with ffmpeg.
</build>

<gotchas>
- Recharts animates on its own clock by default. If isAnimationActive is left on anywhere, captured frames jump.
- Fix the Y axis domain (for example 0 to 80), or the axis rescales every frame as points are added.
- Wait for document.fonts.ready before the first frame.
</gotchas>

<start>
Show me 3 stills (beat 1, beat 6, beat 12) before rendering the full clip.
</start>

<inputs>
Ask me for the 7 values and which bar to highlight. If I skip them, use workout minutes for a week (Sunday to Saturday) and highlight Friday.
</inputs>

<direction>
A 5.5-second clip, 1080x1920 for Reels, 60fps. A Recharts BarChart of 7 days where each bar springs up on its own beat, overshoots slightly and settles. The highlighted bar is filled with the gradient #FFC74E → #FF8F3A → #F56B49; the others are navy #12163F on a light #EEF3FB background. Day labels in Hebrew (א׳ to ש׳), ordered right to left. The value appears above each bar once it is most of the way up.
Banned: bars growing all at once, bouncing more than once, 3D bars.
</direction>

<structure>
120 BPM. Bar i lands on beat i+1 (0.5s apart). The highlighted bar gets a small extra scale pop on its beat.
</structure>

<build>
One HTML file with React and Recharts that exposes window.seek(t); every frame is computed from t alone, no CSS transitions or timers.
BarChart with isAnimationActive={false}. Each bar's value = target × spring(t − beatTime), where spring is this closed-form damped spring with ω = 13 and ζ = 0.5: spring(t) = 1 − e^(−ζωt)·(cos(ω_d·t) + (ζω/ω_d)·sin(ω_d·t)), ω_d = ω·√(1 − ζ²). Use Cell for per-bar colours. Render each frame with flushSync. Capture with Playwright at 60fps and assemble with ffmpeg.
</build>

<gotchas>
- Clamp the spring at 0 so a bar never dips below the axis.
- Fix the Y domain so the axis does not rescale while bars grow.
- Reverse the data order (or use reversed on the X axis) so the week reads right to left.
</gotchas>

<start>
Show me stills at beats 2, 5 and 10 before the full render.
</start>

<inputs>
Ask me for up to three KPIs (value, label, optional suffix like % or +). If I skip them, use: 1,248 "דקות אימון", 30 "ימים ברצף", +38% "שיפור החודש".
</inputs>

<direction>
A 4.5-second clip, 1920x1080, 60fps. Three KPI tiles side by side, ordered right to left. Each number counts up from 0 to its value and lands with a small overshoot, one tile per beat. Numbers in Inter 800, labels in Hebrew in Karantina 700. Light tiles #EEF3FB on white, navy numbers #12163F, the middle number in orange #B4501A.
Banned: slot-machine rolling digits, confetti, numbers that keep moving after they land.
</direction>

<structure>
120 BPM. Tile 1 starts on beat 1, tile 2 on beat 2, tile 3 on beat 3. Each count lasts 1.2s with an ease-out and a tiny spring at the end.
</structure>

<build>
One HTML file exposing window.seek(t); every value is computed from t alone, no timers or CSS transitions.
displayed = round(target × easeOut(progress(t))); format with Intl.NumberFormat('he-IL'); keep the suffix outside the number in its own span. Use font-variant-numeric: tabular-nums on every number. Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- Without tabular-nums the numbers change width every frame and the tiles shake.
- Isolate the "+" and "%" with unicode-bidi: isolate, or they jump to the wrong side in RTL.
</gotchas>

<start>
Show me one still mid-count and one at the end before rendering.
</start>

<inputs>
Ask me for the goal and the reached value. If I skip them, fill to 78% with the label "מהיעד השבועי".
</inputs>

<direction>
A 4-second clip, 1080x1080, 60fps. A circular progress ring fills from 12 o'clock to its value with a spring that settles, while the percentage counts up in the centre. Track in navy at 10% opacity, the arc in the gradient #FFC74E → #FF8F3A → #F56B49 with round caps, 22px thick at a 92px radius (scale up for 1080). Number in Inter 800, label in Hebrew in Karantina 700.
Banned: glow, multiple nested rings, a ring that spins after it lands.
</direction>

<structure>
Beat 1: the track appears. Beats 1-5: the arc fills with a closed-form spring, ω = 6 and ζ = 0.85: spring(t) = 1 − e^(−ζωt)·(cos(ω_d·t) + (ζω/ω_d)·sin(ω_d·t)), ω_d = ω·√(1 − ζ²). Beat 6: a small scale pop on the number.
</structure>

<build>
One HTML file exposing window.seek(t); every attribute is computed from t, no CSS transitions.
SVG circle with stroke-dasharray = 2πr and stroke-dashoffset = 2πr × (1 − progress(t)), rotated −90° around its centre so it starts at 12 o'clock. The number uses tabular-nums. Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- With round caps, a 0% ring still shows a dot. Hide the arc until progress passes 1%.
- Set the dash values as attributes every frame; a CSS transition on stroke-dashoffset would run on the wall clock.
</gotchas>

<start>
Show me a still at 50% and at the end before rendering.
</start>

<inputs>
Ask me for the features to show (a short Hebrew label each). If I skip them, use 4 fitness features: אימון כוח, שריפת קלוריות, דופק, טיימר.
</inputs>

<direction>
A 5-second clip, 1920x1080, 60fps. Four Lucide icons (Dumbbell, Flame, HeartPulse, Timer) in a row, right to left. Each icon draws itself stroke by stroke on its own beat, then its Hebrew label rises out of a mask line under it. When all are drawn, they light up in orange #FF8F3A together. Icons navy #12163F, stroke width 2, on #EEF3FB. Labels in Karantina 700.
Banned: icons fading in, mixing icon libraries, filled icons.
</direction>

<structure>
120 BPM. Icon i starts drawing on beat i+1 and takes 1 beat. All light up on beat 7.
</structure>

<build>
One HTML file with React and lucide-react, exposing window.seek(t); everything is computed from t, no CSS transitions.
Give every path pathLength="1", set stroke-dasharray to 1, and animate stroke-dashoffset from 1 to 0 with an eased progress of t. Multi-path icons draw their paths in sequence. Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- Without pathLength="1", paths of different lengths draw at different speeds.
- lucide-react sets stroke on the svg element; set the dash styles on each child path, circle and line.
</gotchas>

<start>
Show me a still at beat 2 and at beat 7 before rendering.
</start>

<inputs>
Ask me which brands to show and confirm that I have the right to show each of them. If I skip it, use the tools this project was built with: Claude, React, Three.js, Tailwind CSS, shadcn/ui, FFmpeg, Node.js, GitHub.
</inputs>

<direction>
A 4.5-second "built with" clip, 1920x1080, 60fps. A grid of official logos pops in on the beat, one after another from the right, each in its official brand colour on white tiles over #EEF3FB. A title above in Karantina 700: "נבנה עם". Logos keep their exact proportions and colours.
Banned: recoloured logos, logos with glow or shadows, logos drawn from memory, distortion.
</direction>

<structure>
120 BPM, 16th-note stagger: a new logo every 0.125s, each with a short spring scale from 0.6 to 1.
</structure>

<build>
One HTML file exposing window.seek(t); everything is computed from t, no CSS transitions.
Import each logo from the simple-icons npm package (import { siReact } from 'simple-icons'), use its .path in a 24×24 viewBox and "#" + its .hex as the fill (.hex comes without the #). Do not redraw or modify any logo. Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- Some brands (for example GitHub) have black logos; on a dark background, switch to the brand's official white version, never an invented colour.
- simple-icons occasionally removes logos at a brand's request; if one is missing, ask me for the official file instead of approximating it.
</gotchas>

<start>
List the logos you will use and their hex colours, then show me the final frame before rendering.
</start>

<inputs>
Ask me for the request that types into the field. If I skip it, use "השקה לאפליקציית כושר".
</inputs>

<direction>
A 6-second clip, 1920x1080, 60fps. A large white pill-shaped input field on the sky gradient #5EA9F2 → #93CBFF → #DDF0FF. Around it, an iridescent neon edge (a conic gradient of #5DE4E9, #4FA3FF, #8B6CFF, #FF66C4, #FF8F3A, #FFC74E) rotates slowly, with a soft blurred halo behind it that swells on every beat. The placeholder "על מה הסרטון?" is replaced by the request typing in, with a blinking caret, and a round send button in the fire gradient. Hebrew in Assistant, right to left.
Banned: a glow that covers the text, neon on more than this one element, flicker.
</direction>

<structure>
120 BPM. The halo pulses on every beat. Typing starts on beat 2 at one letter per 16th note.
</structure>

<build>
One HTML file exposing window.seek(t); every style is computed from t.
The ring is a pseudo-element with background: conic-gradient(from var(--ang), …), masked to a 4px ring (-webkit-mask-composite: xor plus the standard mask-composite: exclude); a second copy behind it has filter: blur(22px). Set --ang = t × 1.5rad and the halo opacity from a beat-synced spring on every frame. Do not use a CSS keyframe animation.
Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- A CSS @keyframes rotation runs on the wall clock and breaks the capture. Set the angle from t.
- If you register --ang with @property and inherits: false, a value set on the element never reaches its ::before. Leave it unregistered (plain custom properties inherit) or register it with inherits: true.
- Keep the mask on both -webkit-mask (with -webkit-mask-composite: xor) and mask (with mask-composite: exclude).
</gotchas>

<start>
Show me a still before typing and one mid-typing before rendering.
</start>

<inputs>
Ask me for the number and label on the card. If I skip them, use 268 "דקות השבוע" with a "+12%" chip.
</inputs>

<direction>
A 10-second loopable clip, 1080x1920, 60fps. Four large soft colour blobs (#FF8F3A, #5EA9F2, #FFC74E, #D74270) drift slowly on navy #12163F. A frosted glass card floats in the centre: background white at 16% opacity, a 1.5px white border at 40%, strong backdrop blur and saturation. On it, a big number in Inter 800, a Hebrew label in Karantina 700, and a small fire-gradient chip. The card springs in at the start.
Banned: a glass card over a flat background, heavy drop shadows, noise textures on the card.
</direction>

<structure>
The card springs in on beat 1 at 120 BPM; the blobs complete whole cycles over 10s so the clip loops.
</structure>

<build>
One HTML file exposing window.seek(t); blob positions and the card's scale are computed from t, no CSS animations.
The card uses backdrop-filter: blur(22px) saturate(1.6) (plus -webkit-backdrop-filter). Blob positions = sin/cos of t with different speeds, each completing an integer number of cycles in 10s.
Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- backdrop-filter only shows when something moves behind the card; keep the blobs passing under it.
- An ancestor with opacity below 1, filter, mask, clip-path, mix-blend-mode or will-change creates a new backdrop root and the card stops seeing the blobs; keep those off the card's ancestors.
</gotchas>

<start>
Show me one still before rendering.
</start>

<inputs>
Ask me for the headline that sits on top. If I skip it, use "FLY HIGH" in Anton.
</inputs>

<direction>
A 14-second loopable background clip, 1920x1080, 60fps. Five huge soft colour blobs (#5EA9F2, #FF8F3A, #FFC74E, #D74270, #93CBFF) drift slowly on navy #12163F and blend into an aurora, with fine film grain on top. The headline sits centred in white.
Banned: hard edges, fast movement, a rainbow, grain so strong it looks dirty.
</direction>

<structure>
No beat sync: the motion is slow and continuous. Every blob completes a whole number of cycles in 14s so the clip loops.
</structure>

<build>
One HTML file exposing window.seek(t), drawing on a 2D canvas.
Draw five large circles with ctx.filter = 'blur(70px)' at positions from sin/cos of t with different speeds. Overlay a tiled noise texture generated once from a seeded random function, at about 9% opacity.
Capture with Playwright at 60fps. Encode with ffmpeg at a high bitrate (or -tune grain) so the compression keeps the grain.
</build>

<gotchas>
- Smooth gradients band after video compression. The grain hides it, but only if the encoder keeps it.
- Generate the noise from a fixed seed so every frame uses the same pattern (a changing pattern looks like TV static).
</gotchas>

<start>
Show me one still with and one without grain before rendering.
</start>

<inputs>
Ask me for the scenes on each side of each transition. If I skip them, use simple Hebrew title cards in my brand.
</inputs>

<direction>
An 11-second clip, 1920x1080, 60fps, showing four transitions in a row. FLOOD: a "התחל" button is pressed and its fire gradient floods the frame as a growing circle. MORPH: a navy pill widens, then grows into a card with a progress bar. WIPE: a new page slides in from the right led by a fire-gradient band. IRIS: the frame closes into a shrinking circle that becomes the dot of the YUV.AI logo.
Colours: navy #12163F, denim #AFCBEF, light #EEF3FB and #DDF0FF, fire #FFC74E → #FF8F3A → #F56B49. Hebrew titles in Karantina 700.
Banned: crossfades, blur transitions, any transition that does not start from an object already on screen.
</direction>

<structure>
120 BPM. Each transition gets 2.8s; the main motion of each starts on a downbeat and takes about one beat.
</structure>

<build>
One HTML file exposing window.seek(t), drawing on a 2D canvas.
Flood: radius = distance from the button to the farthest corner × 1.03 × easeOut(progress). Morph: width, height and corner radius each follow a sum of springs. Wipe: clip the new page to a rectangle whose edge follows an eased progress, and draw a fire band at the edge. Iris: radius interpolated in log space, exp(lerp(log(rStart), log(rEnd), easeInOut(p))).
Capture with Playwright at 60fps, assemble with ffmpeg.
</build>

<gotchas>
- A flood radius smaller than the farthest corner leaves a sliver of the old scene.
- Linear iris shrinking crawls at the start and snaps shut at the end; use log space.
- Give each layer an explicit z-order so the flood covers the old scene but not the label it came from.
</gotchas>

<start>
Show me one still in the middle of each transition before rendering.
</start>