> ## 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. # FLUX 3 Video > Generate video with synchronized audio using FLUX 3, edit an existing clip with FLUX Video Edit [fast], or run FLUX 3 Action, the open-weights action mode. export const VideoReelMosaic = ({title = "Generated with FLUX 3", rows = [], speed = 6.5, itemWidth = "clamp(14rem, 20vw, 18rem)", itemAspectRatio = "16 / 9", margin = "2.75rem 0 3.5rem", showTopBorder = true, paddingTop = "2rem"}) => { const preparedRows = rows.filter(row => Array.isArray(row) && row.length > 0); const startVideo = event => { const video = event.currentTarget; video.muted = true; const playback = video.play?.(); if (playback && typeof playback.catch === "function") playback.catch(() => {}); }; return
{title ?

{title}

: null}
{preparedRows.map((row, rowIdx) => { const direction = rowIdx % 2 === 0 ? "flux3VideoReelLeft" : "flux3VideoReelRight"; const duration = `${Math.max(row.length * speed, 18)}s`; const looped = [...row, ...row]; return
{looped.map((item, idx) =>
{item.image ? {item.title :
)}
; })}
; }; export const FeatureSlider = ({items = []}) => { const [active, setActive] = useState({}); const [inView, setInView] = useState(0); const [soundOn, setSoundOn] = useState({}); const activeOf = cardIdx => active[cardIdx] || 0; const goTo = (cardIdx, next) => setActive(prev => ({ ...prev, [cardIdx]: next })); const step = (cardIdx, dir, n) => setActive(prev => ({ ...prev, [cardIdx]: ((prev[cardIdx] || 0) + dir + n) % n })); 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 = v.dataset.soundOn !== "1"; const p = v.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); } else { v.pause?.(); } }); }, { threshold: 0.4 }); return observerRef.current; }; const videoRefs = useRef({}); const attachVideo = (el, cardIdx) => { if (!el) return; videoRefs.current[cardIdx] = el; const io = getObserver(); if (io) io.observe(el); }; const toggleSound = cardIdx => { const turningOn = !soundOn[cardIdx]; const el = videoRefs.current[cardIdx]; if (el) { el.dataset.soundOn = turningOn ? "1" : "0"; el.muted = !turningOn; if (turningOn) { const p = el.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); } } setSoundOn(prev => ({ ...prev, [cardIdx]: turningOn })); }; const trackRef = useRef(null); const cardRefs = useRef([]); const measuredRef = useRef(false); const [edges, setEdges] = useState({ left: false, right: true }); const [hasOverflow, setHasOverflow] = useState(true); const updateEdges = el => { if (!el) return; const max = el.scrollWidth - el.clientWidth; setHasOverflow(prev => prev === max > 8 ? prev : max > 8); 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 = video.dataset.soundOn !== "1"; const p = video.play?.(); if (p && typeof p.catch === "function") p.catch(() => {}); }; const renderIO = io => { const parts = io.split(/→|->/); return parts.map((p, i) => {p.trim()} {i < parts.length - 1 && } ); }; const renderMedia = (ex, title, cardIdx, exIdx, soundIsOn) => ex.video ?