趣味 404 页面

Prompt

使用 React、Tailwind CSS 和 Lucide React icons，为名为 "TinyTrails" 的儿童品牌构建一个全屏动画 404 错误页面。页面必须是单个 `App.tsx` 组件。使用从 Google Fonts 加载的 Inter 字体（字重 400–900）。页面占据单个视口高度，不可滚动。

---

**布局与背景：**

- 整个页面使用 `w-full h-screen overflow-hidden flex flex-col`，CSS 线性渐变背景从 `#FF8233`（顶部）过渡到 `#FDAC55`（底部）。

---

**背景 "404" 文字效果：**

- 在所有内容后方、视口中央渲染白色（`#FFFFFF`）文字 "404"，使用 `font-black`、`leading-none`、`tracking-tighter`、`whitespace-nowrap`。
- 字号：`clamp(200px, 48vw, 800px)`。
- 文字横向缩放 `1.15`，纵向动态缩放：在挂载时（以及调整窗口大小时），测量文字元素的 `offsetHeight`，用 `window.innerHeight` 除以该高度，得到 Y 轴缩放值。通过 `transform: scale(1.15, ${scaleY * 1.4})` 应用，并将该值乘以 `1.4`。
- 在 "404" 文字上方（同一个居中容器中）渲染一个白色（`#FFFFFF`）椭圆：一个带有 `rounded-full`、高度 `h-[22vh] sm:h-[26vh] md:h-[50vh]`、宽度 `clamp(120px, 20vw, 400px)` 的 `div`，使用同一个动态 `scaleY` 值进行纵向缩放，并设置 `transformOrigin: center`。
- 整个背景层（文字 + 椭圆）包裹在一个带有 `opacity: 0.8` 和 CSS 遮罩的容器中，该遮罩在底部渐变为透明：`mask-image: linear-gradient(to bottom, black 40%, transparent 95%)`（同时为 Safari 添加 `-webkit-mask-image`）。
- 此层使用 `absolute inset-0 pointer-events-none`。

---

**导航栏：**

- 使用 `relative z-20`，flex row，项目居中，`justify-between`，内边距为 `px-4 sm:px-6 md:px-12 py-4 sm:py-5`。
- **Logo（左侧）：** 一个由白色圆点组成的 2x2 网格（`grid-cols-2 gap-0.5`），每个圆点使用 `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`。旁边是文字 "TinyTrails"，使用 `text-white font-bold text-lg sm:text-xl ml-1`。
- **桌面端导航链接（中间/右侧）：** 在移动端隐藏（`hidden md:flex`），显示一排胶囊按钮，使用 `gap-1`。项目为："About Us"、"Programs"、"Reviews"、"FAQ"、"Contacts"。每项都是一个 `<a>`，使用 `px-4 py-1.5 text-sm font-medium rounded-full bg-white`，文字颜色为 `#F16524`，并带有 `hover:opacity-90 transition-colors`。
- **Menu 按钮（右侧）：** 一个胶囊按钮，使用 `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white`，背景色为 `#F16524`。包含一个 Lucide `Menu` icon（`w-4 h-4`）和文字 "Menu"（`text-sm font-medium hidden sm:inline`）。带有 `hover:opacity-90 transition-colors`。

---

**移动端菜单遮罩层：**

- 固定全屏（`fixed inset-0 z-50`），可切换可见性。过渡：`duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`。
- **背景遮罩：** `absolute inset-0 bg-black/40 backdrop-blur-sm`，通过时长 500ms 的 `opacity` 过渡淡入/淡出。点击时关闭菜单。
- **面板：** 从右侧滑入。使用 `absolute top-0 right-0 h-full w-full sm:w-[380px]`，在关闭时的 `translate-x-full` 和打开时的 `translate-x-0` 之间切换。背景：`linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`。
  - **面板页眉：** 与导航栏相同的 Logo（2x2 白色圆点 + "TinyTrails" 白色粗体文字）。关闭按钮：`w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30`，带有 Lucide `X` icon（`w-5 h-5`）。
  - **菜单项：** 使用交错动画。每个项目使用 `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`。打开时：`opacity-100 translate-y-0`；关闭时：`opacity-0 translate-y-4`。打开时每项的过渡延迟为 `150 + i * 60`ms，关闭时为 `0ms`。
  - **底部 CTA：** 绝对定位在底部（`absolute bottom-0 left-0 right-0 p-6`）。一个胶囊链接：`w-full py-4 rounded-full bg-white font-semibold text-base`，文字颜色为 `#F16524`，带有 `hover:scale-[1.02]`。包含 Lucide `ArrowLeft` icon + "Back to Home"。打开时延迟 450ms 淡入。
