Mindloop Landing

在云境TS 中打开并复制 →

内容预览

Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words). The entire theme is pure black (#000) background with white foreground — no colors or gradients beyond monochrome. Install hls.js and framer-motion. Design System (index.css) All CSS variables in HSL (no hsl() wrapper in the variable, just the values): --background: 0 0% 0% --foreground: 0 0% 100% --card: 0 0% 5% --card-foreground: 0 0% 100% --primary: 0 0% 100% --primary-foreground: 0 0% 0% --secondary: 0 0% 12% --secondary-foreground: 0 0% 85% --muted: 0 0% 15% --muted-foreground: 0 0% 65% --accent: 170 15% 45% --accent-foreground: 0 0% 100% --border: 0 0% 20% --input: 0 0% 18% --ring: 0 0% 40% --hero-subtitle: 210 17% 95% Liquid Glass Effect (global CSS class .liquid-glass) .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%); -webki

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