珍稀画廊

Prompt

构建一个单页奢侈品牌落地页（仅包含 navbar + 全视口 hero）。技术栈：React 18 + TypeScript + Vite + Tailwind CSS 3。不使用额外 UI 工具包。仅将 lucide-react 用于 Flower2 图标。页面标题：Aurevon。根包装容器：bg-black。html, body { overflow-x: hidden }。全局重置：margin: 0; padding: 0; box-sizing: border-box。

字体
严格加载以下 Google Fonts：

https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap

工具类：.font-instrument { font-family: 'Instrument Serif', serif; }

Instrument Serif 仅用于 hero H1 和 overlay nav links。Logo、nav pill、正文和 CTA 使用 Tailwind 默认 sans（ui-sans-serif, system-ui, …）。

缓动（所有位置复用）

进入：cubic-bezier(0.16, 1, 0.3, 1)
Menu overlay / hamburger morph：cubic-bezier(0.76, 0, 0.24, 1)
NAVBAR（固定）
Fixed top-0 left-0 w-full z-50。window.scrollY > 40 之前保持透明，之后使用 bg-black/80 backdrop-blur-md。过渡：duration-500。

内栏：max-w-[1440px] mx-auto px-6 md:px-10 flex items-center justify-between h-16 md:h-20。

左侧 — logo
文本链接“Aurevon”，text-white text-xl md:text-2xl font-semibold tracking-tight z-50。

中间 — 仅桌面端（hidden md:flex）
Pill button：px-5 py-2 rounded-full border border-white/20 text-white/90 text-sm hover:bg-white/10、items-center gap-2。overlay 关闭时标签为“导航”，打开时为“关闭”。用于切换 overlay。

右侧 — 仅桌面端（hidden md:flex）
lucide-react 的 Flower2：w-7 h-7 text-white/90。

右侧 — 移动端（md:hidden）
Hamburger，w-8 h-8、flex-col items-center justify-center gap-1.5、aria-label="Toggle menu"。两条横线：w-6 h-[2px] bg-white。打开时：上方横线 rotate-45 translate-y-[4px]，下方横线 -rotate-45 -translate-y-[4px]。morph 持续时间为 duration-500，并使用 overlay 缓动。

Navbar 进入动画（加载时）
100ms 后设置 mounted。元素初始为 opacity-0 -translate-y-4，结束为 opacity-100 translate-y-0。duration-700 + 进入缓动。mounted 后的延迟：logo 0ms、Navigate/hamburger 200ms、flower 400ms。

overlay 打开时，将 document.body.style.overflow 设置为 'hidden'；关闭时恢复。

全屏 OVERLAY MENU
fixed inset-0 z-40 bg-black（位于 navbar z-50 下方）。关闭：opacity-0 invisible。打开：opacity-100 visible。过渡 duration-700 + overlay 缓动。内容居中：flex flex-col items-center justify-center。

链接垂直堆叠，gap-8，居中：

首页
品牌故事
系列
垂询
每项：href="#"、text-white font-instrument text-4xl md:text-6xl hover:opacity-60。关闭时：opacity-0 translate-y-6。打开时：opacity-100 translate-y-0。持续 600ms，使用 overlay 缓动。打开时依次错开：150 + index * 80 ms（首页 150、品牌故事 230、系列 310、垂询 390）。关闭时 delay 0。点击链接会关闭 overlay。

HERO（全视口）
<section class="relative w-full h-screen overflow-hidden flex items-end justify-center">

背景 video（必须使用以下确切 URL）

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260819_212700_3bb9329b-5c50-4257-a09b-ca85cf3654a3.mp4
包装容器：absolute inset-0。初始为 scale-105 opacity-0，300ms 后 mounted 变为 scale-100 opacity-100。过渡 duration-[1400ms] + 进入缓动。

<video>：使用该 src、autoPlay muted loop playsInline，class="w-full h-full object-cover"。无 overlay gradient。Video 是唯一背景。

前景（底部居中）
relative z-10 text-center px-6 pb-16 md:pb-24 max-w-4xl mx-auto

H1（Instrument Serif）：
font-instrument text-white text-[2.5rem] leading-[0.95] sm:text-5xl md:text-6xl lg:text-7xl mb-5 md:mb-6

