现代设计机构

Prompt

为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包（npm: `shaders`），图标使用 `lucide-react`。页面包含 3 个版块。准确匹配每一处细节：

---

## SECTION 1：HERO（全视口高度）

**背景：** 浅灰色 `#EFEFEF`，叠加全屏动画 shader（positioned absolute, inset-0, z-10, pointer-events-none）。shader stack 使用 `shaders/react` 中的组件：
- `Swirl` - colorA: `#ffffff`, colorB: `#f0f0f0`, detail: 1.7
- `ChromaFlow` - baseColor: `#ffffff`, downColor/leftColor/rightColor/upColor: `#ff5f03`, momentum: 13, radius: 3.5
- `FlutedGlass` - aberration: 0.61, angle: 31, frequency: 8, highlight: 0.12, highlightSoftness: 0, lightAngle: -90, refraction: 4, shape: "rounded", softness: 1, speed: 0.15
- `FilmGrain` - strength: 0.05

**导航（z-20, relative）：** 一个白色胶囊形导航栏（`bg-white rounded-full`），padding 为 5px，位于 max-w-[1440px]、p-2 sm:p-3 的容器内。

- 左侧：深色圆形 logo（w-9 h-9 sm:w-10 sm:h-10, bg-gray-900, rounded-full），带白色文字 “AX”（10px/11px, font-bold, tracking-tight）。旁边是导航链接（移动端隐藏，md+ 显示）：“项目”、“工作室”、“期刊”、“联系”——14px, text-gray-900, hover:text-gray-500, transition-colors duration-300, gap-6。

- 右侧（移动端隐藏，md+ 显示）：
  - 文字 “正在承接 2026 年第一季度项目”（13px, text-gray-600, hidden below lg）
  - Clock 图标（lucide, size 14）+ London 实时时间 “{HH:MM} in London”（13px, text-gray-600）
  - CTA 按钮：bg-gray-900, text-white, 13px font-medium, rounded-full, pl-5 pr-2 py-2。文字 “预约策略通话” 带 HOVER TEXT ROLL 动画：文字在带 overflow-hidden h-[20px] 的 flex-col 容器中重复两次，group-hover 时垂直 translate -50%（duration-500, ease cubic-bezier(0.25,0.1,0.25,1)）。白色圆形内的 Arrow 图标（w-6 h-6）在 hover 时旋转 -45deg（使用相同 easing）。

- 移动端：一个 “菜单”/“关闭” 切换按钮（md:hidden），bg-gray-900, rounded-full，使用 lucide-react 的 Menu/X 图标。

**移动端菜单遮罩：** Fixed inset-0, z-50。Black/60 backdrop。一个白色 bottom sheet（rounded-2xl, mx-3 mb-3），向上滑入（translate-y-full to translate-y-0, duration-500, ease cubic-bezier(0.32,0.72,0,1)）。包含：时间 badge、导航链接（28px/32px font-medium）以及带箭头的 “启动项目” 按钮。

**Hero 内容（z-20）：** 使用 flexbox 定位在视口底部（上方使用 flex-1 spacer）。Max-w-[1440px], px-5 sm:px-8 lg:px-12, pb-14 sm:pb-16 lg:pb-20。

