{Array.from({ length: bars }).map((_, i) => {
const isDrawn = i < drawn;
// pseudo-random but deterministic amplitude
const seed = Math.sin(i * 12.9898) * 43758.5453;
const baseAmp = 0.25 + Math.abs(seed - Math.floor(seed)) * 0.75;
// amplify on beats — every 8th bar is a kick
const isKick = i % 8 === 0;
const beatBoost = isKick ? beatEnv(beatTime, 120) * 0.4 : 0;
const amp = isDrawn ? Math.min(1, baseAmp + beatBoost) : 0;
return (
0.3 ? `0 0 12px ${sceneStyles.blue}` : 'none',
}} />
);
})}
);
}
function SceneSong() {
const { progress, localTime } = useSprite();
const headerOp = interpolate([0, 0.15], [0, 1], Easing.easeOutQuad)(progress);
const cardOp = interpolate([0.1, 0.3], [0, 1], Easing.easeOutQuad)(progress);
const cardY = interpolate([0.1, 0.3], [40, 0], Easing.easeOutCubic)(progress);
const waveProgress = interpolate([0.3, 0.8], [0, 1], Easing.easeOutQuad)(progress);
const exit = interpolate([0.92, 1], [1, 0], Easing.easeInQuad)(progress);
return (
{/* Song card */}
{/* Album art */}
Untitled Beat
120 BPM · 0:30 · synced
● beat detected
{/* Waveform */}
{/* Beat markers */}
0:00
● kick · ● snare · ● drop
0:30
);
}
// ── Scene 4: AI cuts to the beat (16–22s) ──────────────────────────────────
function SceneCut() {
const { progress, localTime } = useSprite();
const headerOp = interpolate([0, 0.15], [0, 1], Easing.easeOutQuad)(progress);
const timelineOp = interpolate([0.1, 0.3], [0, 1], Easing.easeOutQuad)(progress);
const exit = interpolate([0.92, 1], [1, 0], Easing.easeInQuad)(progress);
// Playhead sweeps across timeline
const playhead = clamp((progress - 0.2) / 0.7, 0, 1);
// Clips on timeline — each has start and length (in fraction of timeline)
const clips = [
{ start: 0.00, len: 0.12, c: 0 },
{ start: 0.12, len: 0.10, c: 1 },
{ start: 0.22, len: 0.08, c: 2 },
{ start: 0.30, len: 0.14, c: 3 },
{ start: 0.44, len: 0.10, c: 4 },
{ start: 0.54, len: 0.16, c: 0 },
{ start: 0.70, len: 0.12, c: 2 },
{ start: 0.82, len: 0.18, c: 1 },
];
// Which clip is "active" (playhead inside)
const activeClip = clips.findIndex(c => playhead >= c.start && playhead < c.start + c.len);
const timelineWidth = 1080;
const timelineX = 100;
const timelineY = 380;
// Beat markers — 8 kicks across 30s timeline
const beats = [0.0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875];
// Beat flash sync — flash whenever playhead crosses a beat
const nearestBeat = beats.reduce((closest, b) =>
Math.abs(b - playhead) < Math.abs(closest - playhead) ? b : closest, 0);
const beatFlash = clamp(1 - Math.abs(playhead - nearestBeat) * 30, 0, 1);
return (
Step 03 · instant
Cut to the beat in seconds
{/* Preview window */}
{/* Live art for the active clip */}
{activeClip >= 0 && }
{/* Live badge */}
● LIVE · CLIP {activeClip >= 0 ? String(activeClip + 1).padStart(2, '0') : '--'}
{/* Beat flash overlay */}
{/* Timeline track */}
{/* Track label */}
VIDEO TRACK
{/* Track BG */}
{/* Beat grid lines */}
{beats.map((b, i) => (
))}
{/* Clips */}
{clips.map((c, i) => {
const appear = clamp((progress - 0.15 - i * 0.04) / 0.1, 0, 1);
const [c1, c2] = CLIP_COLORS[c.c];
return (
);
})}
{/* Playhead */}
{progress > 0.2 && (
)}
{/* Audio track */}
AUDIO · 120 BPM
{Array.from({ length: 80 }).map((_, i) => {
const seed = Math.sin(i * 7.13) * 43758.5453;
const baseAmp = 0.3 + Math.abs(seed - Math.floor(seed)) * 0.7;
const isKick = i % 10 === 0;
const isPast = (i / 80) < playhead;
return (
);
})}
);
}
// ── Scene 5: Output (22–26s) ───────────────────────────────────────────────
function ScenePhone() {
const { progress, localTime } = useSprite();
const headerOp = interpolate([0, 0.15], [0, 1], Easing.easeOutQuad)(progress);
const phoneScale = interpolate([0, 0.4], [0.7, 1], Easing.easeOutBack)(progress);
const phoneOp = interpolate([0, 0.2], [0, 1], Easing.easeOutQuad)(progress);
const exit = interpolate([0.9, 1], [1, 0], Easing.easeInQuad)(progress);
// Inside phone, cycle through art frames to imply video playback
const frameCycle = Math.floor(localTime * 3) % ART_COMPONENTS.length;
const beat = beatEnv(localTime, 120);
return (
Step 04 · done
Export the edit
{/* Phone */}
{/* Notch */}
{/* Video frame */}
{/* Live art frame */}
{/* Beat flash */}
{/* Watermark logo */}
{/* Center content */}
CLIP {String(frameCycle + 1).padStart(2, '0')} / 06
{/* Progress bar */}
{/* Side annotations */}
● 480p · ready
14 cuts · 30s
kick-aligned
● beat flash on
cut style: auto
cinematic intro
);
}
// ── Scene 6: CTA — Sign Up Now (26–30s) ────────────────────────────────────
function SceneCTA() {
const { progress, localTime } = useSprite();
const titleOp = interpolate([0, 0.2], [0, 1], Easing.easeOutQuad)(progress);
const titleY = interpolate([0, 0.3], [30, 0], Easing.easeOutCubic)(progress);
const subOp = interpolate([0.15, 0.4], [0, 1], Easing.easeOutQuad)(progress);
const btnOp = interpolate([0.3, 0.55], [0, 1], Easing.easeOutQuad)(progress);
const btnScale = interpolate([0.3, 0.55, 0.7], [0.8, 1.05, 1], Easing.easeOutBack)(progress);
const benefitsOp = interpolate([0.55, 0.75], [0, 1], Easing.easeOutQuad)(progress);
// Pulsing button
const pulse = 1 + Math.sin(localTime * 3) * 0.02;
const beat = beatEnv(localTime, 120);
return (
{/* Logo */}
{/* Headline */}
Beat-synced edits.
In one click.
free · runs in your browser · no install
{/* CTA Button */}
{/* Benefits */}
✓ no card
✓ unlimited edits
✓ save to gallery
);
}
// ── Master composition ─────────────────────────────────────────────────────
function ExplainerVideo() {
return (
<>
{/* Persistent corner brand mark, after intro */}
);
}
function PersistentBrand() {
const t = useTime();
if (t < 4 || t > 26) return null;
const op = interpolate([4, 4.5, 25, 26], [0, 0.7, 0.7, 0], Easing.linear)(t);
return (
Cutflux
);
}
Object.assign(window, {
ExplainerVideo, sceneStyles,
});