> ## 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. # Video > Generate, animate, and continue video with FLUX 3. Up to full-HD and 20 seconds, with synchronized audio. export const CameraTermNav = ({sections, label} = {}) => { const SECTIONS = sections || [{ label: "Shot sizes", href: "#shot-sizes-and-framing" }, { label: "Angles", href: "#camera-angles" }, { label: "Composition", href: "#composition-techniques" }, { label: "Movements", href: "#camera-movements" }, { label: "Focus", href: "#focus-techniques" }, { label: "Lenses", href: "#lenses-and-optics" }, { label: "Shutter & time", href: "#shutter-and-time" }, { label: "Lighting", href: "#lighting-styles" }, { label: "Transitions", href: "#shot-transitions" }, { label: "POV", href: "#pov-and-specialty-rigs" }, { label: "Format", href: "#aspect-and-format" }, { label: "VFX", href: "#vfx-and-transformation" }, { label: "Art direction", href: "#art-direction" }, { label: "Animation", href: "#animation-and-media" }]; const OFFSET = 64; const [active, setActive] = useState(SECTIONS[0].href); const [pinned, setPinned] = useState(false); const [box, setBox] = useState({ left: 0, width: 0, height: 0 }); const [offset, setOffset] = useState(OFFSET); const wrapRef = useRef(null); const navRef = useRef(null); const listRef = useRef(null); const navbarRef = useRef(undefined); const navbarBottom = () => { if (typeof document === "undefined") return OFFSET; if (navbarRef.current === undefined) { const vw = document.documentElement.clientWidth; const found = Array.from(document.querySelectorAll("body div, header, nav")).find(el => { if (el.closest && el.closest(".camera-nav-wrap")) return false; const s = getComputedStyle(el); if (s.position !== "fixed" && s.position !== "sticky") return false; const r = el.getBoundingClientRect(); return r.top <= 0.5 && r.width > vw * 0.7 && r.height > 20 && r.height < 200; }); navbarRef.current = found || null; } const nb = navbarRef.current; if (!nb) return OFFSET; return Math.max(0, Math.round(nb.getBoundingClientRect().bottom)); }; const tickingRef = useRef(false); const scrollWiredRef = useRef(false); const obsWiredRef = useRef(false); const measure = () => { const wrap = wrapRef.current; const nav = navRef.current; if (!wrap || !nav) return; const rect = wrap.getBoundingClientRect(); const off = navbarBottom(); setOffset(prev => prev === off ? prev : off); const shouldPin = rect.top <= off; setPinned(prev => prev === shouldPin ? prev : shouldPin); const left = Math.round(rect.left); const width = Math.round(rect.width); const height = nav.offsetHeight; setBox(prev => prev.left === left && prev.width === width && prev.height === height ? prev : { left, width, height }); const vw = document.documentElement.clientWidth; const GUTTER = 40; const bleed = Math.max(0, Math.round(vw - rect.right - GUTTER)); document.documentElement.style.setProperty("--camera-bleed", `${bleed}px`); }; const onScroll = () => { if (tickingRef.current) return; tickingRef.current = true; requestAnimationFrame(() => { tickingRef.current = false; measure(); }); }; const attachWrap = el => { wrapRef.current = el; if (!el || scrollWiredRef.current || typeof window === "undefined") return; scrollWiredRef.current = true; window.addEventListener("scroll", onScroll, true); window.addEventListener("resize", onScroll); if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(measure); } else { measure(); } }; const centerPill = href => { const root = navRef.current; if (!root) return; const el = root.querySelector(`[data-href="${href}"]`); if (el && el.scrollIntoView) { el.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" }); } }; const attachNav = el => { navRef.current = el; if (!el || obsWiredRef.current) return; if (typeof IntersectionObserver === "undefined") return; obsWiredRef.current = true; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting && entry.target.id) { const href = `#${entry.target.id}`; setActive(href); centerPill(href); } }); }, { rootMargin: "-12% 0px -78% 0px", threshold: 0 }); SECTIONS.forEach(s => { const node = document.getElementById(s.href.slice(1)); if (node) observer.observe(node); (s.children || []).forEach(c => { const cn = document.getElementById(c.href.slice(1)); if (cn) observer.observe(cn); }); }); }; const navStyle = pinned ? { position: "fixed", top: `${offset}px`, left: `${box.left}px`, width: `${box.width}px` } : undefined; const activeParent = SECTIONS.find(s => s.href === active || (s.children || []).some(c => c.href === active)) || SECTIONS[0]; const subItems = activeParent.children || []; const isParentActive = s => s.href === active || (s.children || []).some(c => c.href === active); return
; }; export const VideoExtension = ({src, poster, originalDuration = 5, aspectRatio = "16 / 9", accent = "#3ecf8e", alt = ""}) => { const videoRef = useRef(null); const [playing, setPlaying] = useState(true); const [muted, setMuted] = useState(true); const [dur, setDur] = useState(0); const [t, setT] = useState(0); const orig = dur ? Math.min(originalDuration, dur) : originalDuration; const split = dur ? Math.min(Math.max(orig / dur, 0.06), 0.94) : 0.5; const progress = dur ? Math.min(t / dur, 1) : 0; const inExt = dur > 0 && t >= orig - 0.05; const fmt = s => { s = Math.max(0, Math.round(s || 0)); const m = Math.floor(s / 60); return `${m}:${String(s % 60).padStart(2, "0")}`; }; const onMeta = e => setDur(e.currentTarget.duration || 0); const onTime = e => setT(e.currentTarget.currentTime || 0); const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); const togglePlay = () => { const v = videoRef.current; if (!v) return; if (v.paused) { const p = v.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); } else { v.pause(); } }; const toggleMute = () => { const v = videoRef.current; const next = !muted; setMuted(next); if (v) v.muted = next; }; const seek = e => { const v = videoRef.current; if (!v || !dur) return; const r = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; v.currentTime = Math.min(Math.max(x, 0), 1) * dur; setT(v.currentTime); }; const neutral = a => `color-mix(in srgb, currentColor ${a}%, transparent)`; const iconBtn = { position: "absolute", top: "0.9rem", right: "0.9rem", zIndex: 4, 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
{}
{}
{}
{}
{}
{}
{}
{}
{}
Original {fmt(orig)} {fmt(t)} / {fmt(dur)} FLUX 3 continuation +{fmt(Math.max(dur - orig, 0))}
; }; export const AnimateSlider = ({items = []}) => { const [inView, setInView] = useState(0); const [edges, setEdges] = useState({ left: false, right: items.length > 1 }); const [muted, setMuted] = useState(true); const trackRef = useRef(null); const cardRefs = useRef([]); const slideRefs = useRef([]); const measuredRef = useRef(false); const mutedRef = useRef(true); const setSlideRef = (idx, key) => el => { if (!slideRefs.current[idx]) slideRefs.current[idx] = {}; slideRefs.current[idx][key] = el; }; const showStill = (idx, show) => { const s = slideRefs.current[idx]; if (!s) return; if (s.still) s.still.style.opacity = show ? "1" : "0"; if (s.pill) s.pill.style.opacity = show ? "1" : "0"; }; const stop = idx => { const s = slideRefs.current[idx]; if (!s || !s.video) return; s.video.pause?.(); try { s.video.currentTime = 0; } catch (e) {} showStill(idx, true); }; const toggle = idx => { const s = slideRefs.current[idx]; if (!s || !s.video) return; if (s.video.paused) { s.video.muted = mutedRef.current; showStill(idx, false); const p = s.video.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); } else { stop(idx); } }; const observerRef = useRef(null); const getObserver = () => { if (observerRef.current) return observerRef.current; if (typeof IntersectionObserver === "undefined") return null; observerRef.current = new IntersectionObserver(entries => { entries.forEach(entry => { if (!entry.isIntersecting) { const idx = Number(entry.target.getAttribute("data-idx")); if (!Number.isNaN(idx)) stop(idx); } }); }, { threshold: 0.25 }); return observerRef.current; }; const attachMedia = idx => el => { setSlideRef(idx, "media")(el); if (!el) return; const io = getObserver(); if (io) io.observe(el); }; const toggleMute = e => { e.stopPropagation(); const next = !muted; setMuted(next); mutedRef.current = next; slideRefs.current.forEach(s => { if (s && s.video) s.video.muted = next; }); }; const updateEdges = el => { if (!el) return; const max = el.scrollWidth - el.clientWidth; const next = { left: el.scrollLeft > 4, right: el.scrollLeft < max - 4 }; setEdges(prev => prev.left === next.left && prev.right === next.right ? prev : next); const cards = cardRefs.current.filter(Boolean); if (cards.length) { let best = 0; let bestDist = Infinity; cards.forEach((card, i) => { const dist = Math.abs(card.offsetLeft - el.scrollLeft - 4); if (dist < bestDist) { bestDist = dist; best = i; } }); setInView(prev => prev === best ? prev : best); } }; const attachTrack = el => { trackRef.current = el; if (!el || measuredRef.current) return; measuredRef.current = true; if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(() => updateEdges(el)); } else { updateEdges(el); } }; const scrollByCard = dir => { const el = trackRef.current; if (!el) return; const first = cardRefs.current.find(Boolean); const cardW = first ? first.offsetWidth + 20 : el.clientWidth * 0.8; el.scrollBy({ left: dir * cardW, behavior: "smooth" }); }; const scrollToCard = idx => { const el = trackRef.current; const card = cardRefs.current[idx]; if (!el || !card) return; el.scrollTo({ left: card.offsetLeft - 4, behavior: "smooth" }); }; const muteBtnStyle = { position: "absolute", top: "0.6rem", right: "0.6rem", zIndex: 4, width: "2rem", height: "2rem", borderRadius: "999px", border: "none", background: "rgba(8, 18, 13, 0.5)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)" }; return
updateEdges(e.currentTarget)}> {items.map((item, idx) =>
{ cardRefs.current[idx] = el; }}> {item.title &&

{item.title}

}
toggle(idx)} onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(idx); } }} style={{ cursor: "pointer", userSelect: "none", WebkitTapHighlightColor: "transparent" }}>
{item.prompt && 
{item.prompt}
}
)}
{items.length > 1 &&
{items.map((item, idx) =>
}
; }; export const ClipSlider = ({items = []}) => { const [copied, setCopied] = useState(-1); const [inView, setInView] = useState(0); const [edges, setEdges] = useState({ left: false, right: items.length > 1 }); const [muted, setMuted] = useState(true); const trackRef = useRef(null); const cardRefs = useRef([]); const measuredRef = useRef(false); const mutedRef = useRef(true); const videosRef = useRef([]); const observerRef = useRef(null); const getObserver = () => { if (observerRef.current) return observerRef.current; if (typeof IntersectionObserver === "undefined") return null; observerRef.current = new IntersectionObserver(entries => { entries.forEach(entry => { const v = entry.target; if (entry.isIntersecting) { v.muted = mutedRef.current; const p = v.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); } else { v.pause?.(); } }); }, { threshold: 0.4 }); return observerRef.current; }; const attachVideo = el => { if (!el) return; if (!videosRef.current.includes(el)) videosRef.current.push(el); const io = getObserver(); if (io) io.observe(el); }; const toggleMute = () => { const next = !muted; setMuted(next); mutedRef.current = next; videosRef.current.forEach(v => { if (v) v.muted = next; }); }; const updateEdges = el => { if (!el) return; const max = el.scrollWidth - el.clientWidth; const next = { left: el.scrollLeft > 4, right: el.scrollLeft < max - 4 }; setEdges(prev => prev.left === next.left && prev.right === next.right ? prev : next); const cards = cardRefs.current.filter(Boolean); if (cards.length) { let best = 0; let bestDist = Infinity; cards.forEach((card, i) => { const dist = Math.abs(card.offsetLeft - el.scrollLeft - 4); if (dist < bestDist) { bestDist = dist; best = i; } }); setInView(prev => prev === best ? prev : best); } }; const attachTrack = el => { trackRef.current = el; if (!el || measuredRef.current) return; measuredRef.current = true; if (typeof requestAnimationFrame !== "undefined") { requestAnimationFrame(() => updateEdges(el)); } else { updateEdges(el); } }; const scrollByCard = dir => { const el = trackRef.current; if (!el) return; const first = cardRefs.current.find(Boolean); const cardW = first ? first.offsetWidth + 20 : el.clientWidth * 0.8; el.scrollBy({ left: dir * cardW, behavior: "smooth" }); }; const scrollToCard = idx => { const el = trackRef.current; const card = cardRefs.current[idx]; if (!el || !card) return; el.scrollTo({ left: card.offsetLeft - 4, behavior: "smooth" }); }; const startVideo = event => { const video = event.currentTarget; video.muted = mutedRef.current; const p = video.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); }; const copy = (text, idx) => { try { navigator.clipboard.writeText(text); setCopied(idx); setTimeout(() => setCopied(c => c === idx ? -1 : c), 2000); } catch (e) {} }; return
updateEdges(e.currentTarget)}> {items.map((item, idx) =>
{ cardRefs.current[idx] = el; }}> {item.title &&

{item.title}

}
{item.prompt && 
{item.prompt}
}
)}
{items.length > 1 &&
{items.map((item, idx) =>
}
; }; export const MutedVideo = ({src, poster, alt = "", aspectRatio = "16 / 9", borderRadius = "0.75rem"}) => { const videoRef = useRef(null); const [muted, setMuted] = useState(true); const start = event => { const v = event.currentTarget; v.muted = muted; const p = v.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); }; const toggleMute = () => { 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
; };
FLUX 3 Motion from a single line artwork

FLUX 3

Video

Generate, animate, and continue video with FLUX 3, with synchronized audio in the same call.

## Quickstart FLUX 3 video is asynchronous: you **submit** a request, get back a `polling_url`, and **poll** it until the clip is `Ready`. For the full field list and response schema, see the [API reference](/api-reference/utility/generate-a-video-with-flux-3). ```python Python theme={null} import os, time, requests BFL_API_KEY = os.environ["BFL_API_KEY"] # 1. Submit — returns an id and a polling_url submit = requests.post( "https://api.bfl.ai/v1/flux-3-video", headers={"x-key": BFL_API_KEY, "Content-Type": "application/json"}, json={ "mode": "t2v", "prompt": "a fox running through dawn mist", "generate_audio": True, }, ).json() # 2. Poll the returned URL until the job is Ready while True: time.sleep(2) result = requests.get(submit["polling_url"], headers={"x-key": BFL_API_KEY}).json() if result["status"] == "Ready": print(result["result"]["sample"]) # signed .mp4 URL break if result["status"] in ("Error", "Request Moderated", "Content Moderated"): raise RuntimeError(result["status"]) ``` ```bash cURL theme={null} # 1. Submit — returns an id and a polling_url curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "a fox running through dawn mist", "generate_audio": true }' # 2. Poll the polling_url from the response until "status": "Ready" curl -s "$POLLING_URL" -H "x-key: $BFL_API_KEY" ``` ## Modes One `mode` per request; the rest of the request stays the same. * **Text-to-Video** (`t2v`) — prompt only. * **Image-to-Video** (`i2v`) — add `keyframes`: one image is the opening frame, `[a, b]` pins start and end, and up to ten frames pinned to timestamps become a storyboard. * **Video Continuation** (`v2v`) — add `start_video`; the clip continues from its final frames.

t2v · Generate a video with audio

i2v · Animate an image and use multiple keyframes

v2v · Extend your clip

## Parameters Full schema and per-field constraints live in the [API reference](/api-reference/utility/generate-a-video-with-flux-3). | Field | Required | | | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------- | | `mode` | always | `t2v`, `i2v`, `v2v`, or `draft_enhance`. | | `prompt` | always | What to generate. | | `keyframes` | for `i2v` | One image starts the clip, two pin start and end, `[seconds, image]` pairs pin exact times. URL or base64. | | `start_video` | for `v2v` | The clip to continue from, mp4 as URL or base64. | | `draft_cache` | for `draft_enhance` | The bundle from a prior draft; reproduces that generation at full quality. | | `resolution` | | `hd` (default) or `fhd`. | | `duration` | | Whole seconds, 5 to 20, or `auto` (default). | | `aspect_ratio` | | `auto` (default), `21:9`, `2:1`, `16:9`, `4:3`, `1:1`, `3:4`, or `9:16`. | | `generate_audio` | | On by default. Set `false` for a silent clip. | | `safety_tolerance` | | 0 (strictest) to 4, default 2. | | `draft` | | Set `true` for a fast hd preview; the result includes a `draft_cache` bundle. | | `version` | | `latest` (default) — always tracks the current release. | ## Use cases Deeply customizable, and built for use cases, visual styles, and aspect ratios far beyond conventional cinematic output. ### Text to video Generate a clip from words alone — FLUX 3 handles everything from a single line to a densely directed brief, filling in framing, motion, and mood wherever you leave them open.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "a fox running through dawn mist", "generate_audio": true }' ``` ### Image to video Animate from images you pin. A single still becomes the exact opening frame, a start-and-end pair interpolates the motion between them, and several frames spread across the clip.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "i2v", "prompt": "push forward through the trees", "keyframes": "https://example.com/still.jpg" }' ``` ### Multiple scenes Block several shots and camera angles in one generation. Character, look, and continuity hold across hard cuts, with a single audio bed carrying through.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "SHOT ONE: wide aerial of a desert highway at dawn. HARD CUT. SHOT TWO: interior close-up of the driver. HARD CUT. SHOT THREE: the car shrinks into the heat haze. One music bed across all shots.", "duration": 10 }' ``` ### Multilingual dialogue On-camera speech in many languages, with accurate accents and tight lipsync. Quote the line in your prompt and the character says it.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "A presenter speaks to the lens: \"Storm season is here.\" Clean studio lighting.", "generate_audio": true }' ``` ### Broad range of styles Photoreal cinematography, animation, motion design, and stylized looks — the same model spans styles far beyond conventional footage.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "2D hand-drawn animation of a fox leaping through a paper-cut forest, bold flat colors", "aspect_ratio": "16:9" }' ``` ### Text and typography Legible, well-placed text rendered as part of the scene — titles, signage, and lower-thirds that stay stable through motion.
```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "t2v", "prompt": "Bold kinetic title card, the word \"FLUX\" assembling from light streaks on a dark stage", "aspect_ratio": "16:9" }' ``` ### Keyframes Pin ordered keyframes and FLUX 3 interpolates one continuous shot through each — hit this pose, then this composition, then this — while the model handles the motion between them.
Keyframe — Start · 0:00

Start · 0:00

Keyframe — Key 2 · 0:03

Key 2 · 0:03

Keyframe — Key 3 · 0:07

Key 3 · 0:07

Keyframe — End · 0:10

End · 0:10
Keyframe — Start

Start

Keyframe — Key 2

Key 2

Keyframe — Key 3

Key 3

Keyframe — End

End
Keyframe — Start · 0:00

Start · 0:00

Keyframe — Key 2 · 0:03

Key 2 · 0:03

Keyframe — Key 3 · 0:07

Key 3 · 0:07

Keyframe — End · 0:10

End · 0:10
Keyframe — Start · 0:00

Start · 0:00

Keyframe — Key 2 · 0:03

Key 2 · 0:03

Keyframe — Key 3 · 0:07

Key 3 · 0:07

Keyframe — End · 0:10

End · 0:10

 ```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "i2v", "prompt": "a seed grows into a tree through the seasons", "duration": 10, "keyframes": [[0, "https://example.com/seed.png"], [4.5, "https://example.com/sapling.png"], [10, "https://example.com/tree.png"]] }' ``` ### Video continuation Feed an existing clip and FLUX 3 picks up from its final frames, carrying momentum, framing, and scene logic forward without a cut. ```bash cURL theme={null} curl -s -X POST https://api.bfl.ai/v1/flux-3-video \ -H "x-key: $BFL_API_KEY" -H "Content-Type: application/json" \ -d '{ "mode": "v2v", "prompt": "she takes his hand and pulls him laughing through the lantern-lit alley, the camera chasing them", "start_video": "https://example.com/clip.mp4", "duration": 10 }' ``` ## Keep exploring Prompt formats, the schema, camera language, and audio. The full flux-3-video request contract: modes, fields, and constraints. Try FLUX 3 in your browser — no setup required. One request shape across image, video, and synchronized audio.