加载中…
创作者 · MotionSites
查看原始来源 ↗Prompt
**逐像素复刻这个落地页。**
## 技术栈
React + Vite + TypeScript + Tailwind CSS。单页：先是 `<Hero />`，然后是 `<Marquee />`。不使用路由，不添加额外区域。Body：`font-family: 'Inter', sans-serif`、`background: #000`、`overflow-x: hidden`。`html { scroll-behavior: smooth }`。页面标题：`Beyond Hero`。
## 字体（确切 URL）
在 `<head>` 中加载：
1. **Bamboly Demo**（展示文字／标题／跑马灯）：
```html
<link href="https://db.onlinewebfonts.com/c/58ee300970307a1cc399e6bebd7617ce?family=Bamboly+Demo" rel="stylesheet">
```
如有需要，可使用直接文件：
- `https://db.onlinewebfonts.com/t/58ee300970307a1cc399e6bebd7617ce.woff2`
- `https://db.onlinewebfonts.com/t/58ee300970307a1cc399e6bebd7617ce.woff`
- `https://db.onlinewebfonts.com/t/58ee300970307a1cc399e6bebd7617ce.ttf`
`font-family: "Bamboly Demo", sans-serif` · 标题辅助类使用 letter-spacing `0.02em`。
2. **Inter + Poppins**（Google Fonts）：
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
```
- Inter = 仅用作 body 默认字体
- Poppins 字重 **500** = 两侧文字列
## 调色板
| 角色 | 十六进制值 |
|------|-----|
| 首屏背景 | `#EC612C` |
| BEYOND 前层 | `#FFFFFF` |
| BEYOND 层（绿色） | `#90EE90` |
| BEYOND 层（橙色间隙，与背景相同） | `#EC612C` |
| BEYOND 后层（蓝色） | `#89CFF0` |
| 两侧文字 | `white`，通过文字列设置 `opacity`（基础类 `text-white/80`） |
| 跑马灯背景 | `#FFFFFF` |
| 跑马灯文字 | `#EC612C` |
| Body 页面背景 | `#000000` |
## 素材——人物图像（代码中使用的确切 URL）
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260801_104316_80b428ea-dc99-4399-afb3-8ccb7b34b2d0.png&w=1280&q=85
```
代理背后的原始 PNG 源文件：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260801_104316_80b428ea-dc99-4399-afb3-8ccb7b34b2d0.png
```
主体：一位年轻黑人男性的 3D 半身像，电光蓝辫子配银色珠饰，明亮的蓝色眼睛向上看，身穿霓虹绿色罗纹高领衫，背景透明／带橙色抠图。居中，胸部以上入镜。
*（本地存在未使用的文件 `/public/images/{0B435C65-A382-4437-BCE3-E275271AEB12}.png` 和 `{A01C6A0D-C4E6-496C-BC3D-D942405C2DBB}.png`——不要使用它们；线上页面使用上面的 Higgs URL。）*
---
## 区域 1——首屏
### 结构与布局
- `<section>` 高度为 **`120vh`**，`backgroundColor: #EC612C`，使用 `relative w-full overflow-hidden`。
- 两层：
**A. 人物（z-index 10）**——绝对定位 `inset-0`，`pointer-events-none`：
- `<img>` 使用 `absolute bottom-0 left-1/2 -translate-x-1/2`
- `w-auto max-w-none block`
- 内联样式：`height: 115%`、`maxHeight: 115%`、`minHeight: 80%`
- 位于标题前方（遮挡“BEYOND”的中央部分）。
**B. Sticky 文字叠层（z-index 5）**——`sticky top-0 h-screen w-full`：
### “BEYOND”堆叠标题
- 顶部居中：`absolute inset-0 flex items-start justify-center pt-[2vh] md:pt-[3vh]`
- 四个绝对堆叠的 `<h1>` 层（前层除外，其 `position: relative`），文字均为 `BEYOND`，使用相同容器，并设置 `leading-[0.85] tracking-tight select-none`
- 字体：`"Bamboly Demo", sans-serif`
- 字号：`clamp(7.5rem, 30vw, 28rem)`
- 堆叠顺序（从后向前渲染），每层使用 `transform: translateY(offset)`：
| 层 | 颜色 | 桌面端偏移 | 移动端（`<768px`）偏移 |
|-------|-------|----------------|---------------------------|
| 0（后层） | `#89CFF0` | `36px` | `18px` |
| 1 | `#EC612C` | `24px` | `12px` |
| 2 | `#90EE90` | `12px` | `6px` |
| 3（前层） | `#FFFFFF` | `0` | `0` |
视觉效果：白色“BEYOND”文字下方依次露出绿色 → 橙色间隙 → 淡蓝色条纹，形成复古堆叠下沉效果。
### 两侧文字列
- 数组（源字符串为小写；CSS 使用 `uppercase`）：
- 左侧：`spark`、`imagine`、`evolve`、`render`
- 右侧：`blaze`、`genesis`、`purpose`、`ignite`
- 容器：`absolute inset-0 flex items-end justify-between px-[3vw] md:px-[6vw]`、`bottom: -8vh`、`pointer-events-none`
- 左侧文字列：`flex flex-col gap-1 md:gap-2`
- 右侧文字列：相同设置，再加 `items-end`，文字使用 `text-right`
- 每个单词：`"Poppins", sans-serif`、`fontWeight: 500`、`fontSize: clamp(1.6rem, 7vw, 9rem)`、`lineHeight: 1.1`、`text-white/80`、`select-none`、`transition: transform 0.05s linear`
### 滚动驱动动画（确切计算方式）
跟踪 120vh 区域内的滚动进度：
```
progress = clamp(0..1, -rect.top / (sectionHeight - window.innerHeight))
```
`scaleFactor = window.innerWidth < 768 ? 0.5 : 1`
**水平偏移**（progress 为 `0` = 开始；progress 为 `1` = 完全滚过 Sticky 范围）：
```
leftOffset[i] = -(60 + i * 40) * scaleFactor * (1 - progress)
rightOffset[i] = +(60 + i * 40) * scaleFactor * (1 - progress)
```
桌面端各索引的初始偏移：±60、±100、±140、±180 px。移动端减半。用户滚动时，文字向内滑动至 `0`。
**不透明度**（左右两列）：
```
opacity = 0.35 + progress * 0.65 // 0.35 → 1.0
```
监听器：`scroll`（passive）+ `resize`。在下方较高区域滚动时，Sticky 文字会在约 20vh 的滚动范围内保持固定。
---
## 区域 2——跑马灯
- 全宽白色条带：`w-full bg-white overflow-hidden py-6 md:py-8`
- 轨道类 `marquee-track`：`display flex`、`whitespace-nowrap`
- CSS 动画：
```css
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-track {
animation: marquee-scroll 18s linear infinite;
}
```
- 确切字符串（中间圆点 = `\u00B7` / `·`）：
```
SPARK · RENDER · IGNITE · UNFOLD · GENESIS · EVOLVE · PURPOSE · BEYOND ·
```
- 将该字符串并排渲染 **4 个完全相同的副本**（`shrink-0`），使 `-50%` 实现无缝循环。
- 样式：`"Bamboly Demo", sans-serif`、`uppercase`、`color: #EC612C`、`fontSize: clamp(2.5rem, 6vw, 5rem)`、`lineHeight: 1`、`paddingRight: 0.25em`、`select-none`
---
## 构图／z-order 摘要
1. 橙色 `#EC612C` 首屏平面（120vh）
2. Sticky 白色／彩色文字排印（z5）——BEYOND 位于顶部，文字列位于左下角／右下角
3. 人物图像（z10）居中、底部锚定、高度 115%——与标题重叠，并位于两侧文字列之间
4. 首屏下方为白色跑马灯条带，Bamboly 橙色品牌词汇无限水平滚动
## 响应式断点
- 移动端 `<768px`：滚动偏移减半，BEYOND 层偏移减半，内边距更紧凑（`px-[3vw]`、`pt-[2vh]`，跑马灯 py 更小）。
- 桌面端：使用完整偏移、`px-[6vw]`、`pt-[3vh]`。
## 禁止添加
不要添加导航栏、卡片、CTA、统计数据、紫色渐变，不要将 Inter 用于首屏展示文字，也不要使用未采用的本地 PNG。严格匹配字体、颜色、素材 URL、滚动计算方式以及跑马灯字符串／时间设置。适用模型与稳定度
建议模型
继续探索
@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」 使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品 使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中 使用 GSAP 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…
提示语
首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。 将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。 在浏览器中创建一个细节极其丰富的实时 {argument nam