数字总监

Prompt

重现这个完全一致的全视口作品集落地页——实现像素级精确匹配。

═══════════════════════════════════════
技术 / 技术栈
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- 图标：lucide-react（`Play`、`Menu`、`X`）
- 单个全屏页面：`h-screen w-full overflow-hidden`
- 根元素：`relative h-screen w-full overflow-hidden bg-black text-white`

═══════════════════════════════════════
字体（精确）
═══════════════════════════════════════
在 <head> 中加载：

1) Inter（Google Fonts）——正文/默认字体：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

2) basis33（像素/位图等宽字体）——用于 `.font-pixel`：
<link href="https://db.onlinewebfonts.com/c/d08bafd725a4cfc309efb5a88e0b63a5?family=basis33" rel="stylesheet">

CSS：
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }

basis33（font-pixel）的使用位置：
- ADAM 下方的“ROBERTS”
- DESIGN & 下方的“ENGINEERING”
- 姓名下方的品牌简介
- 标签“What I Do”和“Services”
- 主视觉标题中的“UNEXPECTED”和“EXPERIENCES”（1.25em 大小）

Inter 的使用位置：
- 其他所有内容（导航、ADAM、DESIGN &、正文、showreel 按钮、奖项、页脚）

页面标题："Adam Roberts - Design & Engineering"

═══════════════════════════════════════
背景视频（精确 URL——不得替换）
═══════════════════════════════════════
全出血背景 <video>：
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260725_114042_d2ed2a89-f2fa-449b-9609-da456344257b.mp4"

属性：autoPlay muted loop playsInline
类：absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
（在大屏幕上，视频缩放至 120%，形成轻微的裁切/放大效果）

所有 UI 均位于视频上方的 z-10 层。不使用深色遮罩——白色文字直接覆盖在视频上。

═══════════════════════════════════════
LOGO（精确 SVG）
═══════════════════════════════════════
白色几何“GP / Grilled Pixels”标志，28×28，viewBox="0 0 256 256"：
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
  <path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
用于左上角导航栏以及移动端菜单标题栏内。

═══════════════════════════════════════
布局结构（从上到下）
═══════════════════════════════════════
外层内容容器（位于视频上方）：
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14

── 1. 导航栏 ──
flex items-center justify-between py-6

左侧：logo SVG
右侧桌面端（md+）：水平链接，gap-8，text-sm tracking-wide
  ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
  每项：href="#", hover:opacity-70 transition-opacity
右侧移动端（<md）：汉堡菜单按钮（Menu 图标 size 24），p-2 hover:opacity-70

── 2. 四列元信息网格 ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8

第 1 列（左侧）：
  h2 text-lg md:text-xl tracking-wide leading-tight
    第 1 行："ADAM"（font-normal Inter）
    第 2 行："ROBERTS"（font-pixel text-2xl md:text-3xl）
  然后：* 星号，使用 text-[10px] text-white/50 mt-3
  然后是品牌简介，font-pixel mt-1 text-xs text-white/60 leading-relaxed，严格按以下位置换行：
    Grilled Pixels is my
    personal brand - I came up
    with it in 2004 based on
    "cooking up ideas"

第 2 列（移动端两列布局中右对齐，lg 时左对齐）：
  h2 使用相同字号
    第 1 行："DESIGN &"（Inter font-normal）
    第 2 行："ENGINEERING"（font-pixel text-2xl md:text-3xl）

第 3 列：
  标签："What I Do"——text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
  正文：text-sm text-white/90 leading-relaxed max-w-[220px]
    "I create the top 1% of experiences for brands and digital products"

第 4 列（移动端两列布局中右对齐，lg 时左对齐）：
  标签："Services"——样式与 What I Do 标签相同
  ul text-sm text-white/90 leading-relaxed space-y-0.5：
    - Branding
    - Creative Direction & Strategy
    - UX/UI Design
    - Web Development (React/Nextjs)
    - 3D, WebGL / Photography
    - Video & Animation

── 3. 弹性间隔 ──
<div className="flex-1" />  ← 将底部区块推至视口底部

── 4. 底部区域（pb-4）──

A 行——grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end