确切文案，仅从 sm 起换行：

精心甄选的<br class="hidden sm:block" /> 无与伦比的珍藏
在移动端为自然换行的一行；从 sm 起为两行：“精心甄选的”，然后是“无与伦比的珍藏”。

副文案
text-white/70 text-base md:text-lg mb-8 md:mb-10 max-w-md mx-auto
文案：在我们的私人画廊中预留您的席位。

CTA
<a href="#"> “加入候补名单”
inline-block px-8 py-3.5 bg-white text-black text-sm md:text-base font-medium rounded-full hover:bg-white/90

Hero 文本/CTA 进入动画
三者均从 opacity-0 translate-y-8 开始，以 opacity-100 translate-y-0 结束。duration-900 + 进入缓动。300ms 后 mounted，随后延迟：H1 400ms、副文案 600ms、CTA 800ms。mounted 前 delay 0。

响应式检查清单（必须匹配）
断点	行为
默认 / 移动端
Nav 高度 64px，padding-x 24px。仅显示 Hamburger（无 Navigate pill、无 flower）。Hero padding-bottom 64px。H1 2.5rem / line-height 0.95，不强制 H1 换行。副文案 text-base，CTA text-sm。Overlay links text-4xl。
sm (640px)
H1 text-5xl；出现 H1 换行。
md (768px)
Nav 高度 80px，padding-x 40px。桌面端：logo | Navigate pill | flower。Overlay links text-6xl。Hero pb-24。H1 text-6xl、mb-6。副文案 text-lg、mb-10。CTA text-base。
lg (1024px)
H1 text-7xl。
不添加其他版块、footer 或额外 chrome。不添加 video controls、poster 或额外色彩 overlay。按照以上类、时间、文案及 CloudFront URL，以像素级精度重现 navbar + hero。

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

适用模型与稳定度

建议模型

待补充模型

稳定度: 91 / 100
成本: 中

AI 编程(UI)X

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 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

复测未通过

查看 Case →

AI 编程(UI)Aceternity UI

3D 动画图钉

Aceternity UI 的 AI Coding (UI) 案例“3D Animated Pin”——GoodCase.ai 上提供完整提示词与原始来源。

Skill · 3D / 动效 Hero

提示语

// 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…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)Aceternity UI

3D 地球

Aceternity UI 的 AI 编程（UI）案例“3D 地球”——完整提示词和原始来源见 GoodCase.ai。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

Prompt

构建一个单页奢侈品牌落地页（仅包含 navbar + 全视口 hero）。技术栈：React 18 + TypeScript + Vite + Tailwind CSS 3。不使用额外 UI 工具包。仅将 lucide-react 用于 Flower2 图标。页面标题：Aurevon。根包装容器：bg-black。html, body { overflow-x: hidden }。全局重置：margin: 0; padding: 0; box-sizing: border-box。

字体
严格加载以下 Google Fonts：

https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap

工具类：.font-instrument { font-family: 'Instrument Serif', serif; }

Instrument Serif 仅用于 hero H1 和 overlay nav links。Logo、nav pill、正文和 CTA 使用 Tailwind 默认 sans（ui-sans-serif, system-ui, …）。

缓动（所有位置复用）

进入：cubic-bezier(0.16, 1, 0.3, 1)
Menu overlay / hamburger morph：cubic-bezier(0.76, 0, 0.24, 1)
NAVBAR（固定）
Fixed top-0 left-0 w-full z-50。window.scrollY > 40 之前保持透明，之后使用 bg-black/80 backdrop-blur-md。过渡：duration-500。

内栏：max-w-[1440px] mx-auto px-6 md:px-10 flex items-center justify-between h-16 md:h-20。

左侧 — logo
文本链接“Aurevon”，text-white text-xl md:text-2xl font-semibold tracking-tight z-50。

中间 — 仅桌面端（hidden md:flex）
Pill button：px-5 py-2 rounded-full border border-white/20 text-white/90 text-sm hover:bg-white/10、items-center gap-2。overlay 关闭时标签为“导航”，打开时为“关闭”。用于切换 overlay。

右侧 — 仅桌面端（hidden md:flex）
lucide-react 的 Flower2：w-7 h-7 text-white/90。

