加载中…
创作者 · MotionSites
查看原始来源 ↗复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
精确重现这个为“ECHOID”设计的全视口深色首屏落地页——它是 E network 的语音身份产品。精确匹配下方每个细节。不要虚构额外版块、卡片、统计数据或装饰性叠层。Desktop 构图：左侧/中央使用全出血电影感背景视频，右侧对齐注册面板；左侧保留黑色负空间；UI 固定在顶部（导航）、右侧（表单）和底部（法律声明）。
═══════════════════════════════════════
页面元信息
═══════════════════════════════════════
- 文档标题：ECHOID — 你在 E network 的语音 ID
- Lang: en
- 页面背景为纯黑色 (#000)
- 文本抗锯齿
- 仅含一个全视口版块（无其他页面版块）
═══════════════════════════════════════
精确媒体 URL（CloudFront — 原样使用）
═══════════════════════════════════════
背景视频 (MP4)：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_133255_956f653f-5d80-4b06-abd5-0f46c98b60fa.mp4
海报图 / 回退静态图 (PNG)：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_132328_5f9029c8-218f-4489-82b6-29ff2849920e.png
视频属性：autoPlay, muted, loop, playsInline, preload="auto"
视频 CSS：width/height 100%, object-fit: cover, object-position: center
媒体层：position absolute, inset 0, z-index -1，视频后方为黑色背景
预连接至：https://d8j0ntlcm91z4.cloudfront.net
视频内容（供参考）：深色电影感 AI/超现实人脸序列——抽象的金属/玻璃面部形态、冷暗色调、动态视觉身份氛围。全出血铺满边到边；绝不内嵌，绝不放进卡片。
═══════════════════════════════════════
字体（精确 Google Fonts）
═══════════════════════════════════════
从 Google Fonts 加载：
family=Sora:wght@200;300;400
family=JetBrains+Mono:wght@300;400;500
display=swap
预连接 fonts.googleapis.com 和 fonts.gstatic.com
CSS 字体栈：
--font-display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace
使用映射：
- Sora 200：导航 logo “ECHOID”、hero H1 “ECHOID”
- Sora 300：email input、法律页脚文本
- JetBrains Mono 400：导航链接、JOIN UP CTA、chip、buttons、引荐链接、mobile menu 链接/CTA
- JetBrains Mono 300：标语“YOUR VOICE ID TO THE E NETWORK.”
═══════════════════════════════════════
设计变量
═══════════════════════════════════════
--bg: #000000
--text: #ffffff
--text-dim: rgba(255,255,255,0.62)
--text-dimmer: rgba(255,255,255,0.42)
--line: rgba(255,255,255,0.14)
--line-strong: rgba(255,255,255,0.26)
--fill-ghost: rgba(255,255,255,0.05)
--fill-solid: rgba(255,255,255,0.10)
--gutter: clamp(20px, 5vw, 100px)
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1)
═══════════════════════════════════════
布局外壳
═══════════════════════════════════════
.hero:
- position relative, width 100%
- height: 100vh AND 100svh
- min-height: 640px（若 max-height ≤640px，min-height 改为 100svh）
- overflow hidden
- CSS grid: grid-template-rows: auto 1fr auto
- isolation: isolate
第 1 行 = navbar
第 2 行 = 右对齐表单主体（mobile 上居中）
第 3 行 = 法律页脚
═══════════════════════════════════════
遮罩（视频上的双渐变叠层）
═══════════════════════════════════════
Desktop (≥721px) — 两层叠加的 linear-gradients：
1) to right:
transparent 0% → transparent 45% → rgba(0,0,0,0.45) 72% → rgba(0,0,0,0.72) 100%
2) to bottom:
rgba(0,0,0,0.55) 0% → transparent 22% → transparent 78% → rgba(0,0,0,0.65) 100%
Mobile (≤720px) — 单层底部渐变：
rgba(0,0,0,0.6) 0% → rgba(0,0,0,0.25) 30% → rgba(0,0,0,0.75) 100%
═══════════════════════════════════════
NAVBAR（顶部）
═══════════════════════════════════════
Flex space-between, align center, gap 32px
Padding：clamp(20px, 2.4vw, 34px) horizontal gutter；遵守 safe-area insets
左侧 — Logo 链接“ECHOID”
- Sora 200
- font-size: clamp(20px, 1.75vw, 30px)
- letter-spacing: 0.16em
- 白色、无下划线、line-height 1
右侧 — 导航组（gap clamp(24px, 3.2vw, 62px)）：
A) Desktop 链接 (≥901px)：故事、平台、身份、联系
- JetBrains Mono 400
- font-size: clamp(11px, 0.78vw, 14px)
- letter-spacing: 0.18em
- text-transform: uppercase
- 白色；hover → --text-dim
- transition color 0.25s ease
- 链接间距：clamp(20px, 2.8vw, 56px)
- hrefs: #story #platforms #identity #contact
B) Desktop CTA“加入”（通过 uppercase 渲染为“加入”）
- 使用与链接相同的 mono 字体
- padding: clamp(12px,1vw,17px) clamp(20px,1.8vw,32px)
- border: 1px solid --line-strong
- hover: background --fill-ghost, border-color rgba(255,255,255,0.5)
- transition background+border 0.25s ease
- href #join
C) Mobile hamburger（仅 ≤900px；隐藏 desktop 链接和 CTA）
- 44×44 点击区域，3 条白色横线，每条宽 22px × 高 1px
- 横线位于 top 16/22/28px，通过 translateX(-50%) 居中
- Active（变形为 X）：bar1 rotate(45deg) 并移至 top 22px；bar2 opacity 0 + scaleX(0)；bar3 rotate(-45deg) 并移至 top 22px
- transition: transform 0.45s --ease-premium, opacity 0.25s ease
═══════════════════════════════════════
MOBILE MENU OVERLAY
═══════════════════════════════════════
Fixed fullscreen, z-index 50（nav 为 60）
背景：rgba(4,4,6,0.94)
backdrop-filter: blur(28px) saturate(140%)
关闭：clip-path circle(3% at calc(100% - 42px) 42px), opacity 0, pointer-events none
打开：clip-path circle(150% at same origin), opacity 1, pointer-events auto
Transition: clip-path 0.7s --ease-premium, opacity 0.45s ease
居中的大写 mono 链接列（故事/平台/身份/联系），后接带边框的“加入”
链接字号：clamp(20px, 5.5vw, 28px), letter-spacing 0.14em
CTA: letter-spacing 0.22em, padding 16px 40px, border 1px --line-strong
交错入场：每个项目初始 opacity 0 + translateY(16px)；打开时 → opacity 1 + translateY(0)
延迟：calc(180ms + var(--i) * 70ms)，链接的 i = 0..3，CTA 的 i=4
项目 Transition：opacity 0.4s ease, transform 0.5s --ease-premium
Escape 关闭；点击 backdrop 关闭；body.menu-open { overflow:hidden }；恢复焦点；在 ≥901px 时自动关闭
═══════════════════════════════════════
右侧面板（语音入口注册）
═══════════════════════════════════════
hero__body: flex align center, justify flex-end（≤720px 时居中）、horizontal gutter、min-height 0、overflow-y auto
.panel desktop：width min(34vw, 620px), min-width 380px, column flex-start
≤1100px：width min(70vw, 520px), min-width 0
≤720px：width 100%, stretch；chip 保持 flex-start
元素顺序：
1) CHIP：“[ 语音入口 ]”，显示为大写“[ 语音入口 ]”
- JetBrains Mono 400
- font-size: clamp(11px, 0.72vw, 14px)
- letter-spacing: 0.2em
- background: rgba(255,255,255,0.09)
- padding: clamp(9px,0.8vw,14px) clamp(14px,1.1vw,20px)
- line-height 1
- 不要圆角 pill——使用直角矩形
2) H1：“ECHOID”
- Sora 200
- font-size: clamp(54px, 6.2vw, 118px) [≤380px: clamp(44px,15vw,64px)]
- letter-spacing: 0.03em
- line-height: 0.95
- margin-top: clamp(28px, 3vw, 52px)
- 品牌优先：这是占主导地位的 hero 文字；不得有更大的元素
3) 标语：“你在 E network 的语音 ID。”
- JetBrains Mono 300，通过 CSS 转为 uppercase
- font-size: clamp(11px, 0.94vw, 17px)
- letter-spacing: 0.14em
- color: --text-dim
- margin-top: clamp(14px, 1.4vw, 24px)
- line-height 1.4
4) 表单（noValidate，阻止默认提交）：
margin-top: clamp(38px, 4.6vw, 82px)
column gap: clamp(14px, 1.3vw, 22px)
width 100%
a) Email 字段
- 视觉隐藏的 label“邮箱”
- 透明 input，无左右边框，仅有 1px --line-strong 底边框
- border-radius 0
- padding: 0 2px clamp(12px,1.1vw,18px)
- Sora 300, clamp(16px,0.95vw,18px)，白色文本
- placeholder“邮箱”颜色为 --text-dim
- focus：底边框 rgba(255,255,255,0.85)；placeholder → --text-dimmer
- transition border-color 0.25s ease
b) Button“使用邮箱继续”(.btn--ghost)
- 全宽、border-radius 0、无边框
- padding: clamp(17px,1.6vw,27px) 20px
- JetBrains Mono 400、uppercase、letter-spacing 0.22em
- font-size: clamp(11px,0.78vw,14px)
- background --fill-ghost, color --text-dimmer
- hover: bg rgba(255,255,255,0.09), color white
c) Button“访问”(.btn--solid)
- 字体/内边距同上
- background --fill-solid, color white
- hover: bg rgba(255,255,255,0.17)
5) 引荐链接（在表单下方居中）：“我有邀请码”
- JetBrains Mono 400，通过 CSS 转为 uppercase
- font-size: clamp(11px, 0.74vw, 14px)
- letter-spacing: 0.18em
- margin-top: clamp(26px, 2.6vw, 46px)
- align-self: center
- href #invite
- hover: --text-dim + underline, underline-offset 4px
═══════════════════════════════════════
法律页脚
═══════════════════════════════════════
border-top: 1px solid --line
padding: clamp(18px,1.7vw,30px) gutter；底部使用 safe-area
text-align center
精确文案：
“开设 e.xyz 账户即表示你接受我们的隐私声明和服务合同。”
- Sora 300, clamp(12px,0.82vw,16px), color --text-dim, line-height 1.5
- “隐私声明”和“服务合同”为白色带下划线链接（underline-offset 3px, thickness 1px），hrefs #privacy-notice 和 #service-contract
- link hover → --text-dim
═══════════════════════════════════════
焦点 / A11Y
═══════════════════════════════════════
Focus-visible outline：1px solid rgba(255,255,255,0.7)，buttons、CTA、toggle、引荐链接、input、mobile 链接的 offset 为 3px
Mobile menu：role=dialog, aria-modal, aria-label="站点菜单"，关闭时 aria-hidden，关闭时 inert
Toggle：aria-expanded, aria-controls="mobileMenu", aria-label 打开/关闭菜单
═══════════════════════════════════════
减少动态效果
═══════════════════════════════════════
prefers-reduced-motion: reduce → 隐藏视频；在 .hero__media 上将海报图显示为 cover background-image；将所有 animation/transition durations 压缩至 0.01ms
═══════════════════════════════════════
短高度压缩 (max-height: 640px)
═══════════════════════════════════════
收紧 nav padding；减小 H1（clamp(36px,7vw,64px)）；缩小表单边距/间距；减薄 buttons；缩小法律声明（11px）；收紧 mobile menu
═══════════════════════════════════════
动态效果摘要（哪些元素会动）
═══════════════════════════════════════
1. 背景视频连续循环（主要视觉存在）
2. links、CTAs、buttons、input border 使用 0.25s ease 的 hover 颜色/背景 transitions
3. Hamburger ↔ X 使用 0.45s premium ease 变形
4. Mobile menu 的圆形 clip-path 使用 0.7s premium ease 展开 + opacity 0.45s
5. Mobile menu 项目以 70ms 索引延迟交错淡入/向上滑入
Desktop panel 不要 entrance animation。视频上不要 floating badges。不要 cards、pills、glow、purple 或 multi-shadow chrome。仅使用直角矩形。美学：黑色 / 白色 / 半透明白色玻璃，在电影感人脸视频上叠加 terminal-mono UI。
═══════════════════════════════════════
技术栈 / 实现说明
═══════════════════════════════════════
React + plain CSS（或同等方案）。不要求 Tailwind utility look——使用上述 custom properties。Form action="#" method="post"，但使用 preventDefault。页面仅包含 hero。
```
---
**须原样保留的媒体 URL：**
- 视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_133255_956f653f-5d80-4b06-abd5-0f46c98b60fa.mp4`
- 海报图：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_132328_5f9029c8-218f-4489-82b6-29ff2849920e.png`
- 字体：**Sora** (200/300/400) + **JetBrains Mono** (300/400/500)适用模型与稳定度
建议模型
多人复现
继续探索
3D 创作者 Jack 的作品集落地页，React + TypeScript + Framer Motion，#0C0C0C 暗底。
提示语
使用 React、TypeScript、Tailwind CSS、Framer Motion 和 Lucide React，为「Jack」构建一个 3D 创作者作品集落地页。页面采用深色主题（背景为 #0C0C0C），字体使用 Kanit（Google Fonts，字重 300-900）。页面标题为「Jack -- 3D Creator」。 全局样式 html、body、#root 和主容器的背景：#0C0C0C 字体族：'Kanit', sans-serif 全局重置：b
提示语
为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局，包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React icons。不要使用其他 UI 库。 --- **字体** 在 `index.html` 中通过以下样式表加载“Helvetica Now Var”： ``` <link href="https://db.onlinewebf
ADHD 友好的日程应用 Drift 落地站，React + Vite + TypeScript + Tailwind，安静低刺激的视觉方向本身就是产品卖点。
提示语
为 "Drift" 构建一个单页落地网站——这是一款平静、对 ADHD 友好的规划应用。使用 React + Vite + TypeScript + Tailwind CSS + lucide-react 提供图标。不要使用其他 UI 库。 ### 字体 通过 Google Fonts 在 `index.css` 中导入： - **Inter**（字重 400、500、600）——用作基础正文字体 - **Instrument Serif**（仅斜体）——用于首屏标题中的
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。