左侧——主视觉标题：
  h1：text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
      tracking-wide uppercase font-normal
      内联样式：lineHeight: 0.72
  严格按以下位置换行：
    I BRING THE
    UNEXPECTED TO     ← “UNEXPECTED”使用 font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
    BRAND & DIGITAL
    EXPERIENCES       ← “EXPERIENCES”采用与 UNEXPECTED 相同的像素字体处理

右侧——列布局 flex flex-col gap-4 sm:gap-6 justify-end：
  A) PLAY SHOWREEL 按钮（self-start）：
     flex items-center gap-3
     border border-white/30 px-6 py-3
     backdrop-blur-sm bg-white/5
     hover:bg-white/10 transition-colors
     Play 图标：lucide Play size={14} fill="white"
     标签：text-sm tracking-wider "PLAY SHOWREEL"

  B) 奖项行（移动端 self-start，lg:self-end）：
     flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
     三个深色标签，每个均为：bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
       1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
       2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
       3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs

B 行——页脚条：
  mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
  左侧：text-xs text-white/60
    "Open to freelance, contract or full-time. "
    然后是链接 "Schedule a call"——text-red-500 hover:text-red-400 transition-colors href="#"
  右侧：text-xs text-white/60 sm:text-right
    "5 full cases • 82 archive fragments • 22 catalog items"
    （各部分之间使用 &bull; 或 •）

═══════════════════════════════════════
移动端全屏菜单
═══════════════════════════════════════
状态：menuOpen boolean

遮罩层：fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
过渡：transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  打开：opacity-100 pointer-events-auto
  关闭：opacity-0 pointer-events-none

标题栏：flex items-center justify-between px-6 py-6
  左侧：同一个 logo SVG
  右侧：X 按钮（size 24）用于关闭菜单——p-2 hover:opacity-70

导航：flex flex-col items-center justify-center flex-1 gap-8
  与桌面端相同的 6 个链接，text-2xl tracking-widest
  打开时交错入场：
    transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
    打开：opacity-100 translate-y-0
    关闭：opacity-0 translate-y-4
    打开时的 transitionDelay：`${100 + i * 60}ms`（i = 0..5）→ 100,160,220,280,340,400ms
    关闭时：delay 0ms
  点击链接后关闭菜单

═══════════════════════════════════════
动画 / 交互汇总
═══════════════════════════════════════
1. 背景视频：持续自动静音循环播放
2. 导航链接 hover：opacity → 70%
3. Showreel 按钮 hover：bg white/5 → white/10
4. Schedule a call hover：red-500 → red-400
5. 移动端菜单遮罩层：500ms cubic-bezier(0.16,1,0.3,1) 淡入淡出
6. 移动端菜单链接：交错淡入并向上滑动（每步 60ms，从 100ms 开始）
7. 汉堡菜单 / 关闭图标 hover：opacity 70%
8. 不允许滚动（overflow-hidden, h-screen）——单个锁定视口的构图
9. 桌面端内容不使用页面加载入场动画（绘制时保持静态）
10. 视频在 lg breakpoint 缩放至 1.2×

═══════════════════════════════════════
颜色令牌
═══════════════════════════════════════
- 页面背景：#000000（黑色）
- 主要文字：#ffffff
- 弱化文字：white/90、white/80、white/60、white/50
- 强调链接：Tailwind red-500（Schedule a call）
- 奖项标签：#0B0B0B
- Showreel 按钮：border white/30、fill white/5、blur
- 移动端遮罩层：black/95 + backdrop blur

═══════════════════════════════════════
响应式断点（Tailwind 默认值）
═══════════════════════════════════════
- < md：汉堡菜单 + 两列元信息网格；奖项/showreel 堆叠在标题下方
- md+：桌面端导航链接
- lg+：四列元信息网格；底部采用两列布局（标题 | showreel+奖项）；视频缩放 1.2
- sm/md/lg/xl：按上文所列逐级调整内边距和标题字号