右侧 — 移动端（md:hidden）
Hamburger，w-8 h-8、flex-col items-center justify-center gap-1.5、aria-label="Toggle menu"。两条横线：w-6 h-[2px] bg-white。打开时：上方横线 rotate-45 translate-y-[4px]，下方横线 -rotate-45 -translate-y-[4px]。morph 持续时间为 duration-500，并使用 overlay 缓动。

Navbar 进入动画（加载时）
100ms 后设置 mounted。元素初始为 opacity-0 -translate-y-4，结束为 opacity-100 translate-y-0。duration-700 + 进入缓动。mounted 后的延迟：logo 0ms、Navigate/hamburger 200ms、flower 400ms。

overlay 打开时，将 document.body.style.overflow 设置为 'hidden'；关闭时恢复。

全屏 OVERLAY MENU
fixed inset-0 z-40 bg-black（位于 navbar z-50 下方）。关闭：opacity-0 invisible。打开：opacity-100 visible。过渡 duration-700 + overlay 缓动。内容居中：flex flex-col items-center justify-center。

链接垂直堆叠，gap-8，居中：

首页
品牌故事
系列
垂询
每项：href="#"、text-white font-instrument text-4xl md:text-6xl hover:opacity-60。关闭时：opacity-0 translate-y-6。打开时：opacity-100 translate-y-0。持续 600ms，使用 overlay 缓动。打开时依次错开：150 + index * 80 ms（首页 150、品牌故事 230、系列 310、垂询 390）。关闭时 delay 0。点击链接会关闭 overlay。

HERO（全视口）
<section class="relative w-full h-screen overflow-hidden flex items-end justify-center">

背景 video（必须使用以下确切 URL）

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260819_212700_3bb9329b-5c50-4257-a09b-ca85cf3654a3.mp4
包装容器：absolute inset-0。初始为 scale-105 opacity-0，300ms 后 mounted 变为 scale-100 opacity-100。过渡 duration-[1400ms] + 进入缓动。

<video>：使用该 src、autoPlay muted loop playsInline，class="w-full h-full object-cover"。无 overlay gradient。Video 是唯一背景。

前景（底部居中）
relative z-10 text-center px-6 pb-16 md:pb-24 max-w-4xl mx-auto

H1（Instrument Serif）：
font-instrument text-white text-[2.5rem] leading-[0.95] sm:text-5xl md:text-6xl lg:text-7xl mb-5 md:mb-6

确切文案，仅从 sm 起换行：

精心甄选的<br class="hidden sm:block" /> 无与伦比的珍藏
在移动端为自然换行的一行；从 sm 起为两行：“精心甄选的”，然后是“无与伦比的珍藏”。

副文案
text-white/70 text-base md:text-lg mb-8 md:mb-10 max-w-md mx-auto
文案：在我们的私人画廊中预留您的席位。

CTA
<a href="#"> “加入候补名单”
inline-block px-8 py-3.5 bg-white text-black text-sm md:text-base font-medium rounded-full hover:bg-white/90

Hero 文本/CTA 进入动画
三者均从 opacity-0 translate-y-8 开始，以 opacity-100 translate-y-0 结束。duration-900 + 进入缓动。300ms 后 mounted，随后延迟：H1 400ms、副文案 600ms、CTA 800ms。mounted 前 delay 0。

响应式检查清单（必须匹配）
断点	行为
默认 / 移动端
Nav 高度 64px，padding-x 24px。仅显示 Hamburger（无 Navigate pill、无 flower）。Hero padding-bottom 64px。H1 2.5rem / line-height 0.95，不强制 H1 换行。副文案 text-base，CTA text-sm。Overlay links text-4xl。
sm (640px)
H1 text-5xl；出现 H1 换行。
md (768px)
Nav 高度 80px，padding-x 40px。桌面端：logo | Navigate pill | flower。Overlay links text-6xl。Hero pb-24。H1 text-6xl、mb-6。副文案 text-lg、mb-10。CTA text-base。
lg (1024px)
H1 text-7xl。
不添加其他版块、footer 或额外 chrome。不添加 video controls、poster 或额外色彩 overlay。按照以上类、时间、文案及 CloudFront URL，以像素级精度重现 navbar + hero。

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

适用模型与稳定度

建议模型

待补充模型