已验证 · 可安装 Agent Skill
SKILL.md + .skill把这套方法装进你的 Agent。
npx skills add LearnPrompt/goodcase-lite --skill web-3d-motion-hero-by-197q59i --global --copy --yes --full-depth加载中…
Skill · 作者方法
从 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 证据
提示语
无限量的动画 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,视
提示语
❤️🔥 一键获取所有令人惊艳的动效网站提示词: 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,完全圆角(药丸