Claude 自动生成单页动效站

一键获取所有令人惊艳的动效网站提示词：

提示词：

用 React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react 构建一个单页落地页。整个页面背景为 bg-black。通过 Google Fonts 加载的字体是 Instrument Serif（斜体和常规体）。在 index.css 中引入它：

@import url('');
液态玻璃 CSS（写在 index.css 的 @layer components 中）
创建一个可复用的 .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%
 );
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
}
版块 1 —— HERO（全视口，写在 Index.tsx 中）
全屏（min-h-screen）容器，overflow-hidden relative flex flex-col。

背景视频：绝对定位，铺满整个视口（absolute inset-0 w-full h-full object-cover object-bottom）。URL：

属性：muted、autoPlay、playsInline、preload="auto"。初始 opacity: 0。

视频淡入淡出逻辑（通过 ref 用原生 JS 实现，不使用 CSS transition）：

canplay 时：播放视频，然后用 requestAnimationFrame 在 500ms 内把 opacity 从 0 动画到 1。
timeupdate 时：当剩余时间 <= 0.55 秒，在 500ms 内把 opacity 从当前值动画到 0。
ended 时：把 opacity 设为 0，等待 100ms，把 currentTime 重置为 0，再次播放，在 500ms 内淡回 1。
这样就能在两次播放之间做出无缝循环，并带平滑的黑场交叉淡入淡出。
导航栏（relative z-20，px-6 py-6）：

一个液态玻璃圆角药丸，max-w-5xl mx-auto，px-6 py-3，左右两端对齐布局。
左侧：地球图标（24px，白色）加「Asme」文字（白色，font-semibold，text-lg）。移动端隐藏：导航链接「Features」「Pricing」「About」（text-white/80 hover:text-white text-sm font-medium，gap-8 ml-8）。
右侧：「Sign Up」文字按钮（白色，text-sm，font-medium）加「Login」按钮（液态玻璃 rounded-full px-6 py-2，白色 text-sm font-medium）。
Hero 内容（relative z-10，flex-1 flex flex-col items-center justify-center，px-6 py-12 text-center，-translate-y-[20%]）：

标题：text-7xl md:text-8xl lg:text-9xl，白色，tracking-tight whitespace-nowrap，字体 'Instrument Serif', serif。文字：Know it then <em>all</em>.
邮箱输入框：max-w-xl w-full。一个液态玻璃圆角药壳，pl-6 pr-2 py-2 flex items-center gap-3。内部：透明的 <input>，占位符「Enter your email」（text-white placeholder:text-white/40）。一个白色圆形提交按钮（bg-white rounded-full p-3 text-black），内含 ArrowRight 图标（20px）。
副标题：text-white text-sm leading-relaxed px-4。文字：「Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.」
Manifesto 按钮：液态玻璃 rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors。
社交图标页脚（relative z-10，flex justify-center gap-4 pb-12）：

三个液态玻璃圆角 p-4 按钮，分别对应 Instagram、Twitter、Globe 图标（20px）。text-white/80 hover:text-white hover:bg-white/5 transition-all。
版块 2 —— ABOUT 版块（独立组件 AboutSection.tsx）
使用 framer-motion 的 useInView（ref, { once: true, margin: "-100px" }）。
bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden。
细微的放射状渐变叠加层：bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]。
标签：「About Us」—— text-white/40 text-sm tracking-widest uppercase。动画：opacity: 0, y: 20 -> opacity: 1, y: 0，时长 0.6。
标题：text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight。动画：opacity: 0, y: 40 -> opacity: 1, y: 0，时长 0.8，延迟 0.1。文字结构：
Pioneering then ideas（Instrument Serif 斜体，text-white/60）for
换行（移动端隐藏）
minds that then create, build, and inspire.（全部为 Instrument Serif 斜体，text-white/60）
版块 3 —— 精选视频（独立组件 FeaturedVideoSection.tsx）
bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden。最大宽度 6xl。
一个 rounded-3xl overflow-hidden aspect-video 容器，动画为 opacity: 0, y: 60 -> opacity: 1, y: 0，时长 0.9。
视频：w-full h-full object-cover，muted、autoPlay、loop、playsInline、preload="auto"。URL：

视频上的渐变叠加层：bg-gradient-to-t from-black/60 via-transparent to-transparent。
底部叠加内容（absolute bottom-0 left-0 right-0 p-6 md:p-10）：
桌面端为横向排列，移动端为纵向排列。
左侧：一个液态玻璃 rounded-2xl p-6 md:p-8 max-w-md 卡片。标签「Our Approach」（text-white/50 text-xs tracking-widest uppercase mb-3）。正文（text-white text-sm md:text-base leading-relaxed）：「We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation.」
右侧：「Explore more」按钮（液态玻璃 rounded-full px-8 py-3，白色 text-sm font-medium），配 whileHover={{ scale: 1.05 }} 和 whileTap={{ scale: 0.95 }}。