// scene.jsx — scheduling setup animated visual // Restyled to match Scheduling Graphic palette & materials. const INK = '#0f1a2e'; const INK_SOFT = '#5b6a82'; const INK_MUTE = '#8a96ab'; const MUTED = '#e7ebf2'; const MUTED_2 = '#f3f5f9'; const BORDER = '#dfe4ec'; const BG = '#ffffff'; const BLUE = 'oklch(60% 0.16 245)'; const BLUE_DEEP = 'oklch(44% 0.16 245)'; const BLUE_SOFT = 'oklch(95% 0.035 245)'; const BLUE_MID = 'oklch(88% 0.07 245)'; const BLUE_INK = 'oklch(38% 0.14 245)'; // ── Root ─────────────────────────────────────────────────────────────────── function Scene() { const t = useTime(); return (
); } // ── Backdrop: plain ────────────────────────────────────────────────────── function Backdrop() { return null; } // ── Meta label (top-left) ───────────────────────────────────────────────── function MetaLabel({ t }) { const op = animate({ from: 0, to: 1, start: 0.2, end: 0.8 })(t); return (
Scheduling · Setup / v2.4
); } // ── Config card ─────────────────────────────────────────────────────────── function ConfigCard({ t }) { const cardY = interpolate([0, 0.9], [22, 0], Easing.easeOutCubic)(t); const cardOp = animate({ from: 0, to: 1, start: 0, end: 0.7 })(t); return (
{/* thin accent bar — matches graphic's identity-bar language */}
{/* Header */}
Meeting Type
Intro Call · 30 min
{/* Body */}
); } function TabChip({ label, active }) { return (
{label}
); } function Row({ label, sublabel, y, op, children, zIndex }) { return (
{label}
{sublabel}
{children}
); } // Duration pills function DurationRow({ t }) { const y = interpolate([0.3, 1.0], [14, 0], Easing.easeOutCubic)(t); const op = animate({ from: 0, to: 1, start: 0.3, end: 0.9 })(t); let selected = 1; if (t >= 2.2 && t < 3.0) selected = 0; else if (t >= 3.0) selected = 1; return (
{['15 min', '30 min', '60 min'].map((v, i) => ( ))}
); } function DurationPill({ label, active }) { return (
{label}
); } // Segmented start-time function StartTimeRow({ t }) { const y = interpolate([0.5, 1.2], [14, 0], Easing.easeOutCubic)(t); const op = animate({ from: 0, to: 1, start: 0.5, end: 1.1 })(t); let selected = 0; if (t >= 3.4) selected = 1; return (
{['10', '15', '30', '60'].map((v, i) => (
{v}
))}
); } // Date range dropdown function DateRangeRow({ t }) { const y = interpolate([0.7, 1.4], [14, 0], Easing.easeOutCubic)(t); const op = animate({ from: 0, to: 1, start: 0.7, end: 1.3 })(t); // Cycle through options so there's still some life to the animation. // 0..3.8s → "60 days", 3.8..4.8s → "90 days", then stays. const options = ['30 days', '60 days', '90 days', 'Custom range']; let selectedIdx = 1; if (t >= 4.3) selectedIdx = 2; const open = t >= 3.8 && t < 4.3; const openProg = open ? Easing.easeOutCubic(clamp((t - 3.8) / 0.25, 0, 1)) : 0; return (
{options[selectedIdx]}
{/* Dropdown menu */} {openProg > 0 && (
{options.map((opt, i) => { // Mid-transition, the hover lands on "90 days" (idx 2) const hovered = i === 2; const isSel = i === selectedIdx; return (
{opt} {isSel && ( )}
); })}
)}
); } // Buffer toggle function BufferRow({ t }) { const y = interpolate([0.9, 1.6], [14, 0], Easing.easeOutCubic)(t); const op = animate({ from: 0, to: 1, start: 0.9, end: 1.5 })(t); const toggleOn = t >= 5.4; return (
10 min
); } function Toggle({ on }) { return (
); } // ── Preview card ────────────────────────────────────────────────────────── function PreviewCard({ t }) { const slide = animate({ from: 60, to: 0, start: 1.4, end: 2.3, ease: Easing.easeOutCubic })(t); const op = animate({ from: 0, to: 1, start: 1.4, end: 2.1 })(t); return (
{/* Header */}
Live Preview
Thursday, April 23
LIVE
); } function WeekStrip({ t }) { const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']; const nums = [20, 21, 22, 23, 24, 25, 26]; const activeIdx = 3; return (
{days.map((d, i) => { const delay = 2.0 + i * 0.06; const entered = t >= delay; const eScale = entered ? Easing.easeOutBack(clamp((t - delay) / 0.4, 0, 1)) : 0; const isActive = i === activeIdx; const isPast = i < 2; return (
{d}
{nums[i]}
); })}
); } function TimeSlots({ t }) { const slots = ['9:00 am', '9:30 am', '10:00 am', '11:00 am', '1:30 pm', '2:00 pm']; const pickedIdx = 3; return (
{slots.map((time, i) => { const delay = 2.6 + i * 0.07; const entered = t >= delay; const progress = entered ? Easing.easeOutCubic(clamp((t - delay) / 0.4, 0, 1)) : 0; const picked = t >= 6.2 && i === pickedIdx; const hovered = t >= 5.8 && t < 6.2 && i === pickedIdx; return (
{time}
); })}
); } function BookingFooter({ t }) { const op = animate({ from: 0, to: 1, start: 3.4, end: 4.0 })(t); const y = interpolate([3.4, 4.0], [12, 0], Easing.easeOutCubic)(t); const booked = t >= 6.5; return (
PST · 30 min
{booked && ( )} {booked ? 'Confirmed' : 'Book 11:00 am'}
); } // ── Ribbon connector ────────────────────────────────────────────────────── function Connector({ t }) { const draw = clamp((t - 2.2) / 1.0, 0, 1); const op = animate({ from: 0, to: 1, start: 2.2, end: 2.8 })(t); // From config card right edge near top header → preview card left edge const path = 'M 760 200 C 830 210, 830 340, 900 340'; return ( {/* soft glow */} {/* main */} {/* dots */} {[0.33, 0.66].map((f, i) => { const vis = draw > f ? 1 : 0; const cx = 760 + (900 - 760) * f; const cy = 200 + (340 - 200) * f + Math.sin(f * Math.PI) * 8; return ; })} ); } window.Scene = Scene;