- 菜单打开时锁定 body 滚动（`overflow: hidden`）。

---

**中央视频：**

- 一个绝对定位的容器（`absolute inset-0 flex items-center justify-center pointer-events-none`），使用 `margin-top: calc(-6vh - 40px)` 将其向上移动。
- 内部是一个响应式容器：`w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`。
- 包含一个带有 `autoPlay loop muted playsInline` 的 `<video>` 元素，class 为 `w-full h-full object-contain pointer-events-none mix-blend-darken`。
- **视频源 URL：** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_234424_b1332b69-2e69-4302-8dbc-40f86846afbd.mp4`

---

**底部内容：**

- 使用 `relative z-30 mt-auto pb-8 sm:pb-16 flex flex-col items-center text-center px-4`。
- 标题："Oops, something went wrong!"，使用 `text-white text-lg sm:text-xl md:text-2xl font-medium mb-3 sm:mb-4`。
- 按钮/链接：一个 `<a href="/">` 胶囊按钮，使用 `inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 rounded-full text-white font-semibold text-sm sm:text-base`，背景为 `#F16524`。带有 `hover:scale-105 hover:shadow-lg transition-all`。包含 Lucide `ArrowLeft` icon（`w-4 h-4 sm:w-5 sm:h-5`）+ "Back to Home"。

---

**全局 CSS（`index.css`）：**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

---

**HTML HEAD：**

- 从 Google Fonts 加载 Inter 字体：`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap`，并预连接到 `fonts.googleapis.com` 和 `fonts.gstatic.com`。
- 标题："404 - Page Not Found"。

---

**关键配色：**
- 页面渐变：`#FF8233` 到 `#FDAC55`
- 强调色/按钮：`#F16524`
- 文字与形状：`#FFFFFF`
- 菜单渐变：`#FF6B1A` 到 `#FF9642`
- 菜单遮罩层背景：`black/40`，带有 `backdrop-blur-sm`
- 菜单项背景：`white/10`，悬停时为 `white/20`

---

**依赖项：** React、Tailwind CSS、Lucide React（`ArrowLeft`、`Menu`、`X` icons）。Vite 构建系统。不使用其他库。

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

适用模型与稳定度

建议模型

待补充模型

稳定度: 56 / 100
成本: 中

AI 编程(UI)X收录 2026/07/28

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收录 2026/08/13

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

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)X收录 2026/09/12

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

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

Prompt

使用 React、Tailwind CSS 和 Lucide React icons，为名为 "TinyTrails" 的儿童品牌构建一个全屏动画 404 错误页面。页面必须是单个 `App.tsx` 组件。使用从 Google Fonts 加载的 Inter 字体（字重 400–900）。页面占据单个视口高度，不可滚动。

---

**布局与背景：**

- 整个页面使用 `w-full h-screen overflow-hidden flex flex-col`，CSS 线性渐变背景从 `#FF8233`（顶部）过渡到 `#FDAC55`（底部）。

---

**背景 "404" 文字效果：**

- 在所有内容后方、视口中央渲染白色（`#FFFFFF`）文字 "404"，使用 `font-black`、`leading-none`、`tracking-tighter`、`whitespace-nowrap`。
- 字号：`clamp(200px, 48vw, 800px)`。
- 文字横向缩放 `1.15`，纵向动态缩放：在挂载时（以及调整窗口大小时），测量文字元素的 `offsetHeight`，用 `window.innerHeight` 除以该高度，得到 Y 轴缩放值。通过 `transform: scale(1.15, ${scaleY * 1.4})` 应用，并将该值乘以 `1.4`。
- 在 "404" 文字上方（同一个居中容器中）渲染一个白色（`#FFFFFF`）椭圆：一个带有 `rounded-full`、高度 `h-[22vh] sm:h-[26vh] md:h-[50vh]`、宽度 `clamp(120px, 20vw, 400px)` 的 `div`，使用同一个动态 `scaleY` 值进行纵向缩放，并设置 `transformOrigin: center`。
- 整个背景层（文字 + 椭圆）包裹在一个带有 `opacity: 0.8` 和 CSS 遮罩的容器中，该遮罩在底部渐变为透明：`mask-image: linear-gradient(to bottom, black 40%, transparent 95%)`（同时为 Safari 添加 `-webkit-mask-image`）。
- 此层使用 `absolute inset-0 pointer-events-none`。

---

**导航栏：**

