Aetheris Voyage

在云境TS 中打开并复制 →

内容预览

Build Prompt: Cinematic Space-Travel Landing Page Build a single-page landing site with two full-height sections (Hero + Capabilities), both using looping background videos with custom JS crossfade, a shared liquid-glass design system, and Framer Motion entrance animations. Tech stack (pinned, CDN-only) window.Motion = window.FramerMotion; Body is bg: #000. Page is a React app mounted on #root, all components are files exporting via window.X = X. Fonts Google Fonts: family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600 Tailwind config adds: font-heading → 'Instrument Serif', serif (always italic in use) font-body → 'Barlow', sans-serif Default border radius override: DEFAULT: "9999px" (so bare rounded → pill). Liquid-glass utilities (exact CSS, in a block) Two variants — .liquid-glass (subtle, for nav/chips/cards) and .liquid-glass-strong (heavier blur, for primary CTA): .liquid-glass { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) 

……（完整源码请在站内查看）