- 小标签：“Axion Studio”（13px/14px, text-gray-900, tracking-wide, mb-5 sm:mb-8）
- 标题 h1：“我们为准备在线上称霸所属品类的品牌 / 打造数字体验。”——移动端使用 clamp(1.75rem,7vw,4.2rem)，sm+ 使用 clamp(2.5rem,5vw,4.2rem)。font-medium, leading-[1.08], tracking-[-0.03em], text-gray-900。移动端隐藏换行（使用 `<br className="hidden sm:block" />`，并以 `<span className="sm:hidden"> </span>` 作为空格回退）。
- CTA 行（mt-8 sm:mt-12, flex-col sm:flex-row, gap-4 sm:gap-5）：
  - 橙色按钮：bg-[#F26522], hover:bg-[#e05a1a], text-white, 13px/14px, rounded-full, pl-5 sm:pl-6 pr-2 py-2。“启动项目” 使用相同的 text-roll hover 动画。白色圆形（w-7 h-7 sm:w-8 sm:h-8）内放置橙色 ArrowRight，hover 时旋转 -45deg。
  - 合作伙伴 badge：带细微阴影（0_2px_8px_rgba(0,0,0,0.08)）和 hover 阴影（0_4px_16px_rgba(0,0,0,0.12)）的白色胶囊，rounded-[4px]。包含一个 inline SVG 图标（下方的星芒/指南针形状，w-5 h-5 sm:w-6 sm:h-6, fill-current text-[#E8704E]）、文字 “认证合作伙伴”（13px/14px font-medium）以及深色 badge “精选”（10px/11px, bg-gray-900, text-white, px-1.5 sm:px-2 py-0.5, rounded）。

**合作伙伴 badge 的 SVG 图标：**
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"/></svg>
```

---

## SECTION 2：关于（白色背景）

`bg-white`, pt-16 sm:pt-20 lg:pt-32, pb-12 sm:pb-16 lg:pb-24, overflow-hidden。Max-w-[1440px] 容器。

**Badge 行：** px-5 sm:px-8 lg:px-12, flex items-center gap-3, mb-6 sm:mb-8。
- 编号圆形：w-6 h-6 sm:w-7 sm:h-7, rounded-full, bg-gray-900, text-white, 11px/12px font-semibold。显示 “1”。
- 胶囊标签：“Axion 简介”——12px/13px, font-medium, border border-gray-200, rounded-full, px-3 sm:px-4 py-1 sm:py-1.5。

**标题 h2：** “以策略为引领的创意，/ 在数字领域及更广范围内交付成果。”——clamp(1.5rem,4vw,3.2rem), font-medium, leading-[1.12], tracking-[-0.02em], text-gray-900, mb-12 sm:mb-16 lg:mb-28。

**内容区域（响应式）：**

- 移动端/平板端（lg:hidden）：纵向堆叠——段落 + 按钮，然后是图片。
  - 段落：“通过研究、创意思考和迭代，我们帮助成长型品牌充分释放其数字潜力。”——15px/17px, leading-[1.6], font-medium, text-gray-900。
  - 按钮：“了解我们的工作室”——橙色（#F26522），使用相同的 text-roll 动画，白色箭头圆形旋转 -45deg。
  - 两张图片：flex-col sm:flex-row, gap-4 sm:gap-5。第一张：sm:w-[45%] aspect-[438/346]。第二张：sm:w-[55%] aspect-[900/600]。两者均为 rounded-xl sm:rounded-2xl, object-cover。

- 桌面端（hidden lg:grid）：`grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8`。
  - 左列（self-end）：小图，aspect-[438/346], rounded-2xl。
  - 中列（self-start, flex justify-end）：段落（16px/18px, leading-[1.65], whitespace-nowrap，各行之间使用 `<br/>`）+ 橙色按钮。
  - 右列（self-end）：大图，aspect-[3/2], rounded-2xl。

**图片 URL：**
- 小图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85`
- 大图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85`

---

## SECTION 3：案例研究（浅灰色背景）

`bg-[#F5F5F5]`, pt-16 sm:pt-20 lg:pt-28, pb-16 sm:pb-20 lg:pb-28。Max-w-[1440px] 容器。

**Badge 行：** 与 Section 2 使用相同样式，但编号为 “2”，标签为 “精选客户作品”，border-gray-300。

**标题 h2：** “我们的项目”——使用与 hero 标题相同的 clamp 尺寸（clamp(1.75rem,7vw,4.2rem) / clamp(2.5rem,5vw,4.2rem)），font-medium, leading-[1.08], tracking-[-0.03em], mb-10 sm:mb-14 lg:mb-16。

**卡片网格：** `grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7`, px-5 sm:px-8 lg:px-12。

**卡片 1（Narrativ）：**
- 视频容器：aspect-[329/246], rounded-2xl, overflow-hidden, bg-[#1a1d2e], group, cursor-pointer。
- 视频：`src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover。
- Hover 按钮（absolute bottom-4 left-4）：白色圆形（h-9 w-9），group-hover 时扩展至 w-[148px]（transition-all duration-300 ease-in-out）。包含 “了解更多” 文字（13px, font-medium, opacity-0，hover 时变为 opacity-100，delay-100）以及 link/chain SVG 图标（14x14，hover 时从 -rotate-45 变为 rotate-0）。SVG 为手动绘制的 lucide “link” 图标，由两条弧线路径组成。
- 描述：“2025 年度 Site of the Month 获奖作品——一个推动参与度创下纪录的交互式 3D 展示”——13px/14px, text-gray-600, mt-4, leading-relaxed。
- 标题：“Narrativ”——14px/15px, font-semibold, text-gray-900, mt-1。

**卡片 2（Luminar）：**
- 视频容器：aspect-square, rounded-2xl, overflow-hidden, bg-[#6b6b6b], group, cursor-pointer。
- 视频：`src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover。
- Hover 按钮（absolute bottom-4 left-4）：深色圆形（bg-gray-900, h-9 w-9），group-hover 时扩展至 w-[168px]。包含 “查看案例研究” 文字（13px, font-medium, text-white）以及白色 ArrowRight 图标（size 14），hover 时从 -rotate-45 过渡至 rotate-0。
- 描述：“将过时的平台转变为以转化为核心的品牌体验”——13px/14px, text-gray-600, mt-4, leading-relaxed。
- 标题：“Luminar”——14px/15px, font-semibold, text-gray-900, mt-1。

---

## 全局样式（index.css）：

标准 Tailwind directives，另加两个 utility classes（当前布局中未实际使用，但已定义）：
- `.liquid-glass`：rgba(255,255,255,0.01) bg, backdrop-filter blur(4px), inset box-shadow，以及使用 mask-composite 的 pseudo-element gradient border。
- `.liquid-glass-strong`：相同，但 blur(50px)，无 pseudo-element。

---

## 技术细节：
- **框架：** React 18 + TypeScript + Vite
- **样式：** Tailwind CSS 3.4（default config，无 custom theme extensions）
- **包：** `shaders`（用于 `shaders/react` 中的 Shader、ChromaFlow、FilmGrain、FlutedGlass、Swirl），`lucide-react`（ArrowRight、Clock、Menu、X）
- **字体：** 系统默认字体（未加载自定义字体）
- **所有动画使用：** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`，另有注明的除外
- **最大内容宽度：** 1440px，使用 mx-auto 居中
- **响应式断点：** Tailwind 默认值（sm: 640px, md: 768px, lg: 1024px, xl: 1280px）
- **实时时钟：** 每秒更新，以 HH:MM 格式显示 London 时区

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

适用模型与稳定度

建议模型

待补充模型

稳定度: 92 / 100
成本: 中

为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包（npm: `shaders`），图标使用 `lucide-react`。页面包含 3 个版块。准确匹配每一处细节： --- ## SECTION 1：HERO（全视口高度） **背景：** 浅灰色 `#EFEFEF`，叠加全屏动画 shader（positioned absolute, inset-0, z-10, pointer-events-none）。shader stack 使用 `shaders/react` 中的组件： - `Swirl` - colorA: `#ffffff`, colorB: `#f0f0f0`, detail: 1.7 - `ChromaFlow` - baseColor: `#ffffff`, downColor/leftColor/rightColor/upColor: `#ff5f03`, momentum: 13, radius: 3.5 - `FlutedGlass` - aberration: 0.61, angle: 31, frequency: 8, highlight: 0.12, highlightSoftness: 0, lightAngle: -90, refraction: 4, shape: "rounded", softness: 1, speed: 0.15 - `FilmGrain` - strength: 0.05 **导航（z-20, relative）：** 一个白色胶囊形导航栏（`bg-white rounded-full`），padding 为 5px，位于 max-w-[1440px]、p-2 sm:p-3 的容器内。 - 左侧：深色圆形 logo（w-9 h-9 sm:w-10 sm:h-10, bg-gray-900, rounded-full），带白色文字 “AX”（10px/11px, font-bold, tracking-tight）。旁边是导航链接（移动端隐藏，md+ 显示）：“项目”、“工作室”、“期刊”、“联系”——14px, text-gray-900, hover:text-gray-500, transition-colors duration-300, gap-6。 - 右侧（移动端隐藏，md+ 显示）： - 文字 “正在承接 2026 年第一季度项目”（13px, text-gray-600, hidden below lg） - Clock 图标（lucide, size 14）+ London 实时时间 “{HH:MM} in London”（13px, text-gray-600） - CTA 按钮：bg-gray-900, text-white, 13px font-medium, rounded-full, pl-5 pr-2 py-2。文字 “预约策略通话” 带 HOVER TEXT ROLL 动画：文字在带 overflow-hidden h-[20px] 的 flex-col 容器中重复两次，group-hover 时垂直 translate -50%（duration-500, ease cubic-bezier(0.25,0.1,0.25,1)）。白色圆形内的 Arrow 图标（w-6 h-6）在 hover 时旋转 -45deg（使用相同 easing）。 - 移动端：一个 “菜单”/“关闭” 切换按钮（md:hidden），bg-gray-900, rounded-full，使用 lucide-react 的 Menu/X 图标。 **移动端菜单遮罩：** Fixed inset-0, z-50。Black/60 backdrop。一个白色 bottom sheet（rounded-2xl, mx-3 mb-3），向上滑入（translate-y-full to translate-y-0, duration-500, ease cubic-bezier(0.32,0.72,0,1)）。包含：时间 badge、导航链接（28px/32px font-medium）以及带箭头的 “启动项目” 按钮。 **Hero 内容（z-20）：** 使用 flexbox 定位在视口底部（上方使用 flex-1 spacer）。Max-w-[1440px], px-5 sm:px-8 lg:px-12, pb-14 sm:pb-16 lg:pb-20。 - 小标签：“Axion Studio”（13px/14px, text-gray-900, tracking-wide, mb-5 sm:mb-8） - 标题 h1：“我们为准备在线上称霸所属品类的品牌 / 打造数字体验。”——移动端使用 clamp(1.75rem,7vw,4.2rem)，sm+ 使用 clamp(2.5rem,5vw,4.2rem)。font-medium, leading-[1.08], tracking-[-0.03em], text-gray-900。移动端隐藏换行（使用 `<br className="hidden sm:block" />`，并以 `<span className="sm:hidden"> </span>` 作为空格回退）。 - CTA 行（mt-8 sm:mt-12, flex-col sm:flex-row, gap-4 sm:gap-5）： - 橙色按钮：bg-[#F26522], hover:bg-[#e05a1a], text-white, 13px/14px, rounded-full, pl-5 sm:pl-6 pr-2 py-2。“启动项目” 使用相同的 text-roll hover 动画。白色圆形（w-7 h-7 sm:w-8 sm:h-8）内放置橙色 ArrowRight，hover 时旋转 -45deg。 - 合作伙伴 badge：带细微阴影（0_2px_8px_rgba(0,0,0,0.08)）和 hover 阴影（0_4px_16px_rgba(0,0,0,0.12)）的白色胶囊，rounded-[4px]。包含一个 inline SVG 图标（下方的星芒/指南针形状，w-5 h-5 sm:w-6 sm:h-6, fill-current text-[#E8704E]）、文字 “认证合作伙伴”（13px/14px font-medium）以及深色 badge “精选”（10px/11px, bg-gray-900, text-white, px-1.5 sm:px-2 py-0.5, rounded）。 **合作伙伴 badge 的 SVG 图标：** ```svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"/></svg> ``` --- ## SECTION 2：关于（白色背景） `bg-white`, pt-16 sm:pt-20 lg:pt-32, pb-12 sm:pb-16 lg:pb-24, overflow-hidden。Max-w-[1440px] 容器。 **Badge 行：** px-5 sm:px-8 lg:px-12, flex items-center gap-3, mb-6 sm:mb-8。 - 编号圆形：w-6 h-6 sm:w-7 sm:h-7, rounded-full, bg-gray-900, text-white, 11px/12px font-semibold。显示 “1”。 - 胶囊标签：“Axion 简介”——12px/13px, font-medium, border border-gray-200, rounded-full, px-3 sm:px-4 py-1 sm:py-1.5。 **标题 h2：** “以策略为引领的创意，/ 在数字领域及更广范围内交付成果。”——clamp(1.5rem,4vw,3.2rem), font-medium, leading-[1.12], tracking-[-0.02em], text-gray-900, mb-12 sm:mb-16 lg:mb-28。 **内容区域（响应式）：** - 移动端/平板端（lg:hidden）：纵向堆叠——段落 + 按钮，然后是图片。 - 段落：“通过研究、创意思考和迭代，我们帮助成长型品牌充分释放其数字潜力。”——15px/17px, leading-[1.6], font-medium, text-gray-900。 - 按钮：“了解我们的工作室”——橙色（#F26522），使用相同的 text-roll 动画，白色箭头圆形旋转 -45deg。 - 两张图片：flex-col sm:flex-row, gap-4 sm:gap-5。第一张：sm:w-[45%] aspect-[438/346]。第二张：sm:w-[55%] aspect-[900/600]。两者均为 rounded-xl sm:rounded-2xl, object-cover。 - 桌面端（hidden lg:grid）：`grid-cols-[26%_1fr_48%] items-end gap-6 xl:gap-8`。 - 左列（self-end）：小图，aspect-[438/346], rounded-2xl。 - 中列（self-start, flex justify-end）：段落（16px/18px, leading-[1.65], whitespace-nowrap，各行之间使用 `<br/>`）+ 橙色按钮。 - 右列（self-end）：大图，aspect-[3/2], rounded-2xl。 **图片 URL：** - 小图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090123_74be96d4-9c1b-40cf-932a-96f4f4babed3.png&w=1280&q=85` - 大图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260516_090133_c157d30b-a99a-4477-bec1-a446149ec3f2.png&w=1280&q=85` --- ## SECTION 3：案例研究（浅灰色背景） `bg-[#F5F5F5]`, pt-16 sm:pt-20 lg:pt-28, pb-16 sm:pb-20 lg:pb-28。Max-w-[1440px] 容器。 **Badge 行：** 与 Section 2 使用相同样式，但编号为 “2”，标签为 “精选客户作品”，border-gray-300。 **标题 h2：** “我们的项目”——使用与 hero 标题相同的 clamp 尺寸（clamp(1.75rem,7vw,4.2rem) / clamp(2.5rem,5vw,4.2rem)），font-medium, leading-[1.08], tracking-[-0.03em], mb-10 sm:mb-14 lg:mb-16。 **卡片网格：** `grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6 lg:gap-7`, px-5 sm:px-8 lg:px-12。 **卡片 1（Narrativ）：** - 视频容器：aspect-[329/246], rounded-2xl, overflow-hidden, bg-[#1a1d2e], group, cursor-pointer。 - 视频：`src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_122702_390f5305-8719-41d5-ae80-d23ab3796c28.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover。 - Hover 按钮（absolute bottom-4 left-4）：白色圆形（h-9 w-9），group-hover 时扩展至 w-[148px]（transition-all duration-300 ease-in-out）。包含 “了解更多” 文字（13px, font-medium, opacity-0，hover 时变为 opacity-100，delay-100）以及 link/chain SVG 图标（14x14，hover 时从 -rotate-45 变为 rotate-0）。SVG 为手动绘制的 lucide “link” 图标，由两条弧线路径组成。 - 描述：“2025 年度 Site of the Month 获奖作品——一个推动参与度创下纪录的交互式 3D 展示”——13px/14px, text-gray-600, mt-4, leading-relaxed。 - 标题：“Narrativ”——14px/15px, font-semibold, text-gray-900, mt-1。 **卡片 2（Luminar）：** - 视频容器：aspect-square, rounded-2xl, overflow-hidden, bg-[#6b6b6b], group, cursor-pointer。 - 视频：`src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260516_123323_f909c2b8-ff6c-4edf-882b-8ebcdbe389b5.mp4"`, autoPlay, muted, loop, playsInline, w-full h-full object-cover。 - Hover 按钮（absolute bottom-4 left-4）：深色圆形（bg-gray-900, h-9 w-9），group-hover 时扩展至 w-[168px]。包含 “查看案例研究” 文字（13px, font-medium, text-white）以及白色 ArrowRight 图标（size 14），hover 时从 -rotate-45 过渡至 rotate-0。 - 描述：“将过时的平台转变为以转化为核心的品牌体验”——13px/14px, text-gray-600, mt-4, leading-relaxed。 - 标题：“Luminar”——14px/15px, font-semibold, text-gray-900, mt-1。 --- ## 全局样式（index.css）：标准 Tailwind directives，另加两个 utility classes（当前布局中未实际使用，但已定义）： - `.liquid-glass`：rgba(255,255,255,0.01) bg, backdrop-filter blur(4px), inset box-shadow，以及使用 mask-composite 的 pseudo-element gradient border。 - `.liquid-glass-strong`：相同，但 blur(50px)，无 pseudo-element。 --- ## 技术细节： - **框架：** React 18 + TypeScript + Vite - **样式：** Tailwind CSS 3.4（default config，无 custom theme extensions） - **包：** `shaders`（用于 `shaders/react` 中的 Shader、ChromaFlow、FilmGrain、FlutedGlass、Swirl），`lucide-react`（ArrowRight、Clock、Menu、X） - **字体：** 系统默认字体（未加载自定义字体） - **所有动画使用：** `duration-500 ease-[cubic-bezier(0.25,0.1,0.25,1)]`，另有注明的除外 - **最大内容宽度：** 1440px，使用 mx-auto 居中 - **响应式断点：** Tailwind 默认值（sm: 640px, md: 768px, lg: 1024px, xl: 1280px） - **实时时钟：** 每秒更新，以 HH:MM 格式显示 London 时区

现代设计机构

继续看相关 Case。

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

3D 动画图钉

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

现代设计机构

继续看相关 Case。

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

3D 动画图钉

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