- 使用 `relative z-20`，flex row，项目居中，`justify-between`，内边距为 `px-4 sm:px-6 md:px-12 py-4 sm:py-5`。
- **Logo（左侧）：** 一个由白色圆点组成的 2x2 网格（`grid-cols-2 gap-0.5`），每个圆点使用 `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`。旁边是文字 "TinyTrails"，使用 `text-white font-bold text-lg sm:text-xl ml-1`。
- **桌面端导航链接（中间/右侧）：** 在移动端隐藏（`hidden md:flex`），显示一排胶囊按钮，使用 `gap-1`。项目为："About Us"、"Programs"、"Reviews"、"FAQ"、"Contacts"。每项都是一个 `<a>`，使用 `px-4 py-1.5 text-sm font-medium rounded-full bg-white`，文字颜色为 `#F16524`，并带有 `hover:opacity-90 transition-colors`。
- **Menu 按钮（右侧）：** 一个胶囊按钮，使用 `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white`，背景色为 `#F16524`。包含一个 Lucide `Menu` icon（`w-4 h-4`）和文字 "Menu"（`text-sm font-medium hidden sm:inline`）。带有 `hover:opacity-90 transition-colors`。

---

**移动端菜单遮罩层：**

- 固定全屏（`fixed inset-0 z-50`），可切换可见性。过渡：`duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`。
- **背景遮罩：** `absolute inset-0 bg-black/40 backdrop-blur-sm`，通过时长 500ms 的 `opacity` 过渡淡入/淡出。点击时关闭菜单。
- **面板：** 从右侧滑入。使用 `absolute top-0 right-0 h-full w-full sm:w-[380px]`，在关闭时的 `translate-x-full` 和打开时的 `translate-x-0` 之间切换。背景：`linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`。
  - **面板页眉：** 与导航栏相同的 Logo（2x2 白色圆点 + "TinyTrails" 白色粗体文字）。关闭按钮：`w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30`，带有 Lucide `X` icon（`w-5 h-5`）。
  - **菜单项：** 使用交错动画。每个项目使用 `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`。打开时：`opacity-100 translate-y-0`；关闭时：`opacity-0 translate-y-4`。打开时每项的过渡延迟为 `150 + i * 60`ms，关闭时为 `0ms`。
  - **底部 CTA：** 绝对定位在底部（`absolute bottom-0 left-0 right-0 p-6`）。一个胶囊链接：`w-full py-4 rounded-full bg-white font-semibold text-base`，文字颜色为 `#F16524`，带有 `hover:scale-[1.02]`。包含 Lucide `ArrowLeft` icon + "Back to Home"。打开时延迟 450ms 淡入。
- 菜单打开时锁定 body 滚动（`overflow: hidden`）。

---

**中央视频：**

- 一个绝对定位的容器（`absolute inset-0 flex items-center justify-center pointer-events-none`），使用 `margin-top: calc(-6vh - 40px)` 将其向上移动。
- 内部是一个响应式容器：`w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`。
- 包含一个带有 `autoPlay loop muted playsInline` 的 `<video>` 元素，class 为 `w-full h-full object-contain pointer-events-none mix-blend-darken`。
- **视频源 URL：** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_234424_b1332b69-2e69-4302-8dbc-40f86846afbd.mp4`

---

**底部内容：**

- 使用 `relative z-30 mt-auto pb-8 sm:pb-16 flex flex-col items-center text-center px-4`。
- 标题："Oops, something went wrong!"，使用 `text-white text-lg sm:text-xl md:text-2xl font-medium mb-3 sm:mb-4`。
- 按钮/链接：一个 `<a href="/">` 胶囊按钮，使用 `inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 rounded-full text-white font-semibold text-sm sm:text-base`，背景为 `#F16524`。带有 `hover:scale-105 hover:shadow-lg transition-all`。包含 Lucide `ArrowLeft` icon（`w-4 h-4 sm:w-5 sm:h-5`）+ "Back to Home"。

---

**全局 CSS（`index.css`）：**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

---

**HTML HEAD：**

- 从 Google Fonts 加载 Inter 字体：`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap`，并预连接到 `fonts.googleapis.com` 和 `fonts.gstatic.com`。
- 标题："404 - Page Not Found"。

---

**关键配色：**
- 页面渐变：`#FF8233` 到 `#FDAC55`
- 强调色/按钮：`#F16524`
- 文字与形状：`#FFFFFF`
- 菜单渐变：`#FF6B1A` 到 `#FF9642`
- 菜单遮罩层背景：`black/40`，带有 `backdrop-blur-sm`
- 菜单项背景：`white/10`，悬停时为 `white/20`

---

**依赖项：** React、Tailwind CSS、Lucide React（`ArrowLeft`、`Menu`、`X` icons）。Vite 构建系统。不使用其他库。

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

适用模型与稳定度

建议模型

待补充模型