// scenes.jsx — Catchflow "System Quest" themed todo list animation // Vertical 9:16 mobile format, 1080x1920 stage // ─── Theme ────────────────────────────────────────────────────────────────── const THEME = { bg: '#03060d', bgDeep: '#000208', cyan: '#7DEBFF', cyanDim: '#3AA0BF', blue: '#4F8DFF', violet: '#9B7BFF', ink: '#E8F4FF', ash: '#7A8CA0', warn: '#FFB347', green: '#7CFFB2', red: '#FF6B8A', panel: 'rgba(20, 36, 64, 0.55)', panelEdge: 'rgba(125, 235, 255, 0.55)', font: '"Rajdhani", "Orbitron", system-ui, sans-serif', mono: '"JetBrains Mono", ui-monospace, monospace', }; // ─── Reusable atoms ───────────────────────────────────────────────────────── // Bracketed corner frame: angular sci-fi panel with cut corners and glow function Bracket({ x, y, width, height, opacity = 1, glow = 1, cut = 18, edgeColor }) { const c = edgeColor || THEME.panelEdge; const path = `polygon( ${cut}px 0, calc(100% - ${cut}px) 0, 100% ${cut}px, 100% calc(100% - ${cut}px), calc(100% - ${cut}px) 100%, ${cut}px 100%, 0 calc(100% - ${cut}px), 0 ${cut}px )`; return (
{/* Outer hex edge */}
{/* Inner fill (slightly inset) */}
{/* Scanline overlay */}
); } // Angular L-corner brackets (floating, no panel fill) function CornerMarks({ x, y, width, height, size = 28, color, opacity = 1, thickness = 3 }) { const c = color || THEME.cyan; const s = size; const t = thickness; const corner = (top, left, hFlip, vFlip) => (
); return (
{corner(0, 0, false, false)} {corner(0, width, true, false)} {corner(height, 0, false, true)} {corner(height, width, true, true)}
); } // Animated scanline sweeping across a region function Scanline({ x, y, width, height, time, period = 3, color }) { const c = color || THEME.cyan; const t = (time % period) / period; return (
); } // Particle field — slowly-drifting glints function ParticleField({ count = 60, time, width = 1080, height = 1920 }) { const particles = React.useMemo(() => { const arr = []; for (let i = 0; i < count; i++) { arr.push({ x: Math.random() * width, y: Math.random() * height, size: 1 + Math.random() * 2.5, speed: 6 + Math.random() * 18, phase: Math.random() * Math.PI * 2, hue: Math.random() < 0.7 ? THEME.cyan : THEME.violet, }); } return arr; }, [count, width, height]); return (
{particles.map((p, i) => { const yy = (p.y - time * p.speed + height) % height; const flicker = 0.4 + 0.6 * Math.abs(Math.sin(time * 1.2 + p.phase)); return (
); })}
); } // Pulse ring expanding out of a point function PulseRing({ cx, cy, time, start, period = 1.4, maxR = 360, color, thickness = 2 }) { const c = color || THEME.cyan; const local = time - start; if (local < 0) return null; const t = (local % period) / period; const r = t * maxR; const op = (1 - t) * 0.7; return (
); } // Phone shell (bezel) function PhoneShell({ x, y, width, height, screenChildren, opacity = 1, scale = 1 }) { const r = 64; return (
{screenChildren}
{/* Notch */}
); } // Status bar inside phone screen function StatusBar({ time }) { const hh = String(8 + Math.floor(time / 60)).padStart(2, '0'); const mm = String(Math.floor(time * 17) % 60).padStart(2, '0'); return (
{hh}:{mm}
); } // ─── Quest item card ──────────────────────────────────────────────────────── function QuestRow({ x, y, width, label, xp, status, time, completeAt, clearedText, pendingText }) { // status: "pending" | "complete" // completeAt: optional timestamp when completion fires (for flash) const justCompleted = completeAt != null && time >= completeAt && time < completeAt + 0.6; const flashT = justCompleted ? (time - completeAt) / 0.6 : 0; const flashOp = justCompleted ? (1 - flashT) * 0.9 : 0; const isDone = status === 'complete'; const accent = isDone ? THEME.green : THEME.cyan; return (
{/* Hex panel */}
{/* Edge */}
{/* Checkbox / hex slot — SVG for clean outline */}
{isDone && ( )}
{/* Label */}
{label}
{/* XP tag */}
+{xp} XP · {isDone ? (clearedText || 'CLEARED') : (pendingText || 'PENDING')}
{/* Right rank tag */}
{isDone ? '✓' : 'E'}
{/* Completion flash */} {flashOp > 0 && (
)}
); } // ─── XP Bar ───────────────────────────────────────────────────────────────── function XPBar({ x, y, width, fill, label = 'EXP', rank = 'E' }) { return (
{label} {Math.round(fill * 100)}%
{/* Tick marks */} {[0.25, 0.5, 0.75].map((p, i) => (
))}
); } // ─── Cursor ───────────────────────────────────────────────────────────────── function Cursor({ x, y, opacity = 1, tap = 0 }) { return (
{/* Cursor dot */}
{/* Tap rings */} {tap > 0 && ( <>
)}
); } Object.assign(window, { THEME, Bracket, CornerMarks, Scanline, ParticleField, PulseRing, PhoneShell, StatusBar, QuestRow, XPBar, Cursor, });