VibeCodingStudio/deepsite-project-1r0w8
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Phantom Digital — Motion Studio</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link rel="preconnect" href="https://fonts.googleapis.com" />9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />11 <script src="https://unpkg.com/lucide@latest"></script>12 <style>13 :root {14 /* Colors */15 --color-midnight-ink: #05060f;16 --color-graphite-plate: #2f343e;17 --color-steel-border: #3f4959;18 --color-fog: #81899b;19 --color-pebble: #9da7ba;20 --color-moonlight: #c7d3ea;21 --color-ice: #d1e4fa;22 --color-glacier: #d8ecf8;23 --color-frost-link: #b6d9fc;24 --color-electric-iris: #663af3;25 --color-ember: #e46d4c;26 --color-azure: #027dea;27 --color-cipher-mint: #269684;28 --color-blueprint-glow: #bacff7;29 --gradient-blueprint-glow: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);30 31 /* Typography */32 --font-untitled-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;33 --font-aeonikpro: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;34 --font-dotdigital: 'JetBrains Mono', ui-monospace, monospace;35 36 /* Motion Tokens */37 --motion-duration-fast: 150ms;38 --motion-duration-normal: 300ms;39 --motion-duration-slow: 600ms;40 --motion-duration-cinematic: 1200ms;41 --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);42 --motion-easing-exit: cubic-bezier(0.22, 1, 0.36, 1);43 --motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);44 --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);45 46 /* Typography Scale */47 --text-caption: 12px;48 --leading-caption: 1.5;49 --tracking-caption: -0.01px;50 --text-body-sm: 14px;51 --leading-body-sm: 1.43;52 --tracking-body-sm: -0.01px;53 --text-body: 16px;54 --leading-body: 1.5;55 --tracking-body: -0.01px;56 --text-subheading: 18px;57 --leading-subheading: 1.33;58 --tracking-subheading: -0.01px;59 --text-heading-sm: 24px;60 --leading-heading-sm: 1.2;61 --tracking-heading-sm: -0.01px;62 --text-heading: 28px;63 --leading-heading: 1.17;64 --text-display: 48px;65 --leading-display: 1.14;66 67 /* Spacing */68 --spacing-4: 4px;69 --spacing-8: 8px;70 --spacing-16: 16px;71 --spacing-24: 24px;72 --spacing-120: 120px;73 74 /* Border Radius */75 --radius-sm: 2px;76 --radius-md: 6px;77 --radius-lg: 10px;78 --radius-2xl: 16px;79 --radius-full: 999px;80 81 /* Shadows */82 --shadow-sm: rgba(186, 207, 247, 0.32) 0 0 6px 0;83 --shadow-md: rgba(238, 186, 247, 0.24) 0 0 12px 0;84 --shadow-subtle: rgba(186, 215, 247, 0.12) 0 0 0 1px inset;85 }86 87 * { box-sizing: border-box; }88 html { scroll-behavior: smooth; }89 90 body {91 background-color: var(--color-midnight-ink);92 color: var(--color-moonlight);93 font-family: var(--font-untitled-sans);94 font-size: var(--text-body);95 line-height: var(--leading-body);96 letter-spacing: var(--tracking-body);97 -webkit-font-smoothing: antialiased;98 -moz-osx-font-smoothing: grayscale;99 overflow-x: hidden;100 }101 102 .blueprint-grid {103 background-image:104 linear-gradient(rgba(186, 207, 247, 0.04) 1px, transparent 1px),105 linear-gradient(90deg, rgba(186, 207, 247, 0.04) 1px, transparent 1px);106 background-size: 40px 40px;107 background-position: -1px -1px;108 }109 110 .font-display { font-family: var(--font-aeonikpro); }111 .font-mono { font-family: var(--font-dotdigital); }112 113 .text-caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); }114 .text-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-body-sm); }115 .text-subheading { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }116 .text-heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }117 .text-heading { font-size: var(--text-heading); line-height: var(--leading-heading); }118 .text-display { font-size: var(--text-display); line-height: var(--leading-display); }119 .text-label { font-family: var(--font-dotdigital); font-size: 15px; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; }120 121 .bg-ink { background-color: var(--color-midnight-ink); }122 .bg-graphite { background-color: var(--color-graphite-plate); }123 .bg-iris { background-color: var(--color-electric-iris); }124 .text-fog { color: var(--color-fog); }125 .text-pebble { color: var(--color-pebble); }126 .text-moonlight { color: var(--color-moonlight); }127 .text-ice { color: var(--color-ice); }128 .text-glacier { color: var(--color-glacier); }129 .text-frost { color: var(--color-frost-link); }130 .text-iris { color: var(--color-electric-iris); }131 .text-ember { color: var(--color-ember); }132 .text-azure { color: var(--color-azure); }133 .text-mint { color: var(--color-cipher-mint); }134 135 .border-steel { border-color: var(--color-steel-border); }136 .border-subtle { border-color: rgba(186, 215, 247, 0.12); }137 138 .surface-card {139 background-color: var(--color-graphite-plate);140 border-radius: var(--radius-2xl);141 box-shadow: var(--shadow-subtle);142 position: relative;143 }144 145 .surface-iris {146 background: linear-gradient(135deg, rgba(102, 58, 243, 0.15), rgba(102, 58, 243, 0.04));147 border: 1px solid rgba(102, 58, 243, 0.3);148 border-radius: var(--radius-2xl);149 }150 151 .btn {152 font-family: var(--font-untitled-sans);153 font-weight: 600;154 font-size: var(--text-body-sm);155 padding: 12px 20px;156 border-radius: var(--radius-sm);157 display: inline-flex;158 align-items: center;159 gap: 8px;160 transition: all var(--motion-duration-normal) var(--motion-easing-standard);161 cursor: pointer;162 border: 1px solid transparent;163 }164 .btn-primary { background-color: var(--color-electric-iris); color: var(--color-ice); box-shadow: var(--shadow-md); }165 .btn-primary:hover { background-color: #7a52ff; box-shadow: rgba(102, 58, 243, 0.4) 0 0 18px 0; transform: translateY(-1px); }166 .btn-secondary { background-color: transparent; color: var(--color-moonlight); border-color: var(--color-steel-border); }167 .btn-secondary:hover { border-color: var(--color-frost-link); color: var(--color-frost-link); box-shadow: var(--shadow-sm); }168 .btn-ghost { background-color: transparent; color: var(--color-fog); }169 .btn-ghost:hover { color: var(--color-moonlight); }170 171 .glow-sm { box-shadow: var(--shadow-sm); }172 .glow-md { box-shadow: var(--shadow-md); }173 .inset-hairline { box-shadow: var(--shadow-subtle); }174 .gradient-text { background: var(--gradient-blueprint-glow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }175 176 @keyframes pulse-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }177 .pulse-dot { animation: pulse-glow 2s ease-in-out infinite; }178 179 @keyframes scan-line { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }180 .scan-line {181 position: fixed; top: 0; left: 0; right: 0; height: 2px;182 background: linear-gradient(90deg, transparent, var(--color-blueprint-glow), transparent);183 animation: scan-line 8s linear infinite; pointer-events: none; z-index: 1; opacity: 0.3;184 }185 186 .nav-blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background-color: rgba(5, 6, 15, 0.7); border-bottom: 1px solid rgba(186, 215, 247, 0.08); }187 .section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(186, 215, 247, 0.15), transparent); }188 189 .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-duration-slow) var(--motion-easing-enter), transform var(--motion-duration-slow) var(--motion-easing-enter); }190 .reveal.visible { opacity: 1; transform: translateY(0); }191 192 ::-webkit-scrollbar { width: 8px; }193 ::-webkit-scrollbar-track { background: var(--color-midnight-ink); }194 ::-webkit-scrollbar-thumb { background: var(--color-graphite-plate); border-radius: 4px; }195 ::-webkit-scrollbar-thumb:hover { background: var(--color-steel-border); }196 197 .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background-color: var(--color-graphite-plate); border: 1px solid var(--color-steel-border); border-radius: var(--radius-md); padding: 12px 20px; color: var(--color-ice); font-size: var(--text-body-sm); z-index: 100; transition: transform var(--motion-duration-normal) var(--motion-easing-spring); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; }198 .toast.show { transform: translateX(-50%) translateY(0); }199 200 .mobile-menu { max-height: 0; overflow: hidden; transition: max-height var(--motion-duration-normal) var(--motion-easing-standard); }201 .mobile-menu.open { max-height: 400px; }202 203 /* --- MOTION COMPONENTS --- */204 205 /* Shimmer Skeleton */206 .skeleton {207 background: linear-gradient(90deg, rgba(47,52,62,0.4) 25%, rgba(47,52,62,0.8) 50%, rgba(47,52,62,0.4) 75%);208 background-size: 200% 100%;209 animation: shimmer 2s infinite linear;210 border-radius: var(--radius-md);211 }212 @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }213 214 /* Orbital Loader */215 .orbital {216 width: 40px; height: 40px; border-radius: 50%;217 border: 2px solid rgba(102, 58, 243, 0.2);218 border-top-color: var(--color-electric-iris);219 animation: spin 1s infinite linear;220 }221 @keyframes spin { to { transform: rotate(360deg); } }222 223 /* Hover Card Lift */224 .hover-card { transition: transform var(--motion-duration-normal) var(--motion-easing-spring), box-shadow var(--motion-duration-normal) var(--motion-easing-standard); }225 .hover-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }226 227 /* Ambient Beam */228 .ambient-beam {229 position: absolute; width: 200%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-electric-iris), transparent);230 animation: beam-scan 4s infinite linear; opacity: 0.5;231 }232 @keyframes beam-scan { 0% { transform: translateX(-50%) rotate(-5deg); } 100% { transform: translateX(0%) rotate(-5deg); } }233 234 /* AI Thinking Dots */235 .thinking-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-frost-link); display: inline-block; margin: 0 2px; }236 .thinking-dot:nth-child(1) { animation: think 1.4s infinite; }237 .thinking-dot:nth-child(2) { animation: think 1.4s infinite 0.2s; }238 .thinking-dot:nth-child(3) { animation: think 1.4s infinite 0.4s; }239 @keyframes think { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }240 241 /* Live Progress Bar */242 .progress-bar-fill {243 height: 100%; background: linear-gradient(90deg, var(--color-electric-iris), #a98cff);244 border-radius: var(--radius-full); transition: width var(--motion-duration-cinematic) var(--motion-easing-exit);245 }246 247 /* State Matrix Dot */248 .state-dot { transition: all var(--motion-duration-fast) var(--motion-easing-standard); }249 .state-dot:hover { transform: scale(1.5); }250 251 /* Timeline Editor UI */252 .timeline-block { transition: transform var(--motion-duration-fast) var(--motion-easing-spring); }253 .timeline-block:hover { transform: scaleY(1.2); }254 255 /* Reduced Motion */256 @media (prefers-reduced-motion: reduce) {257 *, *::before, *::after {258 animation-duration: 0.01ms !important;259 animation-iteration-count: 1 !important;260 transition-duration: 0.01ms !important;261 scroll-behavior: auto !important;262 }263 .scan-line, .pulse-dot, .skeleton, .orbital, .ambient-beam, .thinking-dot { animation: none !important; }264 }265 266 @media (max-width: 768px) {267 .text-display { font-size: 36px; }268 .text-heading { font-size: 24px; }269 }270 </style>271</head>272<body class="blueprint-grid">273 274 <div class="scan-line"></div>275 276 <!-- Navigation -->277 <nav class="nav-blur fixed top-0 left-0 right-0 z-50">278 <div class="max-w-[1200px] mx-auto px-6 py-4 flex items-center justify-between">279 <a href="index.html" class="flex items-center gap-3">280 <div class="w-9 h-9 rounded-[6px] bg-iris flex items-center justify-center glow-md">281 <i data-lucide="hexagon" class="w-5 h-5 text-ice"></i>282 </div>283 <span class="font-display font-bold text-glacier text-[18px] tracking-tight">Phantom</span>284 <span class="text-label text-fog hidden sm:inline">MOTION</span>285 </a>286 287 <div class="hidden md:flex items-center gap-8">288 <a href="index.html" class="text-body-sm text-pebble hover:text-frost transition-colors">Style Guide</a>289 <a href="#library" class="text-body-sm text-pebble hover:text-frost transition-colors">Library</a>290 <a href="#editor" class="text-body-sm text-pebble hover:text-frost transition-colors">Studio</a>291 <a href="#tokens" class="text-body-sm text-pebble hover:text-frost transition-colors">Tokens</a>292 <a href="#agent" class="text-body-sm text-pebble hover:text-frost transition-colors">AI Agent</a>293 <button class="btn btn-primary" onclick="showToast('Motion contract exported')">294 <i data-lucide="download" class="w-4 h-4"></i>295 Export296 </button>297 </div>298 299 <button id="menuToggle" class="md:hidden text-moonlight" aria-label="Menu">300 <i data-lucide="menu" class="w-6 h-6"></i>301 </button>302 </div>303 304 <div id="mobileMenu" class="mobile-menu md:hidden">305 <div class="px-6 pb-4 flex flex-col gap-4">306 <a href="index.html" class="text-body-sm text-pebble py-2">Style Guide</a>307 <a href="#library" class="text-body-sm text-pebble py-2">Library</a>308 <a href="#editor" class="text-body-sm text-pebble py-2">Studio</a>309 <a href="#tokens" class="text-body-sm text-pebble py-2">Tokens</a>310 <a href="#agent" class="text-body-sm text-pebble py-2">AI Agent</a>311 <button class="btn btn-primary w-full justify-center" onclick="showToast('Motion contract exported')">312 <i data-lucide="download" class="w-4 h-4"></i>313 Export314 </button>315 </div>316 </div>317 </nav>318 319 <!-- Hero Section -->320 <header id="top" class="relative pt-32 pb-20 px-6 overflow-hidden">321 <div class="max-w-[1200px] mx-auto relative z-10">322 <div class="flex items-center gap-3 mb-8 reveal">323 <span class="w-2 h-2 rounded-full bg-iris pulse-dot glow-md"></span>324 <span class="text-label text-fog">Phantom Motion · v1.0 · UDC-Studio</span>325 </div>326 327 <h1 class="font-display text-display text-glacier font-bold mb-6 reveal leading-[1.14]">328 Motion at rest.<br />329 <span class="gradient-text">Activated by intent.</span>330 </h1>331 332 <p class="text-body max-w-2xl text-pebble mb-10 reveal">333 A premium motion-component system that feels cinematic, fast, and restrained.334 Every animation communicates state, progress, hierarchy, or system activity.335 No decorative noise — only purposeful, tokenized, accessible motion.336 </p>337 338 <div class="flex flex-wrap items-center gap-4 mb-16 reveal">339 <button class="btn btn-primary" onclick="document.getElementById('library').scrollIntoView({behavior:'smooth'})">340 <i data-lucide="boxes" class="w-4 h-4"></i>341 Component Library342 </button>343 <button class="btn btn-secondary" onclick="document.getElementById('editor').scrollIntoView({behavior:'smooth'})">344 <i data-lucide="sliders-horizontal" class="w-4 h-4"></i>345 Open Studio346 </button>347 </div>348 349 <!-- Ambient Beam Effect -->350 <div class="relative h-24 reveal overflow-hidden">351 <div class="ambient-beam" style="top: 20%;"></div>352 <div class="ambient-beam" style="top: 50%; animation-delay: 1s;"></div>353 <div class="ambient-beam" style="top: 80%; animation-delay: 2s;"></div>354 </div>355 </div>356 </header>357 358 <div class="section-divider max-w-[1200px] mx-auto"></div>359 360 <!-- Motion Studio Editor UI Mockup -->361 <section id="editor" class="py-[120px] px-6">362 <div class="max-w-[1200px] mx-auto">363 <div class="mb-16 reveal">364 <div class="text-label text-iris mb-4">§ 02 — Motion Studio</div>365 <h2 class="font-display text-heading text-glacier font-bold mb-4">Studio Environment</h2>366 <p class="text-body text-pebble max-w-2xl">367 Design, preview, and export motion systems. Scrub timelines, toggle triggers,368 test states, and generate variants with AI.369 </p>370 </div>371 372 <div class="surface-card p-4 md:p-6 reveal overflow-hidden">373 <!-- Editor Top Bar -->374 <div class="flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-subtle border">375 <div class="flex items-center gap-4">376 <div class="flex gap-1.5">377 <div class="w-3 h-3 rounded-full bg-ember/80"></div>378 <div class="w-3 h-3 rounded-full bg-azure/80"></div>379 <div class="w-3 h-3 rounded-full bg-mint/80"></div>380 </div>381 <div class="text-label text-fog">motion://kpi-card/animator</div>382 </div>383 <div class="flex items-center gap-3">384 <span class="text-caption text-mint flex items-center gap-1.5">385 <i data-lucide="activity" class="w-3 h-3"></i> 60 FPS386 </span>387 <span class="text-caption text-fog">Budget: 16ms</span>388 <button class="btn btn-ghost py-1 px-2 text-caption"><i data-lucide="play" class="w-3 h-3"></i></button>389 </div>390 </div>391 392 <!-- Editor Grid -->393 <div class="grid grid-cols-12 gap-4 mt-4">394 395 <!-- Left Panel: Triggers & Tokens -->396 <div class="col-span-12 md:col-span-3 space-y-4">397 <div class="bg-ink rounded-[10px] p-4 border border-subtle border">398 <div class="text-label text-fog mb-3">Trigger Inspector</div>399 <div class="space-y-2">400 <div class="flex items-center justify-between p-2 rounded-md hover:bg-graphite/50 cursor-pointer">401 <span class="text-body-sm text-pebble flex items-center gap-2"><i data-lucide="mouse-pointer" class="w-3 h-3"></i> Hover</span>402 <span class="w-8 h-4 bg-iris rounded-full relative"><span class="absolute right-0.5 top-0.5 w-3 h-3 bg-ice rounded-full"></span></span>403 </div>404 <div class="flex items-center justify-between p-2 rounded-md hover:bg-graphite/50 cursor-pointer">405 <span class="text-body-sm text-pebble flex items-center gap-2"><i data-lucide="eye" class="w-3 h-3"></i> Viewport</span>406 <span class="w-8 h-4 bg-iris rounded-full relative"><span class="absolute right-0.5 top-0.5 w-3 h-3 bg-ice rounded-full"></span></span>407 </div>408 <div class="flex items-center justify-between p-2 rounded-md hover:bg-graphite/50 cursor-pointer">409 <span class="text-body-sm text-pebble flex items-center gap-2"><i data-lucide="crosshair" class="w-3 h-3"></i> Focus</span>410 <span class="w-8 h-4 bg-steel-border rounded-full relative"><span class="absolute left-0.5 top-0.5 w-3 h-3 bg-fog rounded-full"></span></span>411 </div>412 </div>413 </div>414 415 <div class="bg-ink rounded-[10px] p-4 border border-subtle border">416 <div class="text-label text-fog mb-3">Motion Tokens</div>417 <div class="space-y-3">418 <div>419 <div class="flex justify-between text-caption text-fog mb-1"><span>Duration</span><span class="font-mono text-frost">300ms</span></div>420 <div class="h-1 bg-graphite rounded-full"><div class="h-1 bg-iris rounded-full" style="width: 30%"></div></div>421 </div>422 <div>423 <div class="flex justify-between text-caption text-fog mb-1"><span>Easing</span><span class="font-mono text-frost">Spring</span></div>424 <div class="h-1 bg-graphite rounded-full"><div class="h-1 bg-iris rounded-full" style="width: 70%"></div></div>425 </div>426 <div>427 <div class="flex justify-between text-caption text-fog mb-1"><span>Distance</span><span class="font-mono text-frost">12px</span></div>428 <div class="h-1 bg-graphite rounded-full"><div class="h-1 bg-iris rounded-full" style="width: 40%"></div></div>429 </div>430 </div>431 </div>432 </div>433 434 <!-- Center: Live Preview Stage -->435 <div class="col-span-12 md:col-span-6 bg-ink rounded-[10px] p-4 border border-subtle border relative min-h-[300px] flex flex-col">436 <div class="text-label text-fog mb-4 flex justify-between">437 <span>Preview Stage</span>438 <span class="text-caption text-fog normal-case">Hover me</span>439 </div>440 <div class="flex-1 flex flex-col items-center justify-center gap-4">441 <!-- Interactive Hover Card -->442 <div class="hover-card surface-iris p-6 w-full max-w-sm cursor-pointer">443 <div class="flex items-center justify-between mb-4">444 <div class="text-label text-frost">SYSTEM STATUS</div>445 <span class="w-2 h-2 rounded-full bg-mint pulse-dot"></span>446 </div>447 <div class="font-display text-heading-sm text-glacier font-bold mb-2">All Systems Operational</div>448 <div class="text-body-sm text-pebble">Latency: 12ms · Uptime: 99.9%</div>449 <div class="mt-4 h-1 bg-graphite rounded-full overflow-hidden">450 <div class="progress-bar-fill" style="width: 92%"></div>451 </div>452 </div>453 </div>454 <div class="ambient-beam" style="bottom: 10%; opacity: 0.3;"></div>455 </div>456 457 <!-- Right Panel: Timeline & State Matrix -->458 <div class="col-span-12 md:col-span-3 space-y-4">459 <div class="bg-ink rounded-[10px] p-4 border border-subtle border">460 <div class="text-label text-fog mb-3">Timeline</div>461 <div class="space-y-2 relative">462 <div class="absolute left-[40px] top-0 bottom-0 w-px bg-steel-border"></div>463 <div class="flex items-center gap-2">464 <span class="text-caption text-fog w-8 text-right">0ms</span>465 <div class="timeline-block h-2 w-12 bg-iris rounded-sm"></div>466 </div>467 <div class="flex items-center gap-2">468 <span class="text-caption text-fog w-8 text-right">150</span>469 <div class="timeline-block h-2 w-16 bg-frost/50 rounded-sm"></div>470 </div>471 <div class="flex items-center gap-2">472 <span class="text-caption text-fog w-8 text-right">300</span>473 <div class="timeline-block h-2 w-20 bg-iris rounded-sm"></div>474 </div>475 <div class="flex items-center gap-2">476 <span class="text-caption text-fog w-8 text-right">600</span>477 <div class="timeline-block h-2 w-10 bg-azure/50 rounded-sm"></div>478 </div>479 </div>480 </div>481 482 <div class="bg-ink rounded-[10px] p-4 border border-subtle border">483 <div class="text-label text-fog mb-3">State Matrix</div>484 <div class="grid grid-cols-4 gap-2">485 <div class="state-dot w-full aspect-square rounded-sm bg-iris"></div>486 <div class="state-dot w-full aspect-square rounded-sm bg-graphite"></div>487 <div class="state-dot w-full aspect-square rounded-sm bg-mint"></div>488 <div class="state-dot w-full aspect-square rounded-sm bg-ember"></div>489 <div class="state-dot w-full aspect-square rounded-sm bg-graphite"></div>490 <div class="state-dot w-full aspect-square rounded-sm bg-iris"></div>491 <div class="state-dot w-full aspect-square rounded-sm bg-graphite"></div>492 <div class="state-dot w-full aspect-square rounded-sm bg-azure"></div>493 </div>494 </div>495 </div>496 497 </div>498 499 <!-- Bottom Bar: Export Adapters -->500 <div class="mt-4 pt-4 border-t border-subtle border flex flex-wrap items-center gap-2">501 <span class="text-caption text-fog mr-2">Export Targets:</span>502 <span class="pill text-caption py-1 px-2">Framer Motion</span>503 <span class="pill text-caption py-1 px-2">GSAP</span>504 <span class="pill text-caption py-1 px-2">CSS Keyframes</span>505 <span class="pill text-caption py-1 px-2">Lottie</span>506 <span class="pill text-caption py-1 px-2">Tailwind</span>507 <span class="pill text-caption py-1 px-2">WAAPI</span>508 </div>509 </div>510 </div>511 </section>512 513 <div class="section-divider max-w-[1200px] mx-auto"></div>514 515 <!-- Motion Component Library -->516 <section id="library" class="py-[120px] px-6">517 <div class="max-w-[1200px] mx-auto">518 <div class="mb-16 reveal">519 <div class="text-label text-iris mb-4">§ 03 — Component Library</div>520 <h2 class="font-display text-heading text-glacier font-bold mb-4">Phantom Motion Pack</h2>521 <p class="text-body text-pebble max-w-2xl">522 High-quality animated components. Scroll to trigger. Hover to interact.523 All components are contract-backed and respect reduced-motion preferences.524 </p>525 </div>526 527 <!-- Grid 1: Live Data & Progress -->528 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">529 530 <!-- KPI Card -->531 <div class="surface-card p-6 reveal hover-card">532 <div class="flex justify-between items-start mb-4">533 <div class="text-label text-fog">API REQUESTS</div>534 <i data-lucide="trending-up" class="w-4 h-4 text-mint"></i>535 </div>536 <div class="font-display text-heading text-glacier font-bold counter" data-target="84592">0</div>537 <div class="text-body-sm text-mint mt-2">+12.4% this week</div>538 <div class="mt-4">539 <svg viewBox="0 0 100 30" class="w-full h-10">540 <polyline class="sparkline" points="0,25 15,20 30,22 45,10 60,15 75,5 90,8 100,2" fill="none" stroke="var(--color-electric-iris)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />541 </svg>542 </div>543 </div>544 545 <!-- Pipeline Progress -->546 <div class="surface-card p-6 reveal">547 <div class="text-label text-fog mb-4">DEPLOYMENT PIPELINE</div>548 <div class="space-y-4">549 <div>550 <div class="flex justify-between text-caption text-pebble mb-1">551 <span>Build</span><span class="text-mint">100%</span>552 </div>553 <div class="h-2 bg-ink rounded-full overflow-hidden"><div class="progress-bar-fill" style="width: 100%"></div></div>554 </div>555 <div>556 <div class="flex justify-between text-caption text-pebble mb-1">557 <span>Test</span><span class="text-frost live-progress" data-target="78">0%</span>558 </div>559 <div class="h-2 bg-ink rounded-full overflow-hidden"><div class="progress-bar-fill live-bar" data-target="78" style="width: 0%"></div></div>560 </div>561 <div>562 <div class="flex justify-between text-caption text-pebble mb-1">563 <span>Deploy</span><span class="text-fog">Pending</span>564 </div>565 <div class="h-2 bg-ink rounded-full overflow-hidden"><div class="progress-bar-fill" style="width: 0%"></div></div>566 </div>567 </div>568 </div>569 570 <!-- Gauge Widget -->571 <div class="surface-card p-6 reveal flex flex-col items-center">572 <div class="text-label text-fog mb-4 self-start">CPU LOAD</div>573 <div class="relative w-32 h-32">574 <svg viewBox="0 0 100 100" class="w-full h-full -rotate-90">575 <circle cx="50" cy="50" r="40" stroke="var(--color-graphite-plate)" stroke-width="8" fill="none" />576 <circle class="gauge-arc" cx="50" cy="50" r="40" stroke="var(--color-electric-iris)" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="251.2" stroke-dashoffset="251.2" data-target="65" />577 </svg>578 <div class="absolute inset-0 flex flex-col items-center justify-center">579 <div class="font-display text-heading-sm text-glacier font-bold counter" data-target="65">0</div>580 <div class="text-caption text-fog">%</div>581 </div>582 </div>583 </div>584 </div>585 586 <!-- Grid 2: Activity & Status -->587 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">588 589 <!-- Task Queue -->590 <div class="surface-card p-6 reveal">591 <div class="text-label text-fog mb-4">AGENT TASK QUEUE</div>592 <div class="space-y-3">593 <div class="flex items-center gap-3 p-2 rounded-md bg-ink/50">594 <div class="orbital" style="width:16px; height:16px; border-width:1px;"></div>595 <span class="text-body-sm text-ice">Processing batch #402</span>596 </div>597 <div class="flex items-center gap-3 p-2 rounded-md bg-ink/50">598 <i data-lucide="check-circle" class="w-4 h-4 text-mint"></i>599 <span class="text-body-sm text-pebble">Validate schema</span>600 </div>601 <div class="flex items-center gap-3 p-2 rounded-md bg-ink/50">602 <div class="w-4 h-4 rounded-full border border-steel-border"></div>603 <span class="text-body-sm text-fog">Sync to vault</span>604 </div>605 </div>606 </div>607 608 <!-- Event Stream -->609 <div class="surface-card p-6 reveal">610 <div class="text-label text-fog mb-4">API EVENT STREAM</div>611 <div class="space-y-2 font-mono text-caption">612 <div class="flex gap-2"><span class="text-fog">12:04:01</span><span class="text-mint">POST</span><span class="text-pebble truncate">/v1/agents/run</span></div>613 <div class="flex gap-2"><span class="text-fog">12:04:03</span><span class="text-frost">GET</span><span class="text-pebble truncate">/v1/status</span></div>614 <div class="flex gap-2"><span class="text-fog">12:04:05</span><span class="text-ember">ERR</span><span class="text-pebble truncate">/v1/upload</span></div>615 <div class="flex gap-2"><span class="text-fog">12:04:06</span><span class="text-mint">POST</span><span class="text-pebble truncate">/v1/retry</span></div>616 <div class="flex gap-2"><span class="text-fog">12:04:08</span><span class="text-azure">WS</span><span class="text-pebble truncate">connection_open</span></div>617 </div>618 </div>619 620 <!-- Health Monitor -->621 <div class="surface-card p-6 reveal">622 <div class="text-label text-fog mb-4">SYSTEM HEALTH</div>623 <div class="grid grid-cols-3 gap-3">624 <div class="flex flex-col items-center p-2 rounded-md bg-ink/50">625 <div class="w-3 h-3 rounded-full bg-mint pulse-dot mb-2"></div>626 <span class="text-caption text-pebble">Core</span>627 </div>628 <div class="flex flex-col items-center p-2 rounded-md bg-ink/50">629 <div class="w-3 h-3 rounded-full bg-mint pulse-dot mb-2" style="animation-delay: 0.5s"></div>630 <span class="text-caption text-pebble">DB</span>631 </div>632 <div class="flex flex-col items-center p-2 rounded-md bg-ink/50">633 <div class="w-3 h-3 rounded-full bg-ember mb-2"></div>634 <span class="text-caption text-pebble">Queue</span>635 </div>636 </div>637 <div class="mt-4 text-body-sm text-pebble">Response Time</div>638 <div class="flex items-end gap-1 mt-2 h-12">639 <div class="w-2 bg-iris/40 rounded-t" style="height: 40%"></div>640 <div class="w-2 bg-iris/60 rounded-t" style="height: 60%"></div>641 <div class="w-2 bg-iris rounded-t" style="height: 80%"></div>642 <div class="w-2 bg-iris/60 rounded-t" style="height: 50%"></div>643 <div class="w-2 bg-iris/40 rounded-t" style="height: 30%"></div>644 <div class="w-2 bg-iris/80 rounded-t" style="height: 70%"></div>645 <div class="w-2 bg-iris rounded-t" style="height: 90%"></div>646 </div>647 </div>648 </div>649 650 <!-- Grid 3: Loaders & States -->651 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">652 653 <!-- Orbital Loaders -->654 <div class="surface-card p-6 reveal flex flex-col items-center justify-center min-h-[200px]">655 <div class="text-label text-fog mb-6 self-start">LOADING STATES</div>656 <div class="flex gap-8 items-center">657 <div class="orbital"></div>658 <div class="relative w-10 h-10">659 <div class="absolute inset-0 border-2 border-iris/20 rounded-full"></div>660 <div class="absolute inset-0 border-2 border-transparent border-t-frost rounded-full" style="animation: spin 1.5s infinite linear reverse;"></div>661 </div>662 <div class="flex items-center gap-1">663 <span class="thinking-dot"></span>664 <span class="thinking-dot"></span>665 <span class="thinking-dot"></span>666 </div>667 </div>668 </div>669 670 <!-- Skeletons -->671 <div class="surface-card p-6 reveal">672 <div class="text-label text-fog mb-4">SKELETON GRID</div>673 <div class="space-y-3">674 <div class="flex gap-4">675 <div class="skeleton w-12 h-12 rounded-full"></div>676 <div class="flex-1 space-y-2">677 <div class="skeleton h-4 w-3/4"></div>678 <div class="skeleton h-3 w-1/2"></div>679 </div>680 </div>681 <div class="skeleton h-24 w-full"></div>682 <div class="flex gap-2">683 <div class="skeleton h-8 w-20"></div>684 <div class="skeleton h-8 w-20"></div>685 </div>686 </div>687 </div>688 689 <!-- Notification Stack -->690 <div class="surface-card p-6 reveal">691 <div class="text-label text-fog mb-4">NOTIFICATION STACK</div>692 <div class="space-y-3">693 <div class="surface-iris p-3 flex items-center gap-3">694 <i data-lucide="check-circle" class="w-5 h-5 text-mint"></i>695 <div>696 <div class="text-body-sm text-ice font-medium">Deployment Successful</div>697 <div class="text-caption text-fog">prod-cluster · 2m ago</div>698 </div>699 </div>700 <div class="bg-graphite p-3 flex items-center gap-3 rounded-[10px] border border-subtle border">701 <i data-lucide="alert-triangle" class="w-5 h-5 text-ember"></i>702 <div>703 <div class="text-body-sm text-ice font-medium">High Memory Usage</div>704 <div class="text-caption text-fog">node-04 · 5m ago</div>705 </div>706 </div>707 </div>708 </div>709 710 </div>711 </div>712 </section>713 714 <div class="section-divider max-w-[1200px] mx-auto"></div>715 716 <!-- Motion Tokens & Contracts -->717 <section id="tokens" class="py-[120px] px-6">718 <div class="max-w-[1200px] mx-auto">719 <div class="mb-16 reveal">720 <div class="text-label text-iris mb-4">§ 04 — Contracts & Tokens</div>721 <h2 class="font-display text-heading text-glacier font-bold mb-4">Motion Architecture</h2>722 </div>723 724 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">725 <!-- Tokens Panel -->726 <div class="surface-card p-8 reveal">727 <div class="text-label text-fog mb-6">Motion Tokens</div>728 <div class="space-y-4">729 <div class="grid grid-cols-3 gap-4 pb-4 border-b border-subtle border">730 <div><div class="text-caption text-fog mb-1">Duration</div><div class="text-body-sm text-ice">300ms</div></div>731 <div><div class="text-caption text-fog mb-1">Easing</div><div class="text-body-sm text-ice">Spring</div></div>732 <div><div class="text-caption text-fog mb-1">Stagger</div><div class="text-body-sm text-ice">50ms</div></div>733 </div>734 <div class="grid grid-cols-3 gap-4 pb-4 border-b border-subtle border">735 <div><div class="text-caption text-fog mb-1">Opacity Ramp</div><div class="text-body-sm text-ice">0 → 1</div></div>736 <div><div class="text-caption text-fog mb-1">Blur Ramp</div><div class="text-body-sm text-ice">8px → 0</div></div>737 <div><div class="text-caption text-fog mb-1">Scale Range</div><div class="text-body-sm text-ice">0.95 → 1</div></div>738 </div>739 <div class="grid grid-cols-3 gap-4">740 <div><div class="text-caption text-fog mb-1">Spring K</div><div class="text-body-sm text-ice">340</div></div>741 <div><div class="text-caption text-fog mb-1">Damping</div><div class="text-body-sm text-ice">30</div></div>742 <div><div class="text-caption text-fog mb-1">Mass</div><div class="text-body-sm text-ice">1</div></div>743 </div>744 </div>745 </div>746 747 <!-- Contract JSON -->748 <div class="surface-card p-8 reveal">749 <div class="flex items-center justify-between mb-6">750 <div class="text-label text-fog">Motion Contract</div>751 <span class="badge badge-iris"><i data-lucide="file-code" class="w-3 h-3"></i> JSON</span>752 </div>753 <pre class="font-mono text-caption text-pebble leading-[1.6] overflow-x-auto"><code>{754 "ref": "motion://kpi-card/animator",755 "states": ["idle", "hover", "active"],756 "triggers": ["scroll", "hover"],757 "timeline": [758 { "step": 0, "opacity": 0, "y": 12 },759 { "step": 300, "opacity": 1, "y": 0 }760 ],761 "tokens": {762 "duration": "300ms",763 "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)"764 },765 "reduced_motion": "fade_only",766 "budget": "16ms",767 "adapters": ["framer", "gsap", "css"]768}</code></pre>769 </div>770 </div>771 </div>772 </section>773 774 <div class="section-divider max-w-[1200px] mx-auto"></div>775 776 <!-- AI Motion Agent -->777 <section id="agent" class="py-[120px] px-6">778 <div class="max-w-[1200px] mx-auto">779 <div class="mb-16 reveal">780 <div class="text-label text-iris mb-4">§ 05 — AI Agent</div>781 <h2 class="font-display text-heading text-glacier font-bold mb-4">AI Motion Generation</h2>782 </div>783 784 <div class="surface-card p-8 reveal">785 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">786 <!-- Chat UI -->787 <div class="flex flex-col gap-4">788 <div class="flex gap-3">789 <div class="w-8 h-8 rounded-full bg-iris flex items-center justify-center flex-shrink-0"><i data-lucide="bot" class="w-4 h-4 text-ice"></i></div>790 <div class="surface-iris p-4 rounded-[10px]">791 <p class="text-body-sm text-ice">I can generate motion components, create timeline variants, and add reduced-motion fallbacks. What do you need?</p>792 </div>793 </div>794 <div class="flex gap-3 flex-row-reverse">795 <div class="w-8 h-8 rounded-full bg-graphite flex items-center justify-center flex-shrink-0 border border-subtle"><i data-lucide="user" class="w-4 h-4 text-pebble"></i></div>796 <div class="bg-graphite p-4 rounded-[10px] border border-subtle border">797 <p class="text-body-sm text-moonlight">Add a cinematic page transition to the dashboard loader.</p>798 </div>799 </div>800 <div class="flex gap-3">801 <div class="w-8 h-8 rounded-full bg-iris flex items-center justify-center flex-shrink-0"><i data-lucide="bot" class="w-4 h-4 text-ice"></i></div>802 <div class="surface-iris p-4 rounded-[10px]">803 <p class="text-body-sm text-ice mb-2">Proposing motion patch:</p>804 <ul class="text-body-sm text-pebble space-y-1">805 <li>• Added <span class="text-frost">1200ms</span> fade-in</li>806 <li>• Added <span class="text-frost">8px</span> blur ramp</li>807 <li>• Added reduced-motion fallback</li>808 </ul>809 <button class="btn btn-primary mt-4 py-1.5 text-caption" onclick="showToast('Motion patch applied')">810 <i data-lucide="check" class="w-3 h-3"></i> Apply Patch811 </button>812 </div>813 </div>814 </div>815 816 <!-- Capabilities -->817 <div class="space-y-4">818 <div class="text-label text-fog">Agent Capabilities</div>819 <div class="space-y-3">820 <div class="flex items-start gap-3 p-3 rounded-[10px] bg-ink/50">821 <i data-lucide="wand-2" class="w-5 h-5 text-iris mt-0.5"></i>822 <div>823 <div class="text-body-sm text-ice font-medium">Generate Variants</div>824 <div class="text-caption text-fog">Create alternate timeline sequences</div>825 </div>826 </div>827 <div class="flex items-start gap-3 p-3 rounded-[10px] bg-ink/50">828 <i data-lucide="accessibility" class="w-5 h-5 text-iris mt-0.5"></i>829 <div>830 <div class="text-body-sm text-ice font-medium">Accessibility Audits</div>831 <div class="text-caption text-fog">Add reduced-motion fallbacks automatically</div>832 </div>833 </div>834 <div class="flex items-start gap-3 p-3 rounded-[10px] bg-ink/50">835 <i data-lucide="gauge" class="w-5 h-5 text-iris mt-0.5"></i>836 <div>837 <div class="text-body-sm text-ice font-medium">Reduce Excessive Motion</div>838 <div class="text-caption text-fog">Optimize for 16ms performance budget</div>839 </div>840 </div>841 <div class="flex items-start gap-3 p-3 rounded-[10px] bg-ink/50">842 <i data-lucide="repeat" class="w-5 h-5 text-iris mt-0.5"></i>843 <div>844 <div class="text-body-sm text-ice font-medium">Framework Adaptation</div>845 <div class="text-caption text-fog">Convert patterns for Framer, GSAP, WAAPI</div>846 </div>847 </div>848 </div>849 </div>850 </div>851 </div>852 </div>853 </section>854 855 <!-- Footer -->856 <footer class="py-16 px-6 border-t border-subtle border">857 <div class="max-w-[1200px] mx-auto">858 <div class="flex flex-col md:flex-row md:items-center justify-between gap-8">859 <div class="flex items-center gap-3">860 <div class="w-9 h-9 rounded-[6px] bg-iris flex items-center justify-center glow-md">861 <i data-lucide="hexagon" class="w-5 h-5 text-ice"></i>862 </div>863 <div>864 <div class="font-display font-bold text-glacier text-[18px]">Phantom Digital</div>865 <div class="text-caption text-fog">Motion Studio · v1.0 · UDC-Studio</div>866 </div>867 </div>868 <div class="flex flex-col md:items-end gap-2">869 <div class="text-caption text-fog">The Motion Moat: Capturing interaction design.</div>870 <a href="mailto:design@phantomdigital.com" class="text-body-sm text-frost hover:text-ice transition-colors flex items-center gap-2">871 <i data-lucide="mail" class="w-4 h-4"></i>872 design@phantomdigital.com873 </a>874 </div>875 </div>876 <div class="mt-8 pt-8 border-t border-subtle border flex flex-col md:flex-row justify-between gap-4">877 <div class="text-caption text-fog">© 2024 Phantom Digital. Motion at rest.</div>878 <div class="flex gap-6">879 <a href="index.html" class="text-caption text-fog hover:text-frost transition-colors">Style Guide</a>880 <a href="#library" class="text-caption text-fog hover:text-frost transition-colors">Library</a>881 <a href="#tokens" class="text-caption text-fog hover:text-frost transition-colors">Tokens</a>882 </div>883 </div>884 </div>885 </footer>886 887 <!-- Toast -->888 <div id="toast" class="toast">889 <i data-lucide="check-circle" class="w-4 h-4 text-mint"></i>890 <span id="toastMessage">Action completed</span>891 </div>892 893 <script src="motion.js"></script>894 <script>895 // Init icons896 lucide.createIcons();897 898 // Mobile menu899 const menuToggle = document.getElementById('menuToggle');900 const mobileMenu = document.getElementById('mobileMenu');901 menuToggle.addEventListener('click', () => {902 mobileMenu.classList.toggle('open');903 const isOpen = mobileMenu.classList.contains('open');904 menuToggle.innerHTML = isOpen ? '<i data-lucide="x" class="w-6 h-6"></i>' : '<i data-lucide="menu" class="w-6 h-6"></i>';905 lucide.createIcons();906 });907 mobileMenu.querySelectorAll('a').forEach(link => {908 link.addEventListener('click', () => {909 mobileMenu.classList.remove('open');910 menuToggle.innerHTML = '<i data-lucide="menu" class="w-6 h-6"></i>';911 lucide.createIcons();912 });913 });914 915 // Toast916 let toastTimeout;917 function showToast(message) {918 const toast = document.getElementById('toast');919 const toastMsg = document.getElementById('toastMessage');920 toastMsg.textContent = message;921 toast.classList.add('show');922 clearTimeout(toastTimeout);923 toastTimeout = setTimeout(() => toast.classList.remove('show'), 3000);924 }925 926 // Reveal observer927 const revealObserver = new IntersectionObserver((entries) => {928 entries.forEach((entry, index) => {929 if (entry.isIntersecting) {930 setTimeout(() => entry.target.classList.add('visible'), index * 50);931 revealObserver.unobserve(entry.target);932 933 // Trigger motion components934 if (entry.target.querySelector('.counter')) {935 entry.target.querySelectorAll('.counter').forEach(animateCounter);936 }937 if (entry.target.querySelector('.live-bar')) {938 entry.target.querySelectorAll('.live-bar').forEach(animateBar);939 }940 if (entry.target.querySelector('.gauge-arc')) {941 entry.target.querySelectorAll('.gauge-arc').forEach(animateGauge);942 }943 if (entry.target.querySelector('.sparkline')) {944 entry.target.querySelectorAll('.sparkline').forEach(animateSparkline);945 }946 }947 });948 }, { threshold: 0.1 });949 document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));950 951 function animateCounter(el) {952 const target = parseInt(el.dataset.target);953 const duration = 1500;954 const start = performance.now();955 function update(now) {956 const progress = Math.min((now - start) / duration, 1);957 const eased = 1 - Math.pow(1 - progress, 3);958 el.textContent = Math.floor(eased * target).toLocaleString();959 if (progress < 1) requestAnimationFrame(update);960 }961 requestAnimationFrame(update);962 }963 964 function animateBar(el) {965 const target = el.dataset.target;966 setTimeout(() => {967 el.style.width = target + '%';968 const label = el.parentElement.previousElementSibling.querySelector('.live-progress');969 if (label) {970 let current = 0;971 const interval = setInterval(() => {972 current += 2;973 if (current >= target) { current = target; clearInterval(interval); }974 label.textContent = current + '%';975 }, 30);976 }977 }, 300);978 }979 980 function animateGauge(el) {981 const target = parseInt(el.dataset.target);982 const circumference = 251.2;983 const offset = circumference - (circumference * target / 100);984 setTimeout(() => {985 el.style.transition = 'stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1)';986 el.style.strokeDashoffset = offset;987 }, 300);988 }989 990 function animateSparkline(el) {991 const length = el.getTotalLength();992 el.style.strokeDasharray = length;993 el.style.strokeDashoffset = length;994 setTimeout(() => {995 el.style.transition = 'stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1)';996 el.style.strokeDashoffset = 0;997 }, 300);998 }999 </script>1000</body>1001</html>