已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-197q59i --global --copy --yes --full-depth加载中…
创作者方法 · 非官方归纳
基于公开证据的非官方归纳，不代表作者本人发布或背书。
从 viktoroddy 的 14 个已发布 Case 中归纳出的「3D / 动效 Hero」方法。
14 Cases · 1 位作者 · AI 编程(UI) · 最近例证 2026/07/28
已验证 · 可安装 Agent Skill
SKILL.md + .skillnpx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-197q59i --global --copy --yes --full-depth方法骨架
Case 证据
@viktoroddy 使用 React · Vite · TypeScript完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
无限量的动画 AI Hero —— 这是我使用的确切提示词： 用 React、Vite、TypeScript、Tailwind CSS 和 motion/react（Framer Motion）库为一个太空旅行网站构建一个全屏电影感 Hero 区域。严格按照下面的每一处细节还原。 1. 字体 从 Google Fonts 引入 Instrument Serif（斜体）和 Barlow（300、400、500、600 字重）： @import url(''); 在 ta
@viktoroddy 使用 Fable · Claude Opus完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
❤️🔥 一键获取所有高级 AI 网站的提示词： 用 React + TypeScript + Vite + Tailwind CSS v4 构建一个滚动驱动的 Hero 落地页。页面为黑色背景，白色文字，包含 3 个主要元素：一个随滚动擦动的背景视频、一个滚动时淡出的漂浮文字叠加层、一个药丸形状的导航栏，以及一个从下方滑入的玻璃面板。 --- ## 视频（背景，随滚动擦动） URL：`` - 固定定位，铺满整个视口，z-index 0，外层容器缩放 1.05，视
@viktoroddy 使用 Claude Mythos完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
❤️🔥 一键获取所有令人惊艳的动效网站提示词： http:// 用 React 18 + TypeScript + Vite + Tailwind CSS 和 lucide-react 图标，为一个名为 Lithos 的地质品牌构建一个全屏深色主题 Hero 区域。招牌功能是一个跟随光标的聚光灯效果，通过一个柔和的圆形遮罩，在底图之上揭示出第二张图片。请精确匹配以下每一处细节。 ### 字体 在 `src/index.css` 顶部加入以下内容，然后写 `@tailw
提示语
一键获取所有令人惊艳的动效网站提示词： 提示词： 用 React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react 构建一个单页落地页。整个页面背景为 bg-black。通过 Google Fonts 加载的字体是 Instrument Serif（斜体和常规体）。在 index.css 中引入它： @import url(''); 液态玻璃 CSS（写在 index.css 的 @lay
@viktoroddy 使用 Nano Banana · Flow · AntiGravity完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
提示词： 为一家名为「Logoisum」的视频剪辑机构构建一个高级、高端的 Hero 区域，具体规格如下： 背景：实现一个全屏循环播放的视频背景，使用这个 URL：。视频必须静音、自动播放，并设置为 object-cover 以铺满整个版块，不加任何颜色叠加层。 导航栏：一个悬浮的白色导航栏，圆角 rounded-[16px]，带细微阴影。 左侧：机构 Logo。 中间：一个菜单，包含「About」「Works」「Services」和「Testimonial」链接，字
@viktoroddy 使用 Grok Imagine · Grok Build完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
❤️🔥 一键获取令人惊艳动效网站的完整提示词： 用 React、Tailwind CSS 和 Lucide React 图标为一个名为「Veldara」的产品创建一个全视口 Hero 区域。页面应是单屏落地页，不需要滚动。 > **视频背景：** > - 使用这个确切的视频 URL，不要替换成任何其他地址：`` > - 视频容器为 `position: absolute; inset: 0; z-index: 0`（不是负 z-index，也不是 fixed），作为根
@viktoroddy 使用 Claude · Fable完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： > 用 **React + TypeScript + Vite + Tailwind CSS + lucide-react** 为一个名为 **「Aethera」**（一家专注放贷业务的金融科技 / AI 公司）构建一个单页落地页。页面背景为白色（`#fff`），不使用滚动动画——只做干净、极简、编辑风格的设计。 > > ### 字体 > - **标题 / 衬线字体：** 「P22 Mackinac W01 Book」，从 `` 加载
@viktoroddy 使用 Nano Banana · Kling · Claude完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： 提示词：电影感 Hero 区域，带循环视频背景 用 React + Vite + Tailwind CSS + TypeScript 创建一个全屏单页 Hero 区域，具体规格如下： 字体： 展示文字（标题、Logo）：Instrument Serif 正文（导航、描述）：Inter 在 /src/styles/fonts.css 中引入这两种字体 视频背景： URL： 位置：`top: '300px'`，`inset: 'au
@viktoroddy 使用 GPT Image 2 · Veo 3 · Lovable完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： # 提示词：精确复刻这个落地页 为一个名为「Mindloop」的用心经营的通讯平台构建一个生产级质量的营销落地页，使用 Vite + React + TypeScript 应用，配 Tailwind CSS、shadcn/ui、framer-motion 和 lucide-react。整体美学是平静、编辑感、电影感——黑色背景、白色前景、衬线斜体点缀、环境氛围的循环背景视频，以及交互表面上标志性的「液态玻璃」效果。不使用紫色 / 靛
@viktoroddy 使用 Lovable · Nano Banana · Veo 3完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： 创建一个单页 Hero 区域，带全屏循环背景视频、玻璃拟态导航和电影感排版。使用 React + Vite + Tailwind CSS + TypeScript，配 shadcn/ui。 视频背景： 全屏 <video> 元素，带 autoPlay、loop、muted、playsInline 来源 URL： 定位为 absolute inset-0 w-full h-full object-cover z-0 字体： 从
@viktoroddy 使用 Claude Code · Nano Banana Pro · Kling完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
一键获取所有令人惊艳动效网站的提示词： 复刻提示词 提示词： 为一家名为「Aethera」的创意工作室构建一个 React + Vite + TypeScript + Tailwind CSS 落地页。网站仅使用浅色模式（不做暗色模式）。使用两种 Google Fonts：Instrument Serif（展示 / 标题）和 Inter（正文）。所有图标使用 lucide-react。网站有一个电影感视频 Hero，下方还有 7 个版块。所有版块都通过一个 Inters
@viktoroddy 使用 AntiGravity · Gemini 3.1 Pro完成的网页案例，包含公开结果、完整 Prompt 与原始来源。
提示语
提示词： 构建一个 Hero 区域，具体规格如下： 整体布局： 全宽版块，背景色 #000000（纯黑） overflow hidden 所有内容背后播放背景视频（详情见下） 背景视频： 来源： 自动播放、循环、静音、playsInline 缩放到容器的 120%（宽度和高度均为 120%） 水平居中，焦点锚定在底部 位于所有内容之下（最低层级） 模糊背景元素： 绝对定位，水平居中，顶部偏移约 215px 尺寸：宽 801px × 高 384px，完全圆角（药丸
作者证据
Skill 是派生阅读层，所有判断都必须能回到已发布 Case。