Power AI

Prompt

创建一个全屏深色 hero section，其中包含循环背景视频、navbar、headline、subtitle、CTA button，以及底部的 logo marquee。以下是确切规格：

主题与颜色（index.css CSS variables）：
背景：260 87% 3%（深邃的暗蓝紫色）
前景：40 6% 95%（灰白色）
Hero 副文本：40 6% 82%
正文字体：Geist Sans（通过 @fontsource/geist-sans）
Headline 字体：General Sans（从 Fontshare 加载：https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap）

背景视频（Index page wrapper）：
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4
采用 absolute 定位，设置 inset-0 w-full h-full object-cover，位于所有内容之后
初始 opacity: 0
由自定义 JS 控制的淡化循环：开始时用 0.5s 淡入，结束时用 0.5s 淡出，并使用 requestAnimationFrame。触发 ended 时，opacity 重置为 0，等待 100ms，然后从 0 开始重新播放
视频上不使用渐变 overlays
wrapper div 设置 overflow-hidden，hero 内容位于其上方的 relative z-10 div 中

模糊 overlay shape（在内容后方居中）：
w-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px]
采用绝对定位，设置 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
pointer-events-none
hero section 设置 overflow-visible，使模糊效果不被裁剪

Navbar：
全宽，py-5 px-8，flex row 并设置 justify-between
左侧：logo image（src/assets/logo.png，高度 32px）
中间：nav items——“功能”（带 ChevronDown）、“解决方案”、“方案”、“学习”（带 ChevronDown）。每项都是 button，使用 text-foreground/90 和 hover transition
右侧：“注册”button，使用 heroSecondary variant，rounded-full px-4 py-2
Navbar 下方：一条 1px divider line，渐变为 from-transparent via-foreground/20 to-transparent，偏移 mt-[3px]

Hero 内容（通过 flex-1 在剩余空间中垂直居中）：
Headline：“Power AI”，设置 text-[220px]、font-normal、leading-[1.02]、tracking-[-0.024em]，font-family General Sans
“Power ”使用普通的 text-foreground
“AI”使用 bg-clip-text text-transparent，backgroundImage：linear-gradient(to left, #6366f1, #a855f7, #fcd34d)（靛蓝 → 紫色 → 琥珀色）
Subtitle：“人才招聘领域有史以来部署的 / 最强大 AI”——text-hero-sub、text-lg、leading-8、max-w-md、mt-[9px]、opacity-80
CTA：“预约咨询”button，使用 heroSecondary variant，px-[29px] py-[24px]，mt-[25px]

Logo marquee（固定在 hero 底部，pb-10）：
容器：max-w-5xl mx-auto
左侧：静态文字“深受全球 / 各地品牌信赖”，使用 text-foreground/50 text-sm
右侧：无限滚动 marquee，包含 logos：Vortex、Nimbus、Prysma、Cirrus、Kynder、Halcyn（复制一组以实现无缝循环）
每个 logo：一个 liquid-glass 24x24 rounded-lg icon，显示名称的首字母，旁边是使用 text-base font-semibold text-foreground 的名称
Marquee 动画：translateX(0%) → translateX(-50%)，20s linear infinite
logos 之间设置 gap-16，文字与 marquee 之间设置 gap-12

Liquid glass utility class（位于 index.css）：
.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

Section 结构：min-h-screen flex flex-col——navbar 位于顶部，内容通过 flex-1 flex items-center justify-center 居中，marquee 位于底部。

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

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

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

创建一个全屏深色 hero section，其中包含循环背景视频、navbar、headline、subtitle、CTA button，以及底部的 logo marquee。以下是确切规格：

主题与颜色（index.css CSS variables）：
背景：260 87% 3%（深邃的暗蓝紫色）
前景：40 6% 95%（灰白色）
Hero 副文本：40 6% 82%
正文字体：Geist Sans（通过 @fontsource/geist-sans）
Headline 字体：General Sans（从 Fontshare 加载：https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap）

背景视频（Index page wrapper）：
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4
采用 absolute 定位，设置 inset-0 w-full h-full object-cover，位于所有内容之后
初始 opacity: 0
由自定义 JS 控制的淡化循环：开始时用 0.5s 淡入，结束时用 0.5s 淡出，并使用 requestAnimationFrame。触发 ended 时，opacity 重置为 0，等待 100ms，然后从 0 开始重新播放
视频上不使用渐变 overlays
wrapper div 设置 overflow-hidden，hero 内容位于其上方的 relative z-10 div 中

模糊 overlay shape（在内容后方居中）：
w-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px]
采用绝对定位，设置 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
pointer-events-none
hero section 设置 overflow-visible，使模糊效果不被裁剪

Navbar：
全宽，py-5 px-8，flex row 并设置 justify-between
左侧：logo image（src/assets/logo.png，高度 32px）
中间：nav items——“功能”（带 ChevronDown）、“解决方案”、“方案”、“学习”（带 ChevronDown）。每项都是 button，使用 text-foreground/90 和 hover transition
右侧：“注册”button，使用 heroSecondary variant，rounded-full px-4 py-2
Navbar 下方：一条 1px divider line，渐变为 from-transparent via-foreground/20 to-transparent，偏移 mt-[3px]

Hero 内容（通过 flex-1 在剩余空间中垂直居中）：
Headline：“Power AI”，设置 text-[220px]、font-normal、leading-[1.02]、tracking-[-0.024em]，font-family General Sans
“Power ”使用普通的 text-foreground
“AI”使用 bg-clip-text text-transparent，backgroundImage：linear-gradient(to left, #6366f1, #a855f7, #fcd34d)（靛蓝 → 紫色 → 琥珀色）
Subtitle：“人才招聘领域有史以来部署的 / 最强大 AI”——text-hero-sub、text-lg、leading-8、max-w-md、mt-[9px]、opacity-80
CTA：“预约咨询”button，使用 heroSecondary variant，px-[29px] py-[24px]，mt-[25px]

Logo marquee（固定在 hero 底部，pb-10）：
容器：max-w-5xl mx-auto
左侧：静态文字“深受全球 / 各地品牌信赖”，使用 text-foreground/50 text-sm
右侧：无限滚动 marquee，包含 logos：Vortex、Nimbus、Prysma、Cirrus、Kynder、Halcyn（复制一组以实现无缝循环）
每个 logo：一个 liquid-glass 24x24 rounded-lg icon，显示名称的首字母，旁边是使用 text-base font-semibold text-foreground 的名称
Marquee 动画：translateX(0%) → translateX(-50%)，20s linear infinite
logos 之间设置 gap-16，文字与 marquee 之间设置 gap-12

Liquid glass utility class（位于 index.css）：
.liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

Section 结构：min-h-screen flex flex-col——navbar 位于顶部，内容通过 flex-1 flex items-center justify-center 居中，marquee 位于底部。

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

适用模型与稳定度

建议模型

待补充模型