/* Featured Add Captions to Video tool — input renderer. */ const { useMemo, useState } = React; const { Button, FilePicker, Input, Label } = ConstantsUI; const PRESETS = [ { id: "caption-blend-difference", name: "Blend Difference", detail: "Auto-contrast treatment" }, { id: "caption-camera-follow", name: "Camera Follow", detail: "Growing sentence · pullback" }, { id: "caption-clip-wipe", name: "Clip Wipe", detail: "Left-to-right word reveal" }, { id: "caption-editorial-emphasis", name: "Editorial Emphasis", detail: "Dual-font size contrast" }, { id: "caption-emoji-pop", name: "Emoji Pop", detail: "Emoji · squeeze entrance" }, { id: "caption-glitch-rgb", name: "Glitch RGB", detail: "Chromatic digital offset" }, { id: "caption-gradient-fill", name: "Gradient Fill", detail: "Gradient bands · bounce" }, { id: "caption-highlight", name: "Highlight", detail: "Original red active-word block" }, { id: "caption-kinetic-slam", name: "Kinetic Slam", detail: "Full-screen word impacts" }, { id: "caption-matrix-decode", name: "Matrix Decode", detail: "Glyph scramble reveal" }, { id: "caption-neon-accent", name: "Neon Accent", detail: "Multi-color neon drift" }, { id: "caption-neon-glow", name: "Neon Glow", detail: "Cyan + magenta bloom" }, { id: "caption-parallax-layers", name: "Parallax Layers", detail: "Dimensional serif layers" }, { id: "caption-particle-burst", name: "Particle Burst", detail: "Color particles on impact" }, { id: "caption-pill-karaoke", name: "Pill Karaoke", detail: "Word progress in a pill" }, { id: "caption-texture", name: "Texture", detail: "Banded texture fill" }, { id: "caption-weight-shift", name: "Weight Shift", detail: "Light-to-heavy typography" }, { id: "mk-callout-highlight", name: "Word-Sweep Highlight", detail: "Transcript-synced sweep" }, ]; function Preview({ id }) { const common = "relative flex h-20 items-center justify-center overflow-hidden rounded-lg bg-[#09090b] px-3 text-center text-white"; if (id === "caption-blend-difference") { return (

STAY VISIBLE

); } if (id === "caption-camera-follow") { return (

THE CAMERA FOLLOWS

); } if (id === "caption-clip-wipe") { return

CLIP WIPE

; } if (id === "caption-editorial-emphasis") { return (

Make it matter

); } if (id === "caption-emoji-pop") { return

✨ MAKE IT POP

; } if (id === "caption-glitch-rgb") { return (

GLITCH GLITCH GLITCH

); } if (id === "caption-gradient-fill") { return (

GRADIENT

); } if (id === "caption-highlight") { return

HIGHLIGHT

; } if (id === "caption-kinetic-slam") { return

SLAM

; } if (id === "caption-matrix-decode") { return

D3C0DE

; } if (id === "caption-neon-accent") { return

NEON ACCENT

; } if (id === "caption-neon-glow") { return

NEON GLOW

; } if (id === "caption-parallax-layers") { return (

PARALLAX PARALLAX PARALLAX

); } if (id === "caption-particle-burst") { return (

✦◆ ●✦ BURST

); } if (id === "caption-pill-karaoke") { return

SING ALONG

; } if (id === "caption-texture") { return (

TEXTURE

); } if (id === "caption-weight-shift") { return

weight SHIFT

; } return

WORD SWEEP HIGHLIGHT

; } function Tool({ onRun }) { const [preset, setPreset] = useState("caption-highlight"); const [query, setQuery] = useState(""); const [languageCode, setLanguageCode] = useState(""); const [includeSoundCues, setIncludeSoundCues] = useState(false); const [loading, setLoading] = useState(false); const visiblePresets = useMemo(() => { const normalized = query.trim().toLowerCase(); if (!normalized) return PRESETS; return PRESETS.filter((item) => `${item.name} ${item.detail}`.toLowerCase().includes(normalized)); }, [query]); async function handleRun() { if (loading) return; setLoading(true); showLoading("Transcribing speech and rendering captions…"); try { await onRun({ preset, languageCode: languageCode.trim(), includeSoundCues }); } catch (error) { showError(error.message || "Could not caption this video."); } finally { hideLoading(); setLoading(false); } } return (

Add Captions to Video

Burn transcript-synced captions using all 18 Hyperframes styles.

Video

Use a video with clear spoken audio.

Caption style

Mirrors the current Hyperframes caption catalog.

setQuery(event.target.value)} placeholder="Search 18 styles…" className="w-56" />

{visiblePresets.map((item) => { const selected = preset === item.id; return ( ); })}

{visiblePresets.length === 0 &&

No caption styles match “{query}”.

}

Spoken language setLanguageCode(event.target.value)} placeholder="Auto-detect (or en, es, zh…)" />

setIncludeSoundCues(event.target.checked)} className="mt-0.5 h-4 w-4" /> Include sound cues Keep annotations such as [sighs], [laughter], and [music]. Spoken fillers remain either way.

); } ReactDOM.createRoot(document.getElementById("root")).render( React.createElement(Tool, { onRun: window.__onRun }) );

Add Captions to Videoa Constants tool made by Constants