> ## Documentation Index > Fetch the complete documentation index at: https://docs.bfl.ml/llms.txt > Use this file to discover all available pages before exploring further. # Image-to-Video > Animate a still image with FLUX 3 — pin a startframe, set a start and end frame, or interpolate through several keyframes. export const HoldToAnimate = ({image, video, alt = "", aspectRatio = "16 / 9", borderRadius = "0.75rem", label = "Hold to animate"}) => { const videoRef = useRef(null); const [playing, setPlaying] = useState(false); const [muted, setMuted] = useState(true); const [showStill, setShowStill] = useState(true); const play = () => { const v = videoRef.current; if (!v) return; setShowStill(false); const p = v.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); setPlaying(true); }; const pause = (reset = true) => { const v = videoRef.current; if (!v) return; v.pause?.(); if (reset) { try { v.currentTime = 0; } catch (e) {} setShowStill(true); } setPlaying(false); }; const onPressStart = () => play(); const onPressEnd = () => pause(true); const toggleMute = e => { e.stopPropagation(); const v = videoRef.current; const next = !muted; setMuted(next); if (v) v.muted = next; }; const iconBtn = { position: "absolute", top: "0.9rem", right: "0.9rem", zIndex: 3, display: "inline-flex", alignItems: "center", justifyContent: "center", width: "2.4rem", height: "2.4rem", padding: 0, borderRadius: "999px", border: "none", background: "rgba(12, 14, 18, 0.62)", backdropFilter: "blur(6px)", color: "#fff", cursor: "pointer", transition: "background 160ms ease" }; return

{ e.preventDefault(); onPressEnd(); }} onTouchCancel={onPressEnd} onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); playing ? pause(true) : play(); } }} style={{ position: "relative", display: "block", width: "100%", aspectRatio, borderRadius, overflow: "hidden", background: "#0c0e12", cursor: "pointer", userSelect: "none", WebkitTapHighlightColor: "transparent" }}>

; }; Turning an image into video is not a single action. Depending on how strictly the model should follow your image — and whether it defines the *start*, the *end*, or just the *look* of a shot — FLUX 3 gives you several distinct ways to animate. The right approach depends on what your image should *become*: the literal opening frame of the shot, one end of a defined motion, or one of several waypoints the shot moves through. Choosing deliberately gives you far more control than sending the same image into every mode and hoping for the best. ## Overview `i2v` animates from the images you give it — all through one `keyframes` field. What changes is *how many* frames you pin and *where* they sit in the shot: | Shape | What your image(s) become | Best for | | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | **Startframe** — one image | The exact opening frame; the prompt animates forward | Bringing a single photo or render to life | | **Start + end frame** — two images | The first *and* last frame; FLUX 3 fills the motion between | Controlling exactly where a shot begins and where it lands | | **Keyframes** — three or more images, or `[seconds, image]` pairs | Ordered waypoints the shot passes through in turn, spread evenly or pinned to exact timestamps | Choreographing a shot through multiple beats | Reach for **Startframe** when the result must begin exactly on your image, **Start + end frame** when you know both ends of the motion, and **Keyframes** when the shot has to hit several specific moments along the way. Timestamped and 3+ keyframe requests need an explicit `duration`. ## Startframe In `i2v`, your image sets the opening frame and the prompt drives the motion. Press and hold any frame below to preview the video FLUX 3 generates from that single still — release to snap back to the source image. ### Examples Notice how the source frame is preserved exactly at the start of each clip — that first-frame fidelity is what makes **Startframe** the most literal way to animate an image. ## Start + end frame Give FLUX 3 two stills — the frame the shot should *open* on and the frame it should *land* on — and it generates the motion that carries one into the other. Reach for this when both ends of a shot matter: a reveal that has to resolve on a specific composition, a transformation with a defined before and after, or a loop that must return to where it began. Keep the two frames related — same subject, scene, or camera setup — so the interpolation has a plausible path between them. The wider the gap between start and end, the more freedom (and unpredictability) you hand the model. ### Examples Each example shows the two input frames — the **start** and the **end** — followed by the clip FLUX 3 generated to bridge them.

Start frame

End frame

Start frame

End frame

## Keyframes Pass several stills as ordered waypoints and FLUX 3 interpolates a single continuous shot that moves through each one in turn. Where **Start + end frame** pins only the two ends, keyframes let you choreograph the moments in between — hit this pose, then this composition, then this one — while the model handles the motion connecting them. Order matters: the frames are read as a timeline from first to last. Space them so each transition is achievable, and keep the look consistent across frames so the shot reads as one take rather than a series of cuts. ### Examples Each example shows the ordered keyframes pinned along a 5-second clip (`[[0, …], [2.5, …], [5, …]]`) followed by the shot FLUX 3 interpolated through them.

Keyframe 1 — 0s

Keyframe 2 — 2.5s

Keyframe 3 — 5s

Keyframe 1 — 0s

Keyframe 2 — 2.5s

Keyframe 3 — 5s

Keyframe 1 — 0s

Keyframe 2 — 2.5s

Keyframe 3 — 5s

## Related pages Workflow selection and the broader FLUX 3 video prompting framework. Generate a shot from a text prompt when you don't need a fixed first frame. Reusable framing, angle, movement, and focus phrasing for your prompts. Modes, examples, and workflow breakdowns for FLUX 3 video.