Digital Experiences

在云境TS 中打开并复制 →

内容预览

## Prompt Build a single-page React + Vite + TypeScript + Tailwind CSS site with exactly two full-screen sections (Hero and Capabilities). The page is a dark, cinematic web design agency landing page with "liquid glass" morphism UI elements and smooth blur/fade animations using Framer Motion. --- ### Fonts (Google Fonts) Load via `` in `index.html`: - **Instrument Serif** (italic) -- used for all headings (`font-heading`) - **Barlow** (weights 300, 400, 500, 600) -- used for body text (`font-body`) Tailwind config extends `fontFamily`: ```js heading: ["'Instrument Serif'", 'serif'], body: ["'Barlow'", 'sans-serif'], ``` Base CSS: `html, body { background: #000; color: #fff; font-family: 'Barlow', sans-serif; }` --- ### Liquid Glass CSS (in index.css) Two variants defined as plain CSS classes: **`.liquid-glass`** (subtle): - `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity` - `backdrop-filter: blur(4px)` / `-webkit-backdrop-filter: blur(4px)` - No border; `box-shadow: inset 0 1px 1px rgba(255,255,255,0.1)` - `position: relative; overflow: hidden` - `::before` pseudo-element creates a gradient stroke border: - `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%)` - Masked with `-webkit-mask: linear-gradient(#fff 0 0) content-box, li

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