═══════════════════════════════════════
禁止事项
═══════════════════════════════════════
- 不要添加卡片、紫色渐变、奶油色背景或额外区块
- 不要更改文案、奖项数量或换行位置
- 不要替换 CloudFront 视频 URL
- 像素字体词语不得使用 Inter——必须使用 basis33
- 不要添加滚动或第二个视口区块
```

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度: 82 / 100
成本: 中

重现这个完全一致的全视口作品集落地页——实现像素级精确匹配。 ═══════════════════════════════════════ 技术 / 技术栈 ═══════════════════════════════════════ - React + TypeScript + Tailwind CSS + Vite - 图标：lucide-react（`Play`、`Menu`、`X`） - 单个全屏页面：`h-screen w-full overflow-hidden` - 根元素：`relative h-screen w-full overflow-hidden bg-black text-white` ═══════════════════════════════════════ 字体（精确） ═══════════════════════════════════════ 在 <head> 中加载： 1) Inter（Google Fonts）——正文/默认字体： <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 2) basis33（像素/位图等宽字体）——用于 `.font-pixel`： <link href="https://db.onlinewebfonts.com/c/d08bafd725a4cfc309efb5a88e0b63a5?family=basis33" rel="stylesheet"> CSS： - body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .font-pixel { font-family: 'basis33', monospace; } basis33（font-pixel）的使用位置： - ADAM 下方的“ROBERTS” - DESIGN & 下方的“ENGINEERING” - 姓名下方的品牌简介 - 标签“What I Do”和“Services” - 主视觉标题中的“UNEXPECTED”和“EXPERIENCES”（1.25em 大小） Inter 的使用位置： - 其他所有内容（导航、ADAM、DESIGN &、正文、showreel 按钮、奖项、页脚）页面标题："Adam Roberts - Design & Engineering" ═══════════════════════════════════════ 背景视频（精确 URL——不得替换） ═══════════════════════════════════════ 全出血背景 <video>： src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260725_114042_d2ed2a89-f2fa-449b-9609-da456344257b.mp4" 属性：autoPlay muted loop playsInline 类：absolute inset-0 h-full w-full object-cover lg:scale-[1.2] （在大屏幕上，视频缩放至 120%，形成轻微的裁切/放大效果）所有 UI 均位于视频上方的 z-10 层。不使用深色遮罩——白色文字直接覆盖在视频上。 ═══════════════════════════════════════ LOGO（精确 SVG） ═══════════════════════════════════════ 白色几何“GP / Grilled Pixels”标志，28×28，viewBox="0 0 256 256"： <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none"> <path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" /> </svg> 用于左上角导航栏以及移动端菜单标题栏内。 ═══════════════════════════════════════ 布局结构（从上到下） ═══════════════════════════════════════ 外层内容容器（位于视频上方）： relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14 ── 1. 导航栏 ── flex items-center justify-between py-6 左侧：logo SVG 右侧桌面端（md+）：水平链接，gap-8，text-sm tracking-wide ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK 每项：href="#", hover:opacity-70 transition-opacity 右侧移动端（<md）：汉堡菜单按钮（Menu 图标 size 24），p-2 hover:opacity-70 ── 2. 四列元信息网格 ── mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 第 1 列（左侧）： h2 text-lg md:text-xl tracking-wide leading-tight 第 1 行："ADAM"（font-normal Inter）第 2 行："ROBERTS"（font-pixel text-2xl md:text-3xl）然后：* 星号，使用 text-[10px] text-white/50 mt-3 然后是品牌简介，font-pixel mt-1 text-xs text-white/60 leading-relaxed，严格按以下位置换行： Grilled Pixels is my personal brand - I came up with it in 2004 based on "cooking up ideas" 第 2 列（移动端两列布局中右对齐，lg 时左对齐）： h2 使用相同字号第 1 行："DESIGN &"（Inter font-normal）第 2 行："ENGINEERING"（font-pixel text-2xl md:text-3xl）第 3 列：标签："What I Do"——text-base tracking-widest text-white/50 uppercase mb-3 font-pixel 正文：text-sm text-white/90 leading-relaxed max-w-[220px] "I create the top 1% of experiences for brands and digital products" 第 4 列（移动端两列布局中右对齐，lg 时左对齐）：标签："Services"——样式与 What I Do 标签相同 ul text-sm text-white/90 leading-relaxed space-y-0.5： - Branding - Creative Direction & Strategy - UX/UI Design - Web Development (React/Nextjs) - 3D, WebGL / Photography - Video & Animation ── 3. 弹性间隔 ── <div className="flex-1" /> ← 将底部区块推至视口底部 ── 4. 底部区域（pb-4）── A 行——grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end 左侧——主视觉标题： h1：text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem] tracking-wide uppercase font-normal 内联样式：lineHeight: 0.72 严格按以下位置换行： I BRING THE UNEXPECTED TO ← “UNEXPECTED”使用 font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline BRAND & DIGITAL EXPERIENCES ← “EXPERIENCES”采用与 UNEXPECTED 相同的像素字体处理右侧——列布局 flex flex-col gap-4 sm:gap-6 justify-end： A) PLAY SHOWREEL 按钮（self-start）： flex items-center gap-3 border border-white/30 px-6 py-3 backdrop-blur-sm bg-white/5 hover:bg-white/10 transition-colors Play 图标：lucide Play size={14} fill="white" 标签：text-sm tracking-wider "PLAY SHOWREEL" B) 奖项行（移动端 self-start，lg:self-end）： flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80 三个深色标签，每个均为：bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2 1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs 2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs 3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs B 行——页脚条： mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4 左侧：text-xs text-white/60 "Open to freelance, contract or full-time. " 然后是链接 "Schedule a call"——text-red-500 hover:text-red-400 transition-colors href="#" 右侧：text-xs text-white/60 sm:text-right "5 full cases • 82 archive fragments • 22 catalog items" （各部分之间使用 • 或 •） ═══════════════════════════════════════ 移动端全屏菜单 ═══════════════════════════════════════ 状态：menuOpen boolean 遮罩层：fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col 过渡：transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] 打开：opacity-100 pointer-events-auto 关闭：opacity-0 pointer-events-none 标题栏：flex items-center justify-between px-6 py-6 左侧：同一个 logo SVG 右侧：X 按钮（size 24）用于关闭菜单——p-2 hover:opacity-70 导航：flex flex-col items-center justify-center flex-1 gap-8 与桌面端相同的 6 个链接，text-2xl tracking-widest 打开时交错入场： transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] 打开：opacity-100 translate-y-0 关闭：opacity-0 translate-y-4 打开时的 transitionDelay：`${100 + i * 60}ms`（i = 0..5）→ 100,160,220,280,340,400ms 关闭时：delay 0ms 点击链接后关闭菜单 ═══════════════════════════════════════ 动画 / 交互汇总 ═══════════════════════════════════════ 1. 背景视频：持续自动静音循环播放 2. 导航链接 hover：opacity → 70% 3. Showreel 按钮 hover：bg white/5 → white/10 4. Schedule a call hover：red-500 → red-400 5. 移动端菜单遮罩层：500ms cubic-bezier(0.16,1,0.3,1) 淡入淡出 6. 移动端菜单链接：交错淡入并向上滑动（每步 60ms，从 100ms 开始） 7. 汉堡菜单 / 关闭图标 hover：opacity 70% 8. 不允许滚动（overflow-hidden, h-screen）——单个锁定视口的构图 9. 桌面端内容不使用页面加载入场动画（绘制时保持静态） 10. 视频在 lg breakpoint 缩放至 1.2× ═══════════════════════════════════════ 颜色令牌 ═══════════════════════════════════════ - 页面背景：#000000（黑色） - 主要文字：#ffffff - 弱化文字：white/90、white/80、white/60、white/50 - 强调链接：Tailwind red-500（Schedule a call） - 奖项标签：#0B0B0B - Showreel 按钮：border white/30、fill white/5、blur - 移动端遮罩层：black/95 + backdrop blur ═══════════════════════════════════════ 响应式断点（Tailwind 默认值） ═══════════════════════════════════════ - < md：汉堡菜单 + 两列元信息网格；奖项/showreel 堆叠在标题下方 - md+：桌面端导航链接 - lg+：四列元信息网格；底部采用两列布局（标题 | showreel+奖项）；视频缩放 1.2 - sm/md/lg/xl：按上文所列逐级调整内边距和标题字号 ═══════════════════════════════════════ 禁止事项 ═══════════════════════════════════════ - 不要添加卡片、紫色渐变、奶油色背景或额外区块 - 不要更改文案、奖项数量或换行位置 - 不要替换 CloudFront 视频 URL - 像素字体词语不得使用 Inter——必须使用 basis33 - 不要添加滚动或第二个视口区块 ```

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

高密度 3D 浏览器森林生成器

数字总监

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

高密度 3D 浏览器森林生成器