+ {/* Decorative rule */}
+
+
+
+ {lineOne}
+
+
+ {lineTwo}
+
+ {/* Small jewel divider */}
+
+
+
+
+
+ 0 ? `blur(${blur}px)` : undefined,
+ willChange: "transform",
+ }}
+ >
+
+ );
+};
+
+export const CollageBurst: React.FC
+ {cardContent}
+ {/* Subtle inner vignette on hero cards for depth */}
+ {clip.hero && (
+
+
+
+
+ {lyric.text}
+
+ {/* Gold underline */}
+
+
+
+
+
+
+
+
+ {typed}
+ {blink && (
+
+ )}
+
+ );
+ }
+
+ if (step.kind === "bubble_append") {
+ const r = absRect(step.region);
+ const springIn = spring({
+ frame: localFrame,
+ fps,
+ config: { damping: 16, stiffness: 140 },
+ durationInFrames: Math.ceil(fps * 0.5),
+ });
+ const isUser = step.role === "user";
+ const fontPx = Math.round(rect.h * (step.fontSize ?? 0.021));
+
+ // Streaming text reveal (word-by-word)
+ let displayText = step.text;
+ if (step.stream) {
+ const words = step.text.split(/(\s+)/); // keep whitespace
+ const totalRevealFrames = Math.max(1, endFrame - startFrame - fps * 0.3);
+ const wordCount = words.filter((w) => w.trim()).length;
+ const revealedWords = Math.floor(
+ interpolate(localFrame, [fps * 0.3, fps * 0.3 + totalRevealFrames], [0, wordCount], {
+ extrapolateRight: "clamp",
+ extrapolateLeft: "clamp",
+ })
+ );
+ let count = 0;
+ const pieces: string[] = [];
+ for (const w of words) {
+ if (w.trim()) {
+ if (count < revealedWords) {
+ pieces.push(w);
+ count++;
+ } else {
+ break;
+ }
+ } else {
+ pieces.push(w);
+ }
+ }
+ displayText = pieces.join("");
+ }
+
+ const bg = isUser ? "#2D3748" : "#1F2937";
+ const border = isUser ? "#4A5568" : "#374151";
+
+ return (
+
+ {displayText}
+
+ );
+ }
+
+ if (step.kind === "typing_dots") {
+ const p = abs(step.at);
+ const dotSize = Math.round(rect.h * 0.01);
+ const dots = [0, 1, 2].map((i) => {
+ const phase = (frame / (fps * 0.35) - i * 0.3) % 2;
+ const alpha = phase < 1 ? 0.3 + phase * 0.7 : 1 - (phase - 1) * 0.7;
+ return alpha;
+ });
+ const color = step.color ?? accentColor;
+ return (
+
+ {dots.map((a, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (step.kind === "highlight_box") {
+ const r = absRect(step.region);
+ const dur = endFrame - startFrame;
+ const pulses = step.pulses ?? 2;
+ const color = step.color ?? accentColor;
+ // Pulsing ring: oscillate opacity + scale
+ const wave = Math.sin((localFrame / dur) * pulses * Math.PI * 2) * 0.5 + 0.5;
+ const alpha = 0.4 + wave * 0.5;
+ const glow = 10 + wave * 18;
+ return (
+
+ );
+ }
+
+ if (step.kind === "callout_balloon") {
+ const a = abs(step.anchor);
+ const pos = step.position ?? "top";
+ const springIn = spring({
+ frame: localFrame,
+ fps,
+ config: { damping: 14, stiffness: 160 },
+ durationInFrames: Math.ceil(fps * 0.4),
+ });
+ const dur = endFrame - startFrame;
+ const fadeOut = interpolate(
+ localFrame,
+ [dur - fps * 0.4, dur],
+ [1, 0],
+ { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+ );
+ const alpha = Math.min(springIn, fadeOut);
+ const color = step.color ?? accentColor;
+ const fontPx = Math.round(rect.h * 0.024);
+ const maxW = rect.w * 0.28;
+
+ // Balloon offset from anchor
+ const offset = rect.h * 0.06;
+ let bx = a.x;
+ let by = a.y;
+ let tailStyle: React.CSSProperties = {};
+ if (pos === "top") {
+ by = a.y - offset - fontPx * 2.5;
+ bx = a.x - maxW / 2;
+ tailStyle = {
+ position: "absolute",
+ bottom: -10,
+ left: "50%",
+ transform: "translateX(-50%)",
+ width: 0,
+ height: 0,
+ borderLeft: "10px solid transparent",
+ borderRight: "10px solid transparent",
+ borderTop: `12px solid ${color}`,
+ };
+ } else if (pos === "bottom") {
+ by = a.y + offset;
+ bx = a.x - maxW / 2;
+ tailStyle = {
+ position: "absolute",
+ top: -10,
+ left: "50%",
+ transform: "translateX(-50%)",
+ width: 0,
+ height: 0,
+ borderLeft: "10px solid transparent",
+ borderRight: "10px solid transparent",
+ borderBottom: `12px solid ${color}`,
+ };
+ } else if (pos === "left") {
+ bx = a.x - offset - maxW;
+ by = a.y - fontPx;
+ tailStyle = {
+ position: "absolute",
+ right: -10,
+ top: "50%",
+ transform: "translateY(-50%)",
+ width: 0,
+ height: 0,
+ borderTop: "10px solid transparent",
+ borderBottom: "10px solid transparent",
+ borderLeft: `12px solid ${color}`,
+ };
+ } else {
+ bx = a.x + offset;
+ by = a.y - fontPx;
+ tailStyle = {
+ position: "absolute",
+ left: -10,
+ top: "50%",
+ transform: "translateY(-50%)",
+ width: 0,
+ height: 0,
+ borderTop: "10px solid transparent",
+ borderBottom: "10px solid transparent",
+ borderRight: `12px solid ${color}`,
+ };
+ }
+
+ return (
+
+ {step.text}
+
+
+ );
+ }
+
+ return null;
+};
diff --git a/remotion-composer/src/components/index.ts b/remotion-composer/src/components/index.ts
index 86567a88..cc4976e8 100644
--- a/remotion-composer/src/components/index.ts
+++ b/remotion-composer/src/components/index.ts
@@ -11,7 +11,9 @@ export { HeroTitle } from "./HeroTitle";
export { ParticleOverlay } from "./ParticleOverlay";
export { AnimeScene } from "./AnimeScene";
export { TerminalScene } from "./TerminalScene";
+export { ScreenshotScene } from "./ScreenshotScene";
export { ProviderChip } from "./ProviderChip";
export type { ParticleType } from "./ParticleOverlay";
export type { CameraMotion, AnimeSceneProps } from "./AnimeScene";
export type { TerminalStep } from "./TerminalScene";
+export type { ScreenshotStep, Region, Point } from "./ScreenshotScene";
diff --git a/tools/video/seedance_video.py b/tools/video/seedance_video.py
index a0135d40..4f4edb9e 100644
--- a/tools/video/seedance_video.py
+++ b/tools/video/seedance_video.py
@@ -257,7 +257,7 @@ class SeedanceVideo(BaseTool):
try:
submit_resp = requests.post(
- f"https://queue.fal.run/fal-ai/{model_path}",
+ f"https://queue.fal.run/{model_path}",
headers=headers,
json=payload,
timeout=30,
@@ -305,7 +305,7 @@ class SeedanceVideo(BaseTool):
success=True,
data={
"provider": "seedance",
- "model": f"fal-ai/{model_path}",
+ "model": model_path,
"prompt": inputs["prompt"],
"operation": operation,
"variant": variant,
@@ -321,5 +321,5 @@ class SeedanceVideo(BaseTool):
artifacts=[str(output_path)],
cost_usd=self.estimate_cost(inputs),
duration_seconds=round(time.time() - start, 2),
- model=f"fal-ai/{model_path}",
+ model=model_path,
)