- {/* Hero Section */}
-
-
+
+ {/* ── Features ─────────────────────────────────────────────── */}
+
+
+
+ {/* ── Download Section ─────────────────────────────────────── */}
+
+
+
+ {/* ── Footer ───────────────────────────────────────────────── */}
+
+
);
}
diff --git a/landing/src/components/ControlUI.tsx b/landing/src/components/ControlUI.tsx
new file mode 100644
index 00000000..886f1374
--- /dev/null
+++ b/landing/src/components/ControlUI.tsx
@@ -0,0 +1,733 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+ AudioLines,
+ Box,
+ Download,
+ Mic,
+ MoreHorizontal,
+ Pencil,
+ Server,
+ Sparkles,
+ Speaker,
+ Star,
+ Trash2,
+ Volume2,
+ Wand2,
+} from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LandingAudioPlayer } from './LandingAudioPlayer';
+
+// ─── Data ───────────────────────────────────────────────────────────────────
+// Edit this section to customise all the content shown in the ControlUI demo.
+
+interface VoiceProfile {
+ name: string;
+ description: string;
+ language: string;
+ hasEffects: boolean;
+}
+
+/** Voice profiles shown in the 3×3 grid. Index matters — DemoScript references profiles by index. */
+const PROFILES: VoiceProfile[] = [
+ {
+ name: 'Jarvis',
+ description: 'Dry wit, composed British AI assistant',
+ language: 'en',
+ hasEffects: true,
+ },
+ {
+ name: 'Samuel L. Jackson',
+ description: 'Commanding intensity with sharp, punchy delivery',
+ language: 'en',
+ hasEffects: true,
+ },
+ {
+ name: 'Bob Ross',
+ description: 'Gentle, soothing voice full of quiet encouragement',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Sam Altman',
+ description: 'Measured, thoughtful Silicon Valley cadence',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Morgan Freeman',
+ description: 'Rich, warm baritone with gravitas and calm authority',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Linus Tech Tips',
+ description: 'Enthusiastic, fast-paced tech explainer energy',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Fireship',
+ description: 'Rapid-fire, deadpan tech humor with zero filler',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Scarlett Johansson',
+ description: 'Smooth, low alto with understated warmth',
+ language: 'en',
+ hasEffects: false,
+ },
+ {
+ name: 'Dario Amodei',
+ description: 'Calm, precise articulation with academic depth',
+ language: 'en',
+ hasEffects: false,
+ },
+];
+
+/** Each entry is one cycle of the demo animation: select a profile → type text → generate → play audio. */
+interface DemoStep {
+ profileIndex: number;
+ text: string;
+ audioUrl: string;
+ engine: string;
+ duration: string;
+ effect?: string;
+}
+
+const DEMO_SCRIPT: DemoStep[] = [
+ {
+ profileIndex: 0,
+ text: 'Sir, I have completed the analysis. Your code has twelve critical vulnerabilities, your coffee is cold, and frankly your commit messages could use some work.',
+ audioUrl: '/audio/jarvis.webm',
+ engine: 'Qwen 1.7B',
+ duration: '0:10',
+ effect: 'Robot',
+ },
+ {
+ profileIndex: 4,
+ text: "I've narrated penguins, galaxies, and the entire history of mankind. But nothing prepared me for the moment a computer learned to do my job from a five second audio clip.",
+ audioUrl: '/audio/morganfreeman.webm',
+ engine: 'Qwen 1.7B',
+ duration: '0:11',
+ effect: 'Radio',
+ },
+ {
+ profileIndex: 3,
+ text: "Open source? [laugh] What's that?",
+ audioUrl: '/audio/samaltman.webm',
+ engine: 'Chatterbox',
+ duration: '0:03',
+ },
+ {
+ profileIndex: 1,
+ text: "So let me get this straight. You downloaded an app, pressed a button, and now there's two of me? The world was not ready for one",
+ audioUrl: '/audio/samjackson.webm',
+ engine: 'Qwen 1.7B',
+ duration: '0:10',
+ },
+ {
+ profileIndex: 5,
+ text: "So we got this voice cloning software and honestly it's kind of terrifying. Like, my wife could not tell the difference. Voicebox dot s h, link in the description!",
+ audioUrl: '/audio/linus.webm',
+ engine: 'Qwen 1.7B',
+ duration: '0:11',
+ },
+ {
+ profileIndex: 6,
+ text: 'This is Voicebox in one hundred seconds. It clones voices locally, it runs on your GPU, and no, OpenAI cannot hear you. Lets go.',
+ audioUrl: '/audio/fireship.webm',
+ engine: 'Qwen 0.6B',
+ duration: '0:09',
+ },
+];
+
+/** History rows pre-populated on first load. Oldest first visually (array index 0 = top row). */
+interface Generation {
+ id: number;
+ profileName: string;
+ text: string;
+ language: string;
+ engine: string;
+ duration: string;
+ timeAgo: string;
+ favorited: boolean;
+ versions: number;
+}
+
+const INITIAL_GENERATIONS: Generation[] = [
+ {
+ id: 1,
+ profileName: 'Morgan Freeman',
+ text: 'The neural pathways of human speech contain more complexity than any language model can fully capture, yet we keep pushing the boundaries of what is possible.',
+ language: 'en',
+ engine: 'Qwen 1.7B',
+ duration: '0:08',
+ timeAgo: '2 minutes ago',
+ favorited: true,
+ versions: 3,
+ },
+ {
+ id: 2,
+ profileName: 'Samuel L. Jackson',
+ text: 'In a world increasingly shaped by artificial intelligence, the human voice remains our most powerful tool for connection and storytelling.',
+ language: 'en',
+ engine: 'Qwen 1.7B',
+ duration: '0:07',
+ timeAgo: '15 minutes ago',
+ favorited: false,
+ versions: 1,
+ },
+ {
+ id: 3,
+ profileName: 'Jarvis',
+ text: 'The architecture of modern text-to-speech systems reveals an elegant interplay between transformer models and acoustic feature prediction.',
+ language: 'en',
+ engine: 'Qwen 0.6B',
+ duration: '0:09',
+ timeAgo: '1 hour ago',
+ favorited: false,
+ versions: 2,
+ },
+ {
+ id: 4,
+ profileName: 'Bob Ross',
+ text: 'Welcome to the next chapter. Every great story begins with a single voice, and today that voice can be yours.',
+ language: 'en',
+ engine: 'Chatterbox',
+ duration: '0:06',
+ timeAgo: '3 hours ago',
+ favorited: true,
+ versions: 1,
+ },
+ {
+ id: 5,
+ profileName: 'Linus Tech Tips',
+ text: 'Local inference gives you complete control over your voice data. No cloud, no subscriptions, no compromises.',
+ language: 'en',
+ engine: 'Qwen 1.7B',
+ duration: '0:05',
+ timeAgo: '5 hours ago',
+ favorited: false,
+ versions: 1,
+ },
+];
+
+const SIDEBAR_ITEMS = [
+ { icon: Volume2, label: 'Generate' },
+ { icon: AudioLines, label: 'Stories' },
+ { icon: Mic, label: 'Voices' },
+ { icon: Wand2, label: 'Effects' },
+ { icon: Speaker, label: 'Audio' },
+ { icon: Box, label: 'Models' },
+ { icon: Server, label: 'Server' },
+];
+
+// ─── Phase system ───────────────────────────────────────────────────────────
+
+type Phase = 'idle' | 'selecting' | 'typing' | 'generating' | 'complete' | 'playing';
+
+const PHASE_DURATIONS: Record = {
+ idle: 2500,
+ selecting: 800,
+ typing: 6000,
+ generating: 2800,
+ complete: 1200,
+ playing: 4000,
+};
+
+// ─── Typewriter ─────────────────────────────────────────────────────────────
+
+function TypewriterText({ text, speed }: { text: string; speed?: number }) {
+ // Default: fill the typing phase duration, leaving 500ms buffer at the end
+ const resolvedSpeed =
+ speed ?? Math.max(20, Math.floor((PHASE_DURATIONS.typing - 500) / text.length));
+ const [displayed, setDisplayed] = useState('');
+ const indexRef = useRef(0);
+
+ useEffect(() => {
+ indexRef.current = 0;
+ setDisplayed('');
+ const interval = setInterval(() => {
+ indexRef.current += 1;
+ if (indexRef.current <= text.length) {
+ setDisplayed(text.slice(0, indexRef.current));
+ } else {
+ clearInterval(interval);
+ }
+ }, resolvedSpeed);
+ return () => clearInterval(interval);
+ }, [text, resolvedSpeed]);
+
+ return (
+ <>
+ {displayed}
+
+
+ );
+}
+
+// ─── Loading bars (simplified react-loaders replacement) ────────────────────
+
+function LoadingBars({ mode }: { mode: 'idle' | 'generating' | 'playing' }) {
+ const barColor = mode !== 'idle' ? 'bg-accent' : 'bg-muted-foreground/40';
+ return (
+
+
+ );
+}
+
+// ─── History Row ────────────────────────────────────────────────────────────
+
+function HistoryRow({
+ gen,
+ mode,
+ isNew,
+}: {
+ gen: Generation;
+ mode: 'idle' | 'generating' | 'playing';
+ isNew: boolean;
+}) {
+ return (
+
+
+ );
+}
+
+// ─── Floating Generate Box ──────────────────────────────────────────────────
+
+function FloatingGenerateBox({
+ phase,
+ typingText,
+ selectedProfile,
+ effect,
+}: {
+ phase: Phase;
+ typingText: string;
+ selectedProfile: VoiceProfile | null;
+ effect?: string;
+}) {
+ const isFocused = phase === 'typing' || phase === 'generating';
+ const isGenerating = phase === 'generating';
+
+ return (
+ ('idle');
+ const [selectedIndex, setSelectedIndex] = useState(DEMO_SCRIPT[0].profileIndex);
+ const [cycle, setCycle] = useState(0);
+ const [newGenId, setNewGenId] = useState(null);
+ const [generations, setGenerations] = useState([...INITIAL_GENERATIONS]);
+ const [isMuted, setIsMuted] = useState(true);
+ const [isVisible, setIsVisible] = useState(true);
+ const [pageHidden, setPageHidden] = useState(false);
+ const containerRef = useRef(null);
+ const phaseRef = useRef(phase);
+ phaseRef.current = phase;
+
+ const step = DEMO_SCRIPT[cycle % DEMO_SCRIPT.length];
+ const selectedProfile = PROFILES[selectedIndex];
+
+ // Visibility detection
+ useEffect(() => {
+ const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), {
+ threshold: 0,
+ });
+ if (containerRef.current) observer.observe(containerRef.current);
+
+ const handleVisibility = () => setPageHidden(document.visibilityState !== 'visible');
+ document.addEventListener('visibilitychange', handleVisibility);
+
+ return () => {
+ observer.disconnect();
+ document.removeEventListener('visibilitychange', handleVisibility);
+ };
+ }, []);
+
+ const paused = !isVisible || pageHidden;
+
+ // Phase cycling — `playing` phase is driven by audio finish, not a timeout
+ useEffect(() => {
+ if (paused || phase === 'playing') return;
+
+ const duration = PHASE_DURATIONS[phase];
+ const timer = setTimeout(() => {
+ console.log(
+ '[ControlUI] phase transition',
+ phase,
+ '→ next, cycle:',
+ cycle,
+ 'step profile:',
+ PROFILES[step.profileIndex].name,
+ );
+ switch (phase) {
+ case 'idle': {
+ setSelectedIndex(step.profileIndex);
+ setPhase('selecting');
+ break;
+ }
+ case 'selecting':
+ setPhase('typing');
+ break;
+ case 'typing': {
+ const profile = PROFILES[step.profileIndex];
+ const newGen: Generation = {
+ id: Date.now(),
+ profileName: profile.name,
+ text: step.text,
+ language: profile.language,
+ engine: step.engine,
+ duration: step.duration,
+ timeAgo: 'just now',
+ favorited: false,
+ versions: 1,
+ };
+ setGenerations((prev) => [newGen, ...prev.slice(0, 5)]);
+ setNewGenId(newGen.id);
+ setPhase('generating');
+ break;
+ }
+ case 'generating':
+ setPhase('playing');
+ break;
+ }
+ }, duration);
+
+ return () => clearTimeout(timer);
+ }, [phase, paused, step, cycle]);
+
+ const handleAudioFinish = useCallback(() => {
+ if (phaseRef.current !== 'playing') return;
+ setPhase('idle');
+ setCycle((c) => c + 1);
+ setNewGenId(null);
+ }, []);
+
+ const isGenerating = phase === 'generating';
+
+ return (
+ (null);
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setVisible(true);
+ observer.disconnect();
+ }
+ },
+ { rootMargin },
+ );
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [rootMargin]);
+
+ return (
+
+
+ );
+}
diff --git a/landing/src/components/Footer.tsx b/landing/src/components/Footer.tsx
index 9370ac86..9e435a82 100644
--- a/landing/src/components/Footer.tsx
+++ b/landing/src/components/Footer.tsx
@@ -1,22 +1,33 @@
+import Image from 'next/image';
import Link from 'next/link';
-import { Separator } from '@/components/ui/separator';
import { GITHUB_REPO } from '@/lib/constants';
export function Footer() {
return (
-
-
+ {/* Background glow */}
+
- {/* Screenshots Section */}
-
-
-
- {/* Description Section */}
-
-
-
- {/* Demo Video Section */}
-
-
-
- {/* Features Section */}
-
-
-
+
+ {/* ── ControlUI mockup ─────────────────────────────────────── */}
+
- {/* Left side - Content */}
-
+ {/* ── Hero Section ─────────────────────────────────────────────── */}
+
-
-
- {/* Desktop: Large screenshot positioned off-screen */}
-
-
- - Voicebox -
-- Open source voice cloning powered by Qwen3-TTS. Create natural-sounding speech from - text with near-perfect voice replication. -
+ <> +
-
-
- {/* Download buttons under left content */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- - What is Voicebox? -
-
-
- - Voicebox is a local-first voice cloning studio with DAW-like features - for professional voice synthesis. Think of it as a{' '} - local, free and open-source alternative to ElevenLabs — download - models, clone voices, and generate speech entirely on your machine. -
-- Unlike cloud services that lock your voice data behind subscriptions, Voicebox gives - you complete privacy, professional tools, and native performance. Download a voice - model, clone any voice from a few seconds of audio, and compose multi-voice projects - with studio-grade editing tools. -
-- Optimized for performance with Metal acceleration on Mac and{' '} - CUDA acceleration on Windows/Linux for fast, local inference. -
-No Python install required.
-
-
- - See it in action... -
-
-
-
- {/** biome-ignore lint/a11y/useMediaCaption: not generating captions for this, ya damn linter */}
-
-
-
- {features.map((feature) => (
-
+ {/* Logo */}
+
-
+
+
+ {/* Headline */}
+
+
+
+ {/* Subtitle */}
+ + Your voice, your machine. +
++ Open source voice cloning studio powered by Qwen3-TTS. Clone any voice, generate natural + speech, and compose multi-voice projects — all running locally. +
+ + {/* CTAs */} + + + {/* Version */} ++ Free and open source · macOS, Windows, Linux +
+
+
+
+ + Why Voicebox exists +
+
+
+ + Cloud voice cloning services lock your voice data behind subscriptions, rate limits, + and terms of service that can change at any time. Your voice — and the voices you + clone — should belong to you. +
++ Voicebox is a local-first voice cloning studio. Download a model, clone any voice from + a few seconds of audio, and generate speech entirely on your machine. +
++ Optimized with Metal acceleration on Mac and CUDA on Windows/Linux. No Python install + required. No cloud. No subscriptions. Free and open-source, forever. +
+
+
+
+
+
+ + Download Voicebox +
++ Available for macOS, Windows, and Linux. No dependencies required. +
+
+ {/* macOS ARM */}
+
+
+
+ {/* GitHub link */}
+
+
+
+
+
+ {/* macOS Intel */}
+
+ macOS
+ Apple Silicon (ARM)
+
+
+
+
+ {/* Windows */}
+
+ macOS
+ Intel (x64)
+
+
+
+
+ {/* Linux */}
+ Windows
+ 64-bit (MSI)
+
+
+
+
+ Linux
+ Coming soon
+
+ {[0, 1, 2, 3, 4].map((i) => (
+
+ );
+}
+
+// ─── Profile Card ───────────────────────────────────────────────────────────
+
+function ProfileCard({
+ profile,
+ selected,
+ selecting,
+}: {
+ profile: VoiceProfile;
+ selected: boolean;
+ selecting: boolean;
+}) {
+ return (
+ {profile.name}
+
+ {profile.description}
+
+
+
+ {profile.language}
+
+ {profile.hasEffects &&
+
+
+
+ {/* Status icon */}
+
+
+
+
+ {/* Meta info */}
+
+
+
+ {/* Transcript */}
+ {gen.profileName}
+
+ {gen.language}
+ {gen.engine}
+ {mode !== 'generating' && {gen.duration}}
+
+
+ {mode === 'generating' ? (
+ Generating...
+ ) : (
+ gen.timeAgo
+ )}
+
+
+
+
+ {/* Action buttons */}
+
+ {gen.text}
+
+
+
+ {gen.versions > 1 && (
+
+ )}
+
+
+
+
+ {/* Text area + generate button */}
+
+
+ );
+}
+
+// ─── Main ControlUI ─────────────────────────────────────────────────────────
+
+export function ControlUI() {
+ const [phase, setPhase] = useState
+
+
+ {/* Bottom selectors */}
+
+
+
+
+
+ {/* Generate button */}
+
+
+ {phase === 'typing' ? (
+
+
+
+
+ English
+
+
+ Qwen3-TTS 1.7B
+
+
+
+
+ {/* Unmute button */}
+
+ );
+}
diff --git a/landing/src/components/Features.tsx b/landing/src/components/Features.tsx
new file mode 100644
index 00000000..498c742d
--- /dev/null
+++ b/landing/src/components/Features.tsx
@@ -0,0 +1,476 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { AudioLines, Cloud, Layers, MessageSquareText, Mic, Monitor } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+// ─── Lazy load wrapper ──────────────────────────────────────────────────────
+
+function LazyLoad({
+ children,
+ className,
+ rootMargin = '200px',
+}: {
+ children: React.ReactNode;
+ className?: string;
+ rootMargin?: string;
+}) {
+ const ref = useRef
+
+
+
+
+
+
+ {/* ── Sidebar ───────────────────────────────────────────── */}
+
+
+ {/* Logo */}
+
+
+ {/* ── Main content ──────────────────────────────────────── */}
+
+
+
+ {/* Nav items */}
+
+ 
+
+
+
+ {SIDEBAR_ITEMS.map((item, i) => {
+ const Icon = item.icon;
+ const active = i === 0;
+ return (
+
+
+ {/* Version */}
+
+
+ );
+ })}
+ v0.2.0
+
+ {/* Left: Profiles */}
+ {}}
+ />
+
+
+ {/* Header */}
+
+
+ {/* Right: History */}
+
+
+
+ {/* Profile grid */}
+ Voicebox
+
+
+
+
+
+
+
+ {/* Floating generate box */}
+
+ {PROFILES.map((profile, i) => (
+
+
+
+
+ {/* Audio player */}
+
+
+
+ {generations.map((gen) => {
+ const isThisNew = gen.id === newGenId;
+ const rowMode: 'idle' | 'generating' | 'playing' =
+ isThisNew && isGenerating
+ ? 'generating'
+ : isThisNew && phase === 'playing'
+ ? 'playing'
+ : 'idle';
+ return
+
+ {visible ? children : null}
+
+ );
+}
+
+// ─── Animation: Voice Cloning ───────────────────────────────────────────────
+
+function VoiceCloningAnimation() {
+ const [phase, setPhase] = useState(0);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setPhase((p) => (p + 1) % 3);
+ }, 2400);
+ return () => clearInterval(interval);
+ }, []);
+
+ const samples = ['Sample 1', 'Sample 2', 'Sample 3'];
+ const bars = [0.4, 0.7, 0.5, 0.9, 0.3, 0.6, 0.8, 0.4, 0.7, 0.5, 0.3, 0.6];
+
+ return (
+
+
+ );
+}
+
+// ─── Animation: Stories Editor ───────────────────────────────────────────────
+
+function StoriesAnimation() {
+ const [activeTrack, setActiveTrack] = useState(0);
+ const tracks = [
+ {
+ name: 'Narrator',
+ color: '#ac8a2b',
+ clips: [
+ { w: '45%', x: '5%' },
+ { w: '30%', x: '60%' },
+ ],
+ },
+ {
+ name: 'Character A',
+ color: '#3b82f6',
+ clips: [
+ { w: '25%', x: '15%' },
+ { w: '35%', x: '50%' },
+ ],
+ },
+ { name: 'Character B', color: '#8b5cf6', clips: [{ w: '20%', x: '30%' }] },
+ ];
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setActiveTrack((p) => (p + 1) % tracks.length);
+ }, 2200);
+ return () => clearInterval(interval);
+ }, [tracks.length]);
+
+ return (
+
+ {/* Sample pills */}
+
+ voice profile ready
+
+
+
+ {samples.map((s, i) => (
+
+ {s}
+
+ ))}
+
+
+ {/* Waveform visualization */}
+
+ {bars.map((h, i) => (
+
+
+ {/* Result label */}
+
+ {tracks.map((track, i) => (
+
+
+ {track.name}
+
+
+ ))}
+
+ );
+}
+
+// ─── Animation: Multi-Sample ────────────────────────────────────────────────
+
+function MultiSampleAnimation() {
+ const [active, setActive] = useState(0);
+ const samples = [
+ { label: 'interview_clip.wav', dur: '12.4s', quality: 0.92 },
+ { label: 'podcast_intro.wav', dur: '8.1s', quality: 0.88 },
+ { label: 'narration_take3.wav', dur: '15.7s', quality: 0.95 },
+ { label: 'casual_chat.wav', dur: '6.2s', quality: 0.85 },
+ ];
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setActive((p) => (p + 1) % samples.length);
+ }, 2000);
+ return () => clearInterval(interval);
+ }, [samples.length]);
+
+ return (
+
+ {track.clips.map((clip, j) => (
+
+
+ {samples.map((s, i) => (
+
+
+ {s.label}
+
+ {s.dur}
+
+ ))}
+
+ );
+}
+
+// ─── Animation: Local or Remote ─────────────────────────────────────────────
+
+function LocalRemoteAnimation() {
+ const [mode, setMode] = useState(0);
+ const modes = ['Local GPU', 'Remote Server'];
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setMode((p) => (p + 1) % 2);
+ }, 2800);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+
+
+
+ );
+}
+
+// ─── Animation: Transcription ───────────────────────────────────────────────
+
+function TranscriptionAnimation() {
+ const [charIndex, setCharIndex] = useState(0);
+ const text = 'The quick brown fox jumps over the lazy dog near the riverbank.';
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCharIndex((p) => {
+ if (p >= text.length) return 0;
+ return p + 1;
+ });
+ }, 80);
+ return () => clearInterval(interval);
+ }, [text.length]);
+
+ return (
+
+ {/* Toggle */}
+
+
+ {modes.map((m, i) => (
+
+ {m}
+
+ ))}
+
+
+ {/* Status */}
+
+
+
+ {/* Fake waveform */}
+
+ );
+}
+
+// ─── Animation: Cross-Platform ──────────────────────────────────────────────
+
+function CrossPlatformAnimation() {
+ const [active, setActive] = useState(0);
+ const platforms = [
+ { name: 'macOS', icon: '🍎', detail: 'Metal acceleration' },
+ { name: 'Windows', icon: '🪟', detail: 'CUDA acceleration' },
+ { name: 'Linux', icon: '🐧', detail: 'CUDA acceleration' },
+ ];
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setActive((p) => (p + 1) % platforms.length);
+ }, 2000);
+ return () => clearInterval(interval);
+ }, [platforms.length]);
+
+ return (
+
+ {Array.from({ length: 30 }, (_, i) => {
+ const h = 0.2 + 0.8 * Math.abs(Math.sin(i * 0.5 + charIndex * 0.1));
+ const active = i < (charIndex / text.length) * 30;
+ return (
+
+ );
+ })}
+
+
+ {/* Transcribed text */}
+
+ {text.slice(0, charIndex)}
+ {charIndex < text.length && (
+
+ )}
+
+
+
+ );
+}
+
+// ─── Feature data ───────────────────────────────────────────────────────────
+
+const FEATURES = [
+ {
+ title: 'Near-Perfect Voice Cloning',
+ description:
+ 'Powered by Qwen3-TTS for exceptional voice quality. Clone any voice from a few seconds of audio with natural intonation and emotion.',
+ icon: Mic,
+ animation: VoiceCloningAnimation,
+ },
+ {
+ title: 'Stories Editor',
+ description:
+ 'Create multi-voice narratives with a timeline-based editor. Arrange tracks, trim clips, and mix conversations between characters.',
+ icon: AudioLines,
+ animation: StoriesAnimation,
+ },
+ {
+ title: 'Multi-Sample Support',
+ description:
+ 'Combine multiple voice samples for higher quality results. More samples means more natural-sounding speech synthesis.',
+ icon: Layers,
+ animation: MultiSampleAnimation,
+ },
+ {
+ title: 'Local or Remote',
+ description:
+ 'Run GPU inference locally with Metal or CUDA, or connect to a remote machine. One-click server setup with automatic discovery.',
+ icon: Cloud,
+ animation: LocalRemoteAnimation,
+ },
+ {
+ title: 'Audio Transcription',
+ description:
+ 'Powered by Whisper for accurate speech-to-text. Automatically extract reference text from voice samples.',
+ icon: MessageSquareText,
+ animation: TranscriptionAnimation,
+ },
+ {
+ title: 'Cross-Platform',
+ description:
+ 'Available for macOS, Windows, and Linux. No Python installation required — everything is bundled.',
+ icon: Monitor,
+ animation: CrossPlatformAnimation,
+ },
+];
+
+// ─── Feature Card ───────────────────────────────────────────────────────────
+
+function FeatureCard({ feature }: { feature: (typeof FEATURES)[number] }) {
+ const Icon = feature.icon;
+ const Animation = feature.animation;
+
+ return (
+
+ {platforms.map((p, i) => (
+
+ {p.icon}
+
+ {p.name}
+
+
+ {p.detail}
+
+
+ ))}
+
+
+
+
+
+ );
+}
+
+// ─── Features Section ───────────────────────────────────────────────────────
+
+export function Features() {
+ return (
+
+
+
+
+ {feature.title}
+{feature.description}
+
+
+
+
+ + Professional voice tools, zero compromise +
++ Everything you need to clone voices, generate speech, and produce multi-voice content — + running entirely on your machine. +
+
+ {FEATURES.map((feature) => (
+
+