创作者viktoroddy →@viktoroddy 使用 Gemini · AntiGravity · React完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
查看原始来源 ↗Prompt
本设计由 Nixtio Agency 提交。
一键获取所有精彩动画网站的 Prompt：
---
## Prompt：重建 Dental Health 落地页
使用 **React + Vite + TypeScript + Tailwind CSS** 创建一个单页牙科诊所落地页。不要使用外部 UI 库或图标库。所有内容都放在一个 `App.tsx` 文件中。页面包含 3 个全屏区块、一个 splash screen 和一个固定导航栏。
---
### 设置
**字体：**在 `index.html` 的 `<head>` 中通过以下精确链接加载 "Open Sauce One"：
```html
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
```
**标题：**"Dental Health - Quality Healthcare"
**全局 CSS（index.css）：**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html, body, #root {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sauce One', -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
```
**Tailwind 配置：**使用默认配置，不做扩展。Content：`['./index.html', './src/**/*.{js,ts,jsx,tsx}']`。
---
### 图片 URL（使用这些精确 URL）
```ts
const HERO_IMAGE = '';
const SECTION2_IMAGE = '';
const SECTION3_IMG1 = '';
const SECTION3_IMG2 = '';
const SECTION3_BG = '';
```
---
### 数据常量
```ts
const featureBars = ['Advanced Dentistry', 'High Quality Equipment', 'Friendly Staff'];
const services = [
{ name: 'Dental
Veneers', num: '01', active: true },
{ name: 'Dental
Crowns', num: '02', active: false },
{ name: 'Teeth
Whitening', num: '03', active: false },
{ name: 'Dental
Implants', num: null, active: false },
];
```
---
### 核心技术概念：“Masked Cards”
第 1 和第 2 区块使用同一张大型背景图，每张卡片都展示这张图的不同“窗口”，从而形成统一的马赛克效果。实现方式如下：
**`useMaskPositions` hook：**
- 接收 section 容器的 ref 和卡片元素数组的 ref。
- 在 section 容器上使用 `ResizeObserver`。
- 对每张卡片计算 `{ x, y, sw, sh }`，其中 x/y 是卡片左上角相对于 section 的偏移，sw/sh 是 section 的宽度/高度。
**`useImageWidth` hook：**
- 使用 `new Image()` 对象加载图片。
- 计算：`renderWidth = img.naturalWidth * (sectionHeight / img.naturalHeight)`。
- 返回图片按 section 高度缩放后应有的宽度。
**`MaskedCard` 组件：**
- Props：`bgImage`、来自 `useMaskPositions` 的 `position`、来自 `useImageWidth` 的 `imageWidth`、`focalX`（0–1 浮点数）、`className`、`children`、`cardRef`、`style`。
- 计算：`overflow = imageWidth > position.sw ? imageWidth - position.sw : 0`，然后计算 `focalOffset = overflow * focalX`。
- 应用以下内联样式：
```
backgroundImage: url(bgImage)
backgroundSize: auto []px
backgroundPosition: -[position.x + focalOffset]px -[position.y]px
backgroundRepeat: no-repeat
```
- `focalX` 值：第 1 区块移动端 = 0.7，桌面端 = 0.8。第 2 区块移动端 = 0.65，桌面端 = 0.8。
**`useIsMobile` hook：**
- 监听 `window.matchMedia('(max-width: 767px)')` 的 change 事件。
- 返回 boolean。
---
### 动画：`useStaggeredReveal` hook
- 接收 `count`（元素数量）和 `threshold`（IntersectionObserver 阈值，默认 0.15）。
- 返回 `{ containerRef, getAnimStyle }`。
- 将 `containerRef` 绑定到 section；当它越过阈值时，`visible` 变为 true（只触发一次）。
- `getAnimStyle(index)` 返回：
```css
opacity: visible ? 1 : 0
transform: visible ? 'translateY(0)' : 'translateY(24px)'
transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms,
transform 0.6s cubic-bezier(0.16,1,0.3,1) [index*120]ms
```
---
### Splash Screen
- 固定覆盖视口的叠加层，`z-[100]`，白色背景。
- 数字计数器显示在**左下角**（`items-end justify-start`）。
- 计数器样式：`text-7xl md:text-9xl font-bold tabular-nums p-6 md:p-10 leading-none`，黑色文字。
- 在精确 2000ms 内从 0 计数到 100（每步 20ms，共 100 步）。
- 到达 100 后等待 200ms，然后设置 `exiting=true`，触发带 `transition-opacity duration-700` 的 `opacity-0`。
- 从到达 100 开始总计 900ms 后，调用 `onComplete()`，从 DOM 中移除 splash。
---
### 导航栏
**容器：**`fixed top-0 left-0 right-0 z-50`、`flex items-center justify-between`、`px-4 md:px-6 py-2 md:py-3`、`bg-white/80 backdrop-blur-md`。
**Logo（左侧）：**
- 两行堆叠显示：“Dental”和“Health”
- Wrapper：`flex flex-col`
- 文字：`text-xl md:text-2xl font-extrabold uppercase tracking-tight leading-none`
- 第二行使用 `-mt-1.5 md:-mt-2` 以保持紧凑间距
- Logo 文字下方是“quality healthcare”，样式为 `text-[8px] md:text-[9px] font-medium leading-none mt-1.5 md:mt-2`
**桌面导航（移动端隐藏，使用 `hidden md:block`）：**
- “Menu”按钮：`px-6 py-3 bg-white rounded-full border border-black text-sm font-semibold`，悬停：`hover:bg-black hover:text-white transition-colors duration-200`
- “Dental Emergency”文字：`text-sm font-semibold text-black`
**移动端汉堡按钮（只在移动端显示，使用 `md:hidden`）：**
- 容器：`w-10 h-10 flex items-center justify-center`、`relative`
- 3 个 span，每个使用：`absolute h-0.5 w-6 bg-black rounded-full`
- 转场：`transition-all duration-300 ease-[cubic-bezier(0.76,0,0.24,1)]`
- 关闭状态：顶部 span 为 `-translate-y-2`，中间为 `opacity-100 scale-x-100`，底部为 `translate-y-2`
- 打开状态：顶部为 `rotate-45 translate-y-0`，中间为 `opacity-0 scale-x-0`，底部为 `-rotate-45 translate-y-0`
**移动端菜单叠加层（`md:hidden`）：**
- 外层：`fixed inset-0 z-40`，根据打开状态切换 pointer-events
- 背景遮罩：`absolute inset-0 bg-black/20 backdrop-blur-sm`，淡化 opacity。点击后关闭菜单。
- 面板：`absolute top-0 right-0 h-full w-[85%] max-w-sm bg-white shadow-2xl`，打开时使用 `translate-x-0`，关闭时使用 `translate-x-full`，`duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`
- 内容：`flex flex-col justify-center h-full px-8 gap-1`
- 导航链接：['Home', 'Services', 'About', 'Gallery', 'Contact']
- 每个链接：`text-4xl font-bold text-black hover:text-neutral-500`
- 错开进入：打开时从 `opacity-0 translate-x-8` 变为 `opacity-100 translate-x-0`，打开时使用 `transitionDelay: ${100 + i * 60}ms`
- `transition-all duration-500 ease-[cubic-bezier(0.76,0,0.24,1)]`
- 底部区域：`mt-8 pt-8 border-t border-neutral-200`，延迟 450ms
- “Dental Emergency”文字：`text-sm font-semibold text-black mb-4`
- 按钮：`w-full px-6 py-4 bg-black rounded-full text-white text-sm font-semibold hover:bg-neutral-800 transition-colors duration-200`，文字为“Book Appointment”
- 打开时：`.overflow = 'hidden'`。卸载时清理。
---
### 区块 1 - HERO
**容器：**`<section>`、`h-screen w-full overflow-hidden flex flex-col`、`pt-24 md:pt-24 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`
同时将 `section1Ref` 和 `s1Reveal.containerRef` 绑定到该元素。
通过 MaskedCard 技术使用 `HERO_IMAGE` 作为共享背景。
**3 个功能条**（从 `featureBars` 数组映射）：
- 每个都是 MaskedCard，使用：`w-full h-14 md:h-20 shrink-0 rounded-xl md:rounded-2xl overflow-hidden relative`
- 使用 `s1Reveal.getAnimStyle(i)` 动画，i=0、1、2
- 内容：span 在垂直和水平方向居中（`flex items-center justify-center h-full`），使用 `text-black text-lg md:text-3xl font-bold text-center`，并置于 `relative z-10`
**主 Hero 卡片**（第 4 张卡，index 3）：
- MaskedCard：`w-full flex-1 min-h-0 rounded-xl md:rounded-2xl overflow-hidden relative`
- 使用 `s1Reveal.getAnimStyle(3)` 动画
- **左上文字：**`absolute top-4 left-4 md:top-7 md:left-7`、`text-black text-xs md:text-sm font-semibold leading-4 md:leading-5 max-w-[200px] md:max-w-[300px] z-10`
- 内容：“We wish to provide professional dental services” `<br/>` “that match the current technologies”
- **左下区块：**`absolute bottom-5 left-3 md:bottom-8 md:left-4 z-10`
- 标签：`block text-black text-xs md:text-sm font-semibold mb-1 md:mb-2`，文字为“Trusted Dentist in West New York”
- 标题：`<h1>`，使用 `text-black text-[clamp(3rem,11vw,11rem)] font-bold leading-[0.79] tracking-tight`，内容为：“Dental” `<br/>` “Care”
- **右下文字：**`absolute bottom-6 right-4 md:bottom-10 md:right-8`、`text-white text-xs md:text-sm font-semibold z-10`，内容为“Free Consultation”
---
### 区块 2 - SMILE GALLERY
**容器：**`<section>`、`min-h-screen md:h-screen w-full overflow-hidden flex flex-col`、`pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`
同时将 `section2Ref` 和 `s2Reveal.containerRef` 绑定到该元素。
通过 MaskedCard 技术使用 `SECTION2_IMAGE` 作为共享背景。
**网格容器：**`flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 grid-rows-[auto_auto_auto_auto] md:grid-rows-[1fr_1fr_0.8fr] gap-1.5 md:gap-2`
**卡片 0 - 左上（“Smile Gallery”）：**
- MaskedCard：`rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0`
- 动画：`s2Reveal.getAnimStyle(0)`
- 标题：`absolute top-4 left-5 md:top-6 md:left-7`、`text-white md:text-black text-2xl md:text-3xl font-bold z-10`，文字为“Smile Gallery”
- 副标题：`absolute bottom-4 left-5 md:bottom-6 md:left-7`、`text-white md:text-black text-xs md:text-sm font-semibold z-10`，文字为“Our cosmetic dental work”
**卡片 1 - 右上（桌面端跨 2 行）：**
- MaskedCard：`md:row-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0`
- 动画：`s2Reveal.getAnimStyle(1)`
- 文字：`absolute bottom-16 left-5 md:bottom-20 md:left-7`、`text-white text-xs md:text-sm font-semibold leading-4 md:leading-5 z-10`，内容：“If you want a gorgeous smile,” `<br/>` “call us to ask about a smile makeover.”
- 按钮：`absolute bottom-4 right-4 md:bottom-6 md:right-6`、`px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold z-10 hover:scale-105 transition-transform`，文字为“Call Us”
**卡片 2 - 左下（“Smile makeover”）：**
- MaskedCard：`rounded-xl md:rounded-2xl overflow-hidden relative min-h-[160px] md:min-h-0`
- 动画：`s2Reveal.getAnimStyle(2)`
- 标题：`absolute top-4 left-5 md:top-6 md:left-7`、`text-white md:text-black text-[clamp(3rem,7vw,6rem)] font-bold leading-[0.9] z-10`，内容为“Smile” `<br/>` “makeover”
**卡片 3 - 底部全宽（服务）：**
- MaskedCard：`col-span-1 md:col-span-2 rounded-xl md:rounded-2xl overflow-hidden relative min-h-[200px] md:min-h-0`
- 动画：`s2Reveal.getAnimStyle(3)`
- 内部容器：`absolute inset-0 z-10 flex flex-wrap md:flex-nowrap gap-1.5 md:gap-2 p-2 md:p-3`
- 从 `services` 数组映射 4 张服务子卡片：
- 容器：`flex-1 min-w-[calc(50%-4px)] md:min-w-0 rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between`
- 激活态：`bg-white/90 backdrop-blur-md`
- 未激活态：`bg-white/20 backdrop-blur-xl`
- 服务名称：`<h3>` 使用 `text-xl md:text-4xl font-bold leading-[1.05] whitespace-pre-line`，颜色为 active=`text-black`、inactive=`text-white`
- 如果 `svc.num` 存在，数字徽章：`self-end w-8 h-8 md:w-12 md:h-12 rounded-full border flex items-center justify-center text-xs md:text-sm font-semibold`
- 激活态：`border-black text-black`
- 未激活态：`border-white text-white`
---
### 区块 3 - IMPLANT DENTISTRY
**容器：**`<section>`、`min-h-screen md:h-screen w-full overflow-hidden flex flex-col`、`pt-1.5 md:pt-2 px-3 md:px-5 pb-1.5 md:pb-2 gap-1.5 md:gap-2`
将 `s3Reveal.containerRef` 绑定到该元素。
不使用 MaskedCard 技术。使用普通 `<img>` 标签和纯色背景。
**网格：**`flex-1 min-h-0 grid grid-cols-1 md:grid-cols-2 gap-1.5 md:gap-2`
#### 左列：`flex flex-col gap-1.5 md:gap-2`
**1. 标题卡片：**
- `<div>`：`rounded-xl md:rounded-2xl bg-stone-50 p-5 md:p-7 flex flex-col justify-between flex-[1.2] min-h-[180px] md:min-h-0`
- 动画：`s3Reveal.getAnimStyle(0)`
- 标题：`<h2>` 使用 `text-[clamp(3rem,7vw,6.5rem)] font-bold leading-[0.95] text-black`，内容为“Implant” `<br/>` “Dentistry”
- 副标题：`<p>` 使用 `text-xs md:text-sm font-semibold text-black`，文字为“Restore Missing Teeth”
**2. 两张并排图片卡片：**
- Wrapper：`<div>` 使用 `flex gap-1.5 md:gap-2 flex-1 min-h-[140px] md:min-h-0`
- 动画：`s3Reveal.getAnimStyle(1)`
- 左图：`<div className="flex-1 rounded-xl md:rounded-2xl overflow-hidden"><img src={SECTION3_IMG1} alt="Dental implant procedure" className="w-full h-full object-cover" /></div>`
- 右图：`<div className="flex-1 rounded-xl md:rounded-2xl overflow-hidden"><img src={SECTION3_IMG2} alt="Dental restoration" className="w-full h-full object-cover" /></div>`
**3. 咨询卡片：**
- `<div>`：`rounded-xl md:rounded-2xl bg-zinc-200 p-5 md:p-7 flex items-end justify-between flex-[0.8] min-h-[160px] md:min-h-0`
- 动画：`s3Reveal.getAnimStyle(2)`
- 左侧内容区块：
- 标签：`<p>` 使用 `text-xs md:text-sm font-semibold text-black mb-2 md:mb-3`，文字为“Consultation”
- 标题：`<h3>` 使用 `text-xl md:text-3xl font-bold text-black leading-6 md:leading-8`，内容为“Dental” `<br/>` “Restoration” `<br/>` “Services”
- 按钮：`px-5 py-3 md:px-8 md:py-5 bg-white rounded-full text-black text-base md:text-xl font-bold hover:scale-105 transition-transform`，文字为“Book Online”
#### 右列：单张高大的图片卡片
- `<div>`：`rounded-xl md:rounded-2xl overflow-hidden relative min-h-[350px] md:min-h-0`
- 动画：`s3Reveal.getAnimStyle(3)`
- 背景图片：`<img src={SECTION3_BG} alt="Smiling patient" className="w-full h-full object-cover" />`
- **叠加层容器：**`absolute bottom-3 left-3 right-3 md:bottom-5 md:left-5 md:right-5 flex gap-1.5 md:gap-2`
**叠加卡片 1（左侧白色）：**
- `flex-1 bg-white rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52`
- 标题：`<h4>` 使用 `text-lg md:text-2xl font-bold text-black leading-5 md:leading-7`，内容为“The Process” `<br/>` “of Installing” `<br/>` “Implants”
- 箭头图标：`self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-black flex items-center justify-center`
- SVG：`width="14" height="14" viewBox="0 0 14 14" fill="none"`，class 为 `rotate-[-45deg]`
- Path：`d="M1 7h12m0 0L8 2m5 5L8 12"`，使用 `stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"`
**叠加卡片 2（右侧玻璃拟态）：**
- `flex-1 bg-white/20 backdrop-blur-xl rounded-xl md:rounded-2xl p-3 md:p-5 flex flex-col justify-between h-36 md:h-52`
- 标题：`<h4>` 使用 `text-lg md:text-2xl font-bold text-white leading-5 md:leading-7`，内容为“Caring” `<br/>` “for Dental” `<br/>` “Implants”
- 箭头图标：`self-end w-9 h-9 md:w-12 md:h-12 rounded-full border border-white flex items-center justify-center`
- 使用同一个 SVG，但额外添加 class `text-white`
---
### 外层 Wrapper
整个应用包裹在 `<div className="bg-white">` 中，内容包含：
1. `{showSplash && <SplashScreen />}`（条件渲染）
2. `<Navbar />`
3. 区块 1
4. 区块 2
5. 区块 3
---
### 关键设计规则
- **区块间距：**每个区块只使用 `pb-1.5 md:pb-2`，第 2、3 区块使用 `pt-1.5 md:pt-2`，整体几乎无缝衔接。
- **边框圆角：**所有卡片使用 `rounded-xl md:rounded-2xl` 和 `overflow-hidden`。
- **配色：**严格使用黑色、白色和半透明白色（`bg-white/20`、`bg-white/90`），配合 `backdrop-blur-md` 或 `backdrop-blur-xl`。
- **背景填充：**区块 3 使用 `bg-stone-50` 和 `bg-zinc-200` 纯色卡片。
- **字体：**粗重的 bold/extrabold，标题使用 `clamp()` 响应式尺寸，leading 极其紧凑（0.79、0.9、0.95、1.05）。
- **交互：**CTA 按钮使用 `hover:scale-105 transition-transform`。
- **响应式：**只使用一个 `md:`（768px）断点。移动端堆叠，桌面端使用网格。
- **除 React 和 Tailwind 外不要使用其他外部包。**复用方法
关键决定
关键决定：牙科首页的核心在于用同一张背景图通过 MaskedCard 切成 Hero、Smile Gallery 和服务卡片，再用三段满屏结构承载种植牙内容；固定数字、间距、圆角和浅色卡片让复杂视觉仍有统一系统。
换到你的题材
换到你的题材：可以替换诊所名称、图片常量、服务数组、文案和色彩，但骨架应保留共享图片的窗口裁切、三段页面、桌面双列与移动堆叠、固定导航和 splash；若换成皮肤科，应同步重写服务与图片 alt。
容易翻车
容易翻车：图片 URL 为空时 MaskedCard 会只剩布局，且 ResizeObserver、图片宽度和移动 focalX 任一处不对都会让多个卡片的同一张图错位；复测时先补齐五个图片常量，再检查 768px 两侧布局、菜单锁滚动和 2 秒计数器。
建议模型
Derived Skill
Skill 只从多个已发布 Case 的重复模式中派生，不是另一套投稿内容。
创作者
viktoroddy 在X输出 UI 工程化实践，《应式3D角色轮播动画UI》搭 Claude Sonnet 出方案，带可复现代码。
继续探索
@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 实现流畅的产品旋转和悬停交互 如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒
提示语
有几个人询问提示词，所以放在这里 👇 附言：根据你的使用场景进行调整。 创建一个现代、极简的 3D 发票生成器机器组件，采用高级 SaaS 风格美学。 视觉设计 - 设计一台宽幅横向的发票打印机，灵感来自小票打印机，但外观未来感十足且干净利落。 - 使用细微的灰色线条、柔和阴影和极少细节。 - 机器应显得高级、轻盈而现代，而不是写实或工业化。 - 保持整体设计足够干净，使其可以放入仪表盘或落地页的 Hero 区域。 - 直接在机器上添加一个醒目的 Print Inv
@shushant_l 使用 AI Website Builder完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
下面介绍如何用 AI 以极简设计风格创建你的网站。 使用这条提示：为一位数字创作者和 AI 顾问设计一个现代极简作品集网站。采用干净的黑、白和中性色调，不使用渐变、玻璃拟态或过度的视觉效果。注重简洁、留白、强有力的排版、清晰的层级和快速加载性能。加入首屏介绍与行动号召、关于版块、精选项目作品集、服务版块、客户评价、博客/文章预览、技能与工具展示、客户 Logo、联系表单和页脚。加入细微动效、平滑滚动、优雅的卡片布局、移动端优先的响应式设计，以及对 SEO 友好的结构。整体美