503 lines
30 KiB
TypeScript
503 lines
30 KiB
TypeScript
|
import React, { useState, useEffect, useRef } from 'react';
|
||
|
|
import { TerminalWindow } from './TerminalWindow';
|
||
|
|
import { TypingAnimation } from './TypingAnimation';
|
||
|
|
|
||
|
|
export const SmartRouting: React.FC = () => {
|
||
|
|
const [activePath, setActivePath] = useState<0 | 1 | 2>(1);
|
||
|
|
|
||
|
|
// Animation state for the bottom terminal
|
||
|
|
const [actionStep, setActionStep] = useState(0);
|
||
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// Loop for the diagram animation
|
||
|
|
useEffect(() => {
|
||
|
|
const interval = setInterval(() => {
|
||
|
|
setActivePath(prev => (prev + 1) % 3 as 0 | 1 | 2);
|
||
|
|
}, 3500);
|
||
|
|
return () => clearInterval(interval);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Loop for the terminal sequence
|
||
|
|
useEffect(() => {
|
||
|
|
const timeline = [
|
||
|
|
{ step: 1, delay: 1000 }, // Start typing cmd 1
|
||
|
|
{ step: 2, delay: 3500 }, // Show output 1
|
||
|
|
{ step: 3, delay: 6500 }, // Start typing cmd 2 (Free)
|
||
|
|
{ step: 4, delay: 9000 }, // Show output 2
|
||
|
|
{ step: 5, delay: 12000 }, // Start typing cmd 3
|
||
|
|
{ step: 6, delay: 14000 }, // Show output 3
|
||
|
|
{ step: 7, delay: 17000 }, // Start typing cmd 4
|
||
|
|
{ step: 8, delay: 20000 }, // Show output 4
|
||
|
|
{ step: 9, delay: 24000 }, // Pause before reset
|
||
|
|
];
|
||
|
|
|
||
|
|
let timeouts: ReturnType<typeof setTimeout>[] = [];
|
||
|
|
|
||
|
|
const runSequence = () => {
|
||
|
|
setActionStep(0);
|
||
|
|
let cumDelay = 0;
|
||
|
|
timeline.forEach(({ step, delay }) => {
|
||
|
|
timeouts.push(setTimeout(() => setActionStep(step), delay));
|
||
|
|
cumDelay = Math.max(cumDelay, delay);
|
||
|
|
});
|
||
|
|
// Reset loop
|
||
|
|
timeouts.push(setTimeout(runSequence, cumDelay + 1000));
|
||
|
|
};
|
||
|
|
|
||
|
|
runSequence();
|
||
|
|
return () => timeouts.forEach(clearTimeout);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Auto-scroll effect
|
||
|
|
useEffect(() => {
|
||
|
|
if (scrollRef.current) {
|
||
|
|
scrollRef.current.scrollTo({
|
||
|
|
top: scrollRef.current.scrollHeight,
|
||
|
|
behavior: 'smooth'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [actionStep]);
|
||
|
|
|
||
|
|
const getPathColor = (pathIndex: number) => {
|
||
|
|
if (pathIndex === 0) return '#d97757'; // Native (Orange)
|
||
|
|
if (pathIndex === 1) return '#3fb950'; // Free (Green)
|
||
|
|
return '#8b5cf6'; // Premium (Purple)
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full relative">
|
||
|
|
{/* Background Grid Texture */}
|
||
|
|
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none -z-10"></div>
|
||
|
|
|
||
|
|
{/* Section Header */}
|
||
|
|
<div className="text-center mb-24 relative z-10">
|
||
|
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#1a1a1a] border border-gray-800 text-[11px] font-mono text-gray-400 uppercase tracking-widest mb-6 shadow-xl">
|
||
|
|
<span className="relative flex h-2 w-2">
|
||
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-claude-ish opacity-75"></span>
|
||
|
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-claude-ish"></span>
|
||
|
|
</span>
|
||
|
|
Dynamic Route Resolution
|
||
|
|
</div>
|
||
|
|
<h2 className="text-4xl md:text-6xl font-sans font-bold text-white mb-6 tracking-tight">
|
||
|
|
Free to Start. <span className="text-transparent bg-clip-text bg-gradient-to-r from-claude-ish to-blue-500">Native When You Need It.</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-lg text-gray-400 font-mono max-w-2xl mx-auto leading-relaxed">
|
||
|
|
Claudish intelligently routes your prompts based on the model you select.
|
||
|
|
<br/><span className="text-white">Zero config. Zero friction.</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* DIAGRAM CONTAINER */}
|
||
|
|
<div className="relative max-w-7xl mx-auto px-4 min-h-[600px]">
|
||
|
|
|
||
|
|
{/* SVG CIRCUIT LAYER (Absolute) */}
|
||
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-visible hidden md:block">
|
||
|
|
<svg className="w-full h-full" viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||
|
|
<defs>
|
||
|
|
<filter id="glow-trace" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
{/* Connection Lines */}
|
||
|
|
{/* Center Start Point: 600, 120 (Bottom of Router) */}
|
||
|
|
|
||
|
|
{/* Path 0: Left (Native) */}
|
||
|
|
<path
|
||
|
|
d="M 600 120 L 600 180 L 200 180 L 200 240"
|
||
|
|
fill="none"
|
||
|
|
stroke={activePath === 0 ? getPathColor(0) : '#333'}
|
||
|
|
strokeWidth={activePath === 0 ? 4 : 2}
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
filter={activePath === 0 ? "url(#glow-trace)" : ""}
|
||
|
|
className="transition-all duration-500"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Path 1: Center (Free) */}
|
||
|
|
<path
|
||
|
|
d="M 600 120 L 600 240"
|
||
|
|
fill="none"
|
||
|
|
stroke={activePath === 1 ? getPathColor(1) : '#333'}
|
||
|
|
strokeWidth={activePath === 1 ? 4 : 2}
|
||
|
|
strokeLinecap="round"
|
||
|
|
filter={activePath === 1 ? "url(#glow-trace)" : ""}
|
||
|
|
className="transition-all duration-500"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Path 2: Right (Premium) */}
|
||
|
|
<path
|
||
|
|
d="M 600 120 L 600 180 L 1000 180 L 1000 240"
|
||
|
|
fill="none"
|
||
|
|
stroke={activePath === 2 ? getPathColor(2) : '#333'}
|
||
|
|
strokeWidth={activePath === 2 ? 4 : 2}
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
filter={activePath === 2 ? "url(#glow-trace)" : ""}
|
||
|
|
className="transition-all duration-500"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Moving Packets */}
|
||
|
|
{activePath === 0 && (
|
||
|
|
<circle r="6" fill="white" filter="url(#glow-trace)">
|
||
|
|
<animateMotion
|
||
|
|
dur="0.8s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
path="M 600 120 L 600 180 L 200 180 L 200 240"
|
||
|
|
keyPoints="0;1"
|
||
|
|
keyTimes="0;1"
|
||
|
|
calcMode="linear"
|
||
|
|
/>
|
||
|
|
</circle>
|
||
|
|
)}
|
||
|
|
{activePath === 1 && (
|
||
|
|
<circle r="6" fill="white" filter="url(#glow-trace)">
|
||
|
|
<animateMotion
|
||
|
|
dur="0.8s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
path="M 600 120 L 600 240"
|
||
|
|
keyPoints="0;1"
|
||
|
|
keyTimes="0;1"
|
||
|
|
calcMode="linear"
|
||
|
|
/>
|
||
|
|
</circle>
|
||
|
|
)}
|
||
|
|
{activePath === 2 && (
|
||
|
|
<circle r="6" fill="white" filter="url(#glow-trace)">
|
||
|
|
<animateMotion
|
||
|
|
dur="0.8s"
|
||
|
|
repeatCount="indefinite"
|
||
|
|
path="M 600 120 L 600 180 L 1000 180 L 1000 240"
|
||
|
|
keyPoints="0;1"
|
||
|
|
keyTimes="0;1"
|
||
|
|
calcMode="linear"
|
||
|
|
/>
|
||
|
|
</circle>
|
||
|
|
)}
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* --- TOP: ROUTER NODE --- */}
|
||
|
|
<div className="relative z-20 flex justify-center mb-24 md:mb-32">
|
||
|
|
<div className="relative group">
|
||
|
|
{/* Glow effect */}
|
||
|
|
<div className="absolute inset-0 bg-claude-ish/20 blur-xl rounded-lg group-hover:bg-claude-ish/30 transition-all"></div>
|
||
|
|
|
||
|
|
<div className="bg-[#0f0f0f] border-2 border-gray-700 w-[320px] rounded-lg p-1 relative shadow-2xl">
|
||
|
|
{/* Port labels */}
|
||
|
|
<div className="absolute -left-2 top-4 w-1 h-3 bg-gray-600 rounded-l"></div>
|
||
|
|
<div className="absolute -right-2 top-4 w-1 h-3 bg-gray-600 rounded-r"></div>
|
||
|
|
|
||
|
|
<div className="bg-[#050505] rounded border border-gray-800 p-4 relative overflow-hidden">
|
||
|
|
<div className="flex justify-between items-center mb-3 border-b border-gray-800 pb-2">
|
||
|
|
<span className="text-white font-bold font-mono tracking-tight">CLAUDISH_ROUTER</span>
|
||
|
|
<div className="flex gap-1">
|
||
|
|
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||
|
|
<div className="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Dynamic Terminal Text */}
|
||
|
|
<div className="font-mono text-xs space-y-2 min-h-[40px]">
|
||
|
|
<div className="text-gray-500">$ claudish routing-table --watch</div>
|
||
|
|
<div className="text-claude-ish truncate">
|
||
|
|
{activePath === 0 && '>> DETECTED: opus-4.5 (NATIVE)'}
|
||
|
|
{activePath === 1 && '>> DETECTED: grok-free (OPENROUTER)'}
|
||
|
|
{activePath === 2 && '>> DETECTED: gpt-5.1 (PREMIUM)'}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* --- BOTTOM: 3 DESTINATIONS --- */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-20">
|
||
|
|
|
||
|
|
{/* 1. NATIVE CARD */}
|
||
|
|
<div className={`
|
||
|
|
flex flex-col bg-[#0a0a0a] rounded-xl overflow-hidden border-2 transition-all duration-500 ease-out
|
||
|
|
${activePath === 0
|
||
|
|
? 'border-[#d97757] shadow-[0_0_50px_-12px_rgba(217,119,87,0.5)] translate-y-0 scale-[1.02]'
|
||
|
|
: 'border-gray-800 opacity-60 translate-y-4 hover:opacity-80'
|
||
|
|
}
|
||
|
|
`}>
|
||
|
|
<div className="bg-[#d97757] p-1"></div> {/* Colored Top Bar */}
|
||
|
|
<div className="p-6 flex-1 flex flex-col">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className={`text-xl font-bold font-sans ${activePath === 0 ? 'text-white' : 'text-gray-400'}`}>
|
||
|
|
Your Subscription
|
||
|
|
</h3>
|
||
|
|
<div className="text-[10px] font-bold bg-[#d97757]/20 text-[#d97757] px-2 py-1 rounded border border-[#d97757]/30">
|
||
|
|
NATIVE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-sm font-mono text-gray-400 mb-6 flex-1">
|
||
|
|
<p className="mb-4 text-gray-500">
|
||
|
|
Direct passthrough to Anthropic's API. Uses your existing credits or Pro plan.
|
||
|
|
</p>
|
||
|
|
<ul className="space-y-2">
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#d97757]">✓</span> opus-4.5
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#d97757]">✓</span> sonnet-4.5
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#d97757]">✓</span> haiku-4.5
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-4 border-t border-gray-800 text-xs text-gray-500 font-mono">
|
||
|
|
0% MARKUP • DIRECT API
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 2. FREE CARD (Updated) */}
|
||
|
|
<div className={`
|
||
|
|
flex flex-col bg-[#0a0a0a] rounded-xl overflow-hidden border-2 transition-all duration-500 ease-out
|
||
|
|
${activePath === 1
|
||
|
|
? 'border-[#3fb950] shadow-[0_0_50px_-12px_rgba(63,185,80,0.5)] translate-y-0 scale-[1.02]'
|
||
|
|
: 'border-gray-800 opacity-60 translate-y-4 hover:opacity-80'
|
||
|
|
}
|
||
|
|
`}>
|
||
|
|
<div className="bg-[#3fb950] p-1"></div>
|
||
|
|
<div className="p-6 flex-1 flex flex-col">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className={`text-xl font-bold font-sans ${activePath === 1 ? 'text-white' : 'text-gray-400'}`}>
|
||
|
|
Top Models. Always Free.
|
||
|
|
</h3>
|
||
|
|
<div className="text-[10px] font-bold bg-[#3fb950]/20 text-[#3fb950] px-2 py-1 rounded border border-[#3fb950]/30">
|
||
|
|
OPENROUTER FREE TIER
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-sm font-mono text-gray-400 mb-6 flex-1">
|
||
|
|
<p className="mb-4 text-gray-500 leading-relaxed">
|
||
|
|
OpenRouter consistently offers high-quality models at no cost. Not trials. Not limited versions. Real models from Google, xAI, DeepSeek, Meta, Microsoft, and more.
|
||
|
|
</p>
|
||
|
|
<ul className="space-y-2">
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#3fb950]">✓</span> x-ai/grok-4.1-fast:free
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#3fb950]">✓</span> gemini-2.0-flash
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#3fb950]">✓</span> deepseek-r1
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-4 border-t border-gray-800 text-xs text-gray-500 font-mono">
|
||
|
|
Google · xAI · DeepSeek · Meta · Microsoft
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 3. PREMIUM CARD */}
|
||
|
|
<div className={`
|
||
|
|
flex flex-col bg-[#0a0a0a] rounded-xl overflow-hidden border-2 transition-all duration-500 ease-out
|
||
|
|
${activePath === 2
|
||
|
|
? 'border-[#8b5cf6] shadow-[0_0_50px_-12px_rgba(139,92,246,0.5)] translate-y-0 scale-[1.02]'
|
||
|
|
: 'border-gray-800 opacity-60 translate-y-4 hover:opacity-80'
|
||
|
|
}
|
||
|
|
`}>
|
||
|
|
<div className="bg-[#8b5cf6] p-1"></div>
|
||
|
|
<div className="p-6 flex-1 flex flex-col">
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
<h3 className={`text-xl font-bold font-sans ${activePath === 2 ? 'text-white' : 'text-gray-400'}`}>
|
||
|
|
Pay As You Go
|
||
|
|
</h3>
|
||
|
|
<div className="text-[10px] font-bold bg-[#8b5cf6]/20 text-[#8b5cf6] px-2 py-1 rounded border border-[#8b5cf6]/30">
|
||
|
|
PREMIUM
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-sm font-mono text-gray-400 mb-6 flex-1">
|
||
|
|
<p className="mb-4 text-gray-500">
|
||
|
|
Use top-tier reasoning models from other providers. Paid per token.
|
||
|
|
</p>
|
||
|
|
<ul className="space-y-2">
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#8b5cf6]">✓</span> gpt-5.1
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#8b5cf6]">✓</span> gemini-3-pro
|
||
|
|
</li>
|
||
|
|
<li className="flex items-center gap-2 text-white">
|
||
|
|
<span className="text-[#8b5cf6]">✓</span> deepseek-v3.1
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-auto pt-4 border-t border-gray-800 text-xs text-gray-500 font-mono">
|
||
|
|
PAY PER TOKEN • PREPAID
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* TERMINAL EXAMPLE - SEE IT IN ACTION */}
|
||
|
|
<div className="mt-32 max-w-4xl mx-auto px-4">
|
||
|
|
<div className="text-center mb-10">
|
||
|
|
<h2 className="text-3xl font-bold text-white mb-2">See It In Action</h2>
|
||
|
|
<p className="text-gray-500 font-mono text-sm">Real-time CLI routing behavior</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<TerminalWindow title="claudish routing" className="bg-[#050505] shadow-[0_0_60px_-15px_rgba(0,0,0,0.8)] border-gray-800 rounded-lg h-[500px]" noPadding={true}>
|
||
|
|
<div ref={scrollRef} className="p-6 font-mono text-sm leading-relaxed overflow-y-auto h-full scrollbar-hide scroll-smooth">
|
||
|
|
|
||
|
|
{/* 1. NATIVE SCENARIO */}
|
||
|
|
<div className={`transition-opacity duration-500 ${actionStep >= 1 ? 'opacity-100' : 'opacity-0 hidden'}`}>
|
||
|
|
<div className="text-gray-500 mb-1"># Use your Claude Max subscription (native passthrough)</div>
|
||
|
|
<div className="flex gap-2 text-white mb-4">
|
||
|
|
<span className="text-claude-ish">$</span>
|
||
|
|
<TypingAnimation text="claudish --model anthropic/claude-sonnet-4.5" speed={20} className="font-semibold" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={`transition-all duration-500 mb-8 border-b border-gray-800/50 pb-8 ${actionStep >= 2 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 hidden'}`}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Routing:</span>
|
||
|
|
<span className="text-white">Native Anthropic API</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Subscription:</span>
|
||
|
|
<span className="text-[#d97757]">Claude Max detected</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Context:</span>
|
||
|
|
<span className="text-white">1,000K available</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white font-bold">Ready</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 2. FREE SCENARIO (Updated) */}
|
||
|
|
<div className={`transition-opacity duration-500 ${actionStep >= 3 ? 'opacity-100' : 'opacity-0 hidden'}`}>
|
||
|
|
<div className="text-gray-500 mb-1"># OpenRouter's free tier — real top models, always available</div>
|
||
|
|
<div className="flex gap-2 text-white mb-4">
|
||
|
|
<span className="text-claude-ish">$</span>
|
||
|
|
<TypingAnimation text="claudish --free" speed={20} className="font-semibold" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={`transition-all duration-500 mb-8 border-b border-gray-800/50 pb-8 ${actionStep >= 4 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 hidden'}`}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white">15 curated free models from trusted providers</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white">Grok 4.1 Fast — 2M context</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white">Gemini 2.0 Flash — 1M context</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white">DeepSeek R1 — 164K context</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white">Llama 3.3 70B — 131K context</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 mt-2">
|
||
|
|
<span className="text-gray-400">These aren't trials. They're real models. Pick one and start coding.</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 3. PREMIUM SCENARIO */}
|
||
|
|
<div className={`transition-opacity duration-500 ${actionStep >= 5 ? 'opacity-100' : 'opacity-0 hidden'}`}>
|
||
|
|
<div className="text-gray-500 mb-1"># Use premium models (pay per token)</div>
|
||
|
|
<div className="flex gap-2 text-white mb-4">
|
||
|
|
<span className="text-claude-ish">$</span>
|
||
|
|
<TypingAnimation text="claudish --model openai/gpt-5.1" speed={20} className="font-semibold" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={`transition-all duration-500 mb-8 border-b border-gray-800/50 pb-8 ${actionStep >= 6 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 hidden'}`}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Routing:</span>
|
||
|
|
<span className="text-white">OpenRouter</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Cost:</span>
|
||
|
|
<span className="text-white">$5.63 / 1M tokens</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Context:</span>
|
||
|
|
<span className="text-white">400K available</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white font-bold">Ready</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 4. MIXED SCENARIO */}
|
||
|
|
<div className={`transition-opacity duration-500 ${actionStep >= 7 ? 'opacity-100' : 'opacity-0 hidden'}`}>
|
||
|
|
<div className="text-gray-500 mb-1"># Mix models for cost optimization</div>
|
||
|
|
<div className="flex gap-2 text-white">
|
||
|
|
<span className="text-claude-ish">$</span>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div>claudish \</div>
|
||
|
|
<div className="pl-4">--model-opus anthropic/claude-opus-4.5 \ <span className="text-gray-600"># Native Claude</span></div>
|
||
|
|
<div className="pl-4">--model-sonnet x-ai/grok-4 \ <span className="text-gray-600"># Premium</span></div>
|
||
|
|
<div className="pl-4 mb-4">--model-haiku x-ai/grok-4.1-fast:free <span className="text-gray-600"># Free</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={`transition-all duration-500 pb-2 ${actionStep >= 8 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 hidden'}`}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Opus:</span>
|
||
|
|
<span className="text-[#d97757]">Native Anthropic (subscription)</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Sonnet:</span>
|
||
|
|
<span className="text-white">OpenRouter ($9.00/1M)</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-gray-400">Haiku:</span>
|
||
|
|
<span className="text-[#3fb950]">OpenRouter (free!)</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 mt-2">
|
||
|
|
<span className="text-[#3fb950]">✓</span>
|
||
|
|
<span className="text-white font-bold">Ready — 3 models collaborating</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Cursor at bottom */}
|
||
|
|
<div className={`flex items-center mt-2 ${actionStep >= 8 ? 'opacity-100' : 'opacity-0'}`}>
|
||
|
|
<span className="text-claude-ish mr-2">$</span>
|
||
|
|
<div className="w-2.5 h-4 bg-gray-500/50 animate-cursor-blink"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</TerminalWindow>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|