AI 编程(UI)MotionSites证据 L1#source-motionsites #prompt-public #not-rerun #license-review

Sparkform

Prompt

**Recreate this exact landing page pixel-for-pixel.**

## Tech stack
React + Vite + TypeScript + Tailwind CSS. Single page: `<Hero />` then `<Marquee />`. No router, no extra sections. Body: `font-family: 'Inter', sans-serif`, `background: #000`, `overflow-x: hidden`. `html { scroll-behavior: smooth }`. Page title: `Beyond Hero`.

## Fonts (exact URLs)
Load in `<head>`:

1. **Bamboly Demo** (display / title / marquee):
```html
<link href="https://db.onlinewebfonts.com/c/58ee300970307a1cc399e6bebd7617ce?family=Bamboly+Demo" rel="stylesheet">
```
Direct files if needed:
- `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` on the heading helper class.

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 default only  
- Poppins weight **500** = side word columns  

## Color palette
| Role | Hex |
|------|-----|
| Hero background | `#EC612C` |
| BEYOND front layer | `#FFFFFF` |
| BEYOND layer (green) | `#90EE90` |
| BEYOND layer (orange gap, same as bg) | `#EC612C` |
| BEYOND back layer (blue) | `#89CFF0` |
| Side words | `white` at `opacity` via column (base class `text-white/80`) |
| Marquee background | `#FFFFFF` |
| Marquee text | `#EC612C` |
| Body page bg | `#000000` |

## Asset — character image (exact URL used in code)
```
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
```
Original PNG source behind the proxy:
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260801_104316_80b428ea-dc99-4399-afb3-8ccb7b34b2d0.png
```
Subject: 3D bust of a young Black man, electric-blue braids with silver beads, bright blue eyes looking upward, neon-green ribbed turtleneck, transparent/orange-cutout background. Centered, chest-up.  
*(Local unused files exist at `/public/images/{0B435C65-A382-4437-BCE3-E275271AEB12}.png` and `{A01C6A0D-C4E6-496C-BC3D-D942405C2DBB}.png` — do not use them; the live page uses the Higgs URL above.)*

---

## SECTION 1 — Hero

### Structure & layout
- `<section>` height **`120vh`**, `backgroundColor: #EC612C`, `relative w-full overflow-hidden`.
- Two layers:

**A. Character (z-index 10)** — absolute `inset-0`, `pointer-events-none`:
- `<img>` `absolute bottom-0 left-1/2 -translate-x-1/2`
- `w-auto max-w-none block`
- inline style: `height: 115%`, `maxHeight: 115%`, `minHeight: 80%`
- Sits in front of the title (covers center of “BEYOND”).

**B. Sticky text overlay (z-index 5)** — `sticky top-0 h-screen w-full`:

### “BEYOND” stacked title
- Top-centered: `absolute inset-0 flex items-start justify-center pt-[2vh] md:pt-[3vh]`
- Four absolutely stacked `<h1>` layers (except front layer `position: relative`), all text `BEYOND`, same box, `leading-[0.85] tracking-tight select-none`
- Font: `"Bamboly Demo", sans-serif`
- Size: `clamp(7.5rem, 30vw, 28rem)`
- Stack order (render back→front), each with `transform: translateY(offset)`:

| Layer | Color | Desktop offset | Mobile (`<768px`) offset |
|-------|-------|----------------|---------------------------|
| 0 (back) | `#89CFF0` | `36px` | `18px` |
| 1 | `#EC612C` | `24px` | `12px` |
| 2 | `#90EE90` | `12px` | `6px` |
| 3 (front) | `#FFFFFF` | `0` | `0` |

Visual effect: white “BEYOND” with green → orange-gap → baby-blue stripes peeking downward under the letters (retro stacked drop).

### Side word columns
- Arrays (source lowercase; CSS `uppercase`):
  - Left: `spark`, `imagine`, `evolve`, `render`
  - Right: `blaze`, `genesis`, `purpose`, `ignite`
- Container: `absolute inset-0 flex items-end justify-between px-[3vw] md:px-[6vw]`, `bottom: -8vh`, `pointer-events-none`
- Left column: `flex flex-col gap-1 md:gap-2`
- Right column: same + `items-end`, words `text-right`
- Each word: `"Poppins", sans-serif`, `fontWeight: 500`, `fontSize: clamp(1.6rem, 7vw, 9rem)`, `lineHeight: 1.1`, `text-white/80`, `select-none`, `transition: transform 0.05s linear`

### Scroll-driven animation (exact math)
Track scroll progress on the 120vh section:
```
progress = clamp(0..1, -rect.top / (sectionHeight - window.innerHeight))
```
`scaleFactor = window.innerWidth < 768 ? 0.5 : 1`

**Horizontal offsets** (at progress `0` = start; progress `1` = fully scrolled through sticky range):
```
leftOffset[i]  = -(60 + i * 40) * scaleFactor * (1 - progress)
rightOffset[i] = +(60 + i * 40) * scaleFactor * (1 - progress)
```
Desktop start offsets by index: ±60, ±100, ±140, ±180 px. Mobile half of that. As user scrolls, words slide inward to `0`.

**Opacity** (both columns):
```
opacity = 0.35 + progress * 0.65   // 0.35 → 1.0
```
Listeners: `scroll` (passive) + `resize`. Sticky text stays pinned for the ~20vh scroll range while the tall section scrolls underneath.

---

## SECTION 2 — Marquee

- Full-width white band: `w-full bg-white overflow-hidden py-6 md:py-8`
- Track class `marquee-track`: `display flex`, `whitespace-nowrap`
- CSS animation:
```css
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 18s linear infinite;
}
```
- Exact string (middle dots = `\u00B7` / `·`):
```
SPARK · RENDER · IGNITE · UNFOLD · GENESIS · EVOLVE · PURPOSE · BEYOND · 
```
- Render **4 identical copies** of that string side-by-side (`shrink-0`) so `-50%` loops seamlessly.
- Style: `"Bamboly Demo", sans-serif`, `uppercase`, `color: #EC612C`, `fontSize: clamp(2.5rem, 6vw, 5rem)`, `lineHeight: 1`, `paddingRight: 0.25em`, `select-none`

---

## Composition / z-order summary
1. Orange `#EC612C` hero plane (120vh)  
2. Sticky white/colored typography (z5) — BEYOND top, word columns bottom-left/right  
3. Character image (z10) centered, bottom-anchored, height 115% — overlaps title and sits between the word columns  
4. White marquee strip below hero, infinite horizontal scroll of brand words in Bamboly orange  

## Responsive breakpoints
- Mobile `<768px`: half scroll offsets, half BEYOND layer offsets, tighter padding (`px-[3vw]`, `pt-[2vh]`, smaller marquee py).
- Desktop: full offsets, `px-[6vw]`, `pt-[3vh]`.

## Do not add
No nav, cards, CTAs, stats, purple gradients, Inter for the hero display, or the unused local PNGs. Match fonts, colors, asset URL, scroll math, and marquee string/timing exactly as above.

复用方法

关键决定

观察最终结果里，页面信息层级、模块顺序和 CTA 是否一口气讲清楚是否同时成立。

换到你的题材

把“目标结果 → 产品名称、目标用户、页面模块和主按钮 → 约束条件”抽成模板，后续可复用到同类任务。

容易翻车

围绕模块顺序、价值主张写法与 CTA 位置做单变量对照，并记录模型、成本和失败结果；重复成立后再沉淀为 Skill。

建议模型

待补充模型

稳定度
成本: 中

Derived Skill

这个 Case 可以学走的方法。

Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。

通用 Skill落地页信息结构查看证据 →

创作者

MotionSites

MotionSites 长期扎根MotionSites，交付可运行的界面，《Modern Agency》配了完整实现思路。

值得学习AI 编程(UI)

查看创作者 →

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →

AI 编程(UI)X@Oluwaphilemon1 →

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

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度

稳定度

查看 Case →

AI 编程(UI)Aceternity UIAceternity UI →

3D Animated Pin

// 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, }: { children: React.ReactNode; title?: string; href?: string; className?: string; containerClassName?: string; }) => { const [transform, setTransform] = useState( "translate(-50%,-50%) rotateX(0deg)" ); const onMouseEnter = () => { setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)"); }; const onMouseLeave = () => { setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)"); }; return ( <a className={cn( "relative group/pin z-50 cursor-pointer", containerClassName )} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} href={href || "/"} > <div style={{ perspective: "1000px", transform: "rotateX(70deg) translateZ(0deg)", }} className="…

Skill · 3D / 动效 Hero

提示语

来源热度

—

稳定度

查看 Case →

AI 编程(UI)MotionSitesMotionSites →

3D Collectible Hero

Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <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=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d…

Skill · 3D / 动效 Hero Skill · 落地页信息结构

提示语

来源热度

—

稳定度

查看 Case →

Sparkform

MO创作者MotionSites →

查看原始来源 ↗

**Recreate this exact landing page pixel-for-pixel.** ## Tech stack React + Vite + TypeScript + Tailwind CSS. Single page: `<Hero />` then `<Marquee />`. No router, no extra sections. Body: `font-family: 'Inter', sans-serif`, `background: #000`, `overflow-x: hidden`. `html { scroll-behavior: smooth }`. Page title: `Beyond Hero`. ## Fonts (exact URLs) Load in `<head>`: 1. **Bamboly Demo** (display / title / marquee): ```html <link href="https://db.onlinewebfonts.com/c/58ee300970307a1cc399e6bebd7617ce?family=Bamboly+Demo" rel="stylesheet"> ``` Direct files if needed: - `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` on the heading helper class. 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 default only - Poppins weight **500** = side word columns ## Color palette | Role | Hex | |------|-----| | Hero background | `#EC612C` | | BEYOND front layer | `#FFFFFF` | | BEYOND layer (green) | `#90EE90` | | BEYOND layer (orange gap, same as bg) | `#EC612C` | | BEYOND back layer (blue) | `#89CFF0` | | Side words | `white` at `opacity` via column (base class `text-white/80`) | | Marquee background | `#FFFFFF` | | Marquee text | `#EC612C` | | Body page bg | `#000000` | ## Asset — character image (exact URL used in code) ``` 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 ``` Original PNG source behind the proxy: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260801_104316_80b428ea-dc99-4399-afb3-8ccb7b34b2d0.png ``` Subject: 3D bust of a young Black man, electric-blue braids with silver beads, bright blue eyes looking upward, neon-green ribbed turtleneck, transparent/orange-cutout background. Centered, chest-up. *(Local unused files exist at `/public/images/{0B435C65-A382-4437-BCE3-E275271AEB12}.png` and `{A01C6A0D-C4E6-496C-BC3D-D942405C2DBB}.png` — do not use them; the live page uses the Higgs URL above.)* --- ## SECTION 1 — Hero ### Structure & layout - `<section>` height **`120vh`**, `backgroundColor: #EC612C`, `relative w-full overflow-hidden`. - Two layers: **A. Character (z-index 10)** — absolute `inset-0`, `pointer-events-none`: - `<img>` `absolute bottom-0 left-1/2 -translate-x-1/2` - `w-auto max-w-none block` - inline style: `height: 115%`, `maxHeight: 115%`, `minHeight: 80%` - Sits in front of the title (covers center of “BEYOND”). **B. Sticky text overlay (z-index 5)** — `sticky top-0 h-screen w-full`: ### “BEYOND” stacked title - Top-centered: `absolute inset-0 flex items-start justify-center pt-[2vh] md:pt-[3vh]` - Four absolutely stacked `<h1>` layers (except front layer `position: relative`), all text `BEYOND`, same box, `leading-[0.85] tracking-tight select-none` - Font: `"Bamboly Demo", sans-serif` - Size: `clamp(7.5rem, 30vw, 28rem)` - Stack order (render back→front), each with `transform: translateY(offset)`: | Layer | Color | Desktop offset | Mobile (`<768px`) offset | |-------|-------|----------------|---------------------------| | 0 (back) | `#89CFF0` | `36px` | `18px` | | 1 | `#EC612C` | `24px` | `12px` | | 2 | `#90EE90` | `12px` | `6px` | | 3 (front) | `#FFFFFF` | `0` | `0` | Visual effect: white “BEYOND” with green → orange-gap → baby-blue stripes peeking downward under the letters (retro stacked drop). ### Side word columns - Arrays (source lowercase; CSS `uppercase`): - Left: `spark`, `imagine`, `evolve`, `render` - Right: `blaze`, `genesis`, `purpose`, `ignite` - Container: `absolute inset-0 flex items-end justify-between px-[3vw] md:px-[6vw]`, `bottom: -8vh`, `pointer-events-none` - Left column: `flex flex-col gap-1 md:gap-2` - Right column: same + `items-end`, words `text-right` - Each word: `"Poppins", sans-serif`, `fontWeight: 500`, `fontSize: clamp(1.6rem, 7vw, 9rem)`, `lineHeight: 1.1`, `text-white/80`, `select-none`, `transition: transform 0.05s linear` ### Scroll-driven animation (exact math) Track scroll progress on the 120vh section: ``` progress = clamp(0..1, -rect.top / (sectionHeight - window.innerHeight)) ``` `scaleFactor = window.innerWidth < 768 ? 0.5 : 1` **Horizontal offsets** (at progress `0` = start; progress `1` = fully scrolled through sticky range): ``` leftOffset[i] = -(60 + i * 40) * scaleFactor * (1 - progress) rightOffset[i] = +(60 + i * 40) * scaleFactor * (1 - progress) ``` Desktop start offsets by index: ±60, ±100, ±140, ±180 px. Mobile half of that. As user scrolls, words slide inward to `0`. **Opacity** (both columns): ``` opacity = 0.35 + progress * 0.65 // 0.35 → 1.0 ``` Listeners: `scroll` (passive) + `resize`. Sticky text stays pinned for the ~20vh scroll range while the tall section scrolls underneath. --- ## SECTION 2 — Marquee - Full-width white band: `w-full bg-white overflow-hidden py-6 md:py-8` - Track class `marquee-track`: `display flex`, `whitespace-nowrap` - CSS animation: ```css @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-track { animation: marquee-scroll 18s linear infinite; } ``` - Exact string (middle dots = `\u00B7` / `·`): ``` SPARK · RENDER · IGNITE · UNFOLD · GENESIS · EVOLVE · PURPOSE · BEYOND · ``` - Render **4 identical copies** of that string side-by-side (`shrink-0`) so `-50%` loops seamlessly. - Style: `"Bamboly Demo", sans-serif`, `uppercase`, `color: #EC612C`, `fontSize: clamp(2.5rem, 6vw, 5rem)`, `lineHeight: 1`, `paddingRight: 0.25em`, `select-none` --- ## Composition / z-order summary 1. Orange `#EC612C` hero plane (120vh) 2. Sticky white/colored typography (z5) — BEYOND top, word columns bottom-left/right 3. Character image (z10) centered, bottom-anchored, height 115% — overlaps title and sits between the word columns 4. White marquee strip below hero, infinite horizontal scroll of brand words in Bamboly orange ## Responsive breakpoints - Mobile `<768px`: half scroll offsets, half BEYOND layer offsets, tighter padding (`px-[3vw]`, `pt-[2vh]`, smaller marquee py). - Desktop: full offsets, `px-[6vw]`, `pt-[3vh]`. ## Do not add No nav, cards, CTAs, stats, purple gradients, Inter for the hero display, or the unused local PNGs. Match fonts, colors, asset URL, scroll math, and marquee string/timing exactly as above.