数字纪元

Prompt

使用 React、TypeScript、Tailwind CSS v4 和 Motion 构建一个现代化、高性能的落地页区块。应用程序应严格符合以下规格：
1. 依赖项与设置
库：安装 lucide-react、motion、clsx 和 tailwind-merge。
字体与 CSS：在 index.css 中从 Google Fonts 导入 Inter 和 Outfit 字体：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');
在 CSS 中配置 Tailwind 主题，将 Inter 用作 --font-sans，将 Outfit 用作 --font-display。
全局 body 背景应为 #f9fafb。
2. 主视觉容器与视频背景
创建一个具有以下精确类名的主视觉区块容器：relative w-full max-w-[1400px] mx-auto rounded-[48px] bg-white border border-slate-200/50 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.03)] overflow-hidden h-[600px] flex flex-col。
在其内部，为背景视频添加一个绝对定位的底层（absolute inset-0 pointer-events-none z-0 overflow-hidden select-none）。
video 标签必须精确指向此 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260505_101331_74f9b798-3f00-4e86-8a01-377aa16ffeaa.mp4。它必须包含 autoPlay、loop、muted 和 playsInline 属性，并使用以下类：w-full h-full object-cover scale-105 transition-transform duration-1000。不使用遮罩层。
3. 主视觉文字内容
创建一个使用相对定位的内容容器（z-20 flex-1 px-8 md:px-16 pt-12 md:pt-16 flex flex-col items-start）。
使用 motion/react 中的 motion.div 为文字层添加入场动画（淡入并轻微向上滑动）。
标题："Foundation of the<br />new digital epoch"。应使用 font-display 字体，字号为 text-[42px] md:text-[56px]，中等字重，紧凑字间距，颜色为 #0a1b33。
副标题："Designing products, powering ecosystems and laying the foundation of a decentralized web for enterprises, builders and communities alike."。应使用 font-sans，字号为 text-[14px] md:text-[15px]，颜色为 #64748b。
联系按钮：文字为 "Contact Us"，使用深色背景（bg-[#0a152d]）、白色文字和 rounded-full，并通过 motion.button 实现 hover 缩放动画。
4. 底部悬浮导航栏
在主视觉底部居中创建一个绝对定位的导航栏容器：absolute bottom-10 left-1/2 -translate-x-1/2 z-30。
nav 元素应使用 motion.nav 实现淡入并向上滑动（延迟至文字之后）。它必须具有以下类：flex items-center bg-white/90 backdrop-blur-2xl px-1.5 py-1.5 rounded-full shadow-[0_12px_40px_rgba(0,0,0,0.08)] border border-slate-200/40。
导航元素：
左侧放置一个小型圆形 logo 占位符（w-9 h-9 bg-white border-slate-100 shadow-sm），其中包含星形字符 "✦"。
两个标准文字按钮："Products" 和 "Docs"（text-[12px] font-semibold text-slate-500 hover:text-[#0a1b33]）。
右侧放置一个 "Get in touch" 按钮，其中包含文字和一个小型 ChevronRight（来自 lucide-react）。样式与 marquee 卡片完全相同：bg-white px-5 py-2 rounded-full text-[12px] font-semibold text-[#0a1b33] border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all。
5. 无缝 Marquee Logo 滚动组件
在主视觉容器下方（mt-10）添加一个自定义的高性能 Marquee Scroller 组件。
滚动组件必须使用纯 CSS @keyframes 动画（transform: translateX(0) 到 translateX(-50%)）实现无限滚动，并在 hover 时暂停。它需要使用左右遮罩渐变（maskImage linear-gradient，在边缘淡出至透明）。滚动组件上方不要添加标题或描述文字。
Logo 列表：提供一个包含 8 个对象的数组，每个对象含有来自 svgl.app 的 src URL、alt 名称和十六进制渐变对象：
Procure（procure.svg，蓝色渐变）
Shopify（shopify.svg，黄色渐变）
Blender（blender.svg，蓝色渐变）
Figma（figma.svg，紫色渐变）
Spotify（spotify.svg，粉色/红色渐变）
Lottielab（lottielab.svg，黄色/绿色渐变）
Google Cloud（google-cloud.svg，浅蓝色渐变）
Bing（bing.svg，青色/蓝绿色渐变）
将列表以内联形式渲染两次，以确保无缝循环。
卡片设计：让每个 logo 的容器卡片与导航栏的 "Get in touch" 按钮样式完全一致。容器类必须精确为：group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden。
在卡片内部添加一个绝对定位的 div，使用指定的渐变颜色，初始缩放为 1.5 且 opacity 为 0，在 group-hover 时变为 scale 1 和 opacity 100。
image 标签应在 hover 时反相/变为黑色（group-hover:brightness-0 group-hover:invert）。

溯源 · 已核对已发布案例的 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

使用 React、TypeScript、Tailwind CSS v4 和 Motion 构建一个现代化、高性能的落地页区块。应用程序应严格符合以下规格：
1. 依赖项与设置
库：安装 lucide-react、motion、clsx 和 tailwind-merge。
字体与 CSS：在 index.css 中从 Google Fonts 导入 Inter 和 Outfit 字体：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');
在 CSS 中配置 Tailwind 主题，将 Inter 用作 --font-sans，将 Outfit 用作 --font-display。
全局 body 背景应为 #f9fafb。
2. 主视觉容器与视频背景
创建一个具有以下精确类名的主视觉区块容器：relative w-full max-w-[1400px] mx-auto rounded-[48px] bg-white border border-slate-200/50 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.03)] overflow-hidden h-[600px] flex flex-col。
在其内部，为背景视频添加一个绝对定位的底层（absolute inset-0 pointer-events-none z-0 overflow-hidden select-none）。
video 标签必须精确指向此 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260505_101331_74f9b798-3f00-4e86-8a01-377aa16ffeaa.mp4。它必须包含 autoPlay、loop、muted 和 playsInline 属性，并使用以下类：w-full h-full object-cover scale-105 transition-transform duration-1000。不使用遮罩层。
3. 主视觉文字内容
创建一个使用相对定位的内容容器（z-20 flex-1 px-8 md:px-16 pt-12 md:pt-16 flex flex-col items-start）。
使用 motion/react 中的 motion.div 为文字层添加入场动画（淡入并轻微向上滑动）。
标题："Foundation of the<br />new digital epoch"。应使用 font-display 字体，字号为 text-[42px] md:text-[56px]，中等字重，紧凑字间距，颜色为 #0a1b33。
副标题："Designing products, powering ecosystems and laying the foundation of a decentralized web for enterprises, builders and communities alike."。应使用 font-sans，字号为 text-[14px] md:text-[15px]，颜色为 #64748b。
联系按钮：文字为 "Contact Us"，使用深色背景（bg-[#0a152d]）、白色文字和 rounded-full，并通过 motion.button 实现 hover 缩放动画。
4. 底部悬浮导航栏
在主视觉底部居中创建一个绝对定位的导航栏容器：absolute bottom-10 left-1/2 -translate-x-1/2 z-30。
nav 元素应使用 motion.nav 实现淡入并向上滑动（延迟至文字之后）。它必须具有以下类：flex items-center bg-white/90 backdrop-blur-2xl px-1.5 py-1.5 rounded-full shadow-[0_12px_40px_rgba(0,0,0,0.08)] border border-slate-200/40。
导航元素：
左侧放置一个小型圆形 logo 占位符（w-9 h-9 bg-white border-slate-100 shadow-sm），其中包含星形字符 "✦"。
两个标准文字按钮："Products" 和 "Docs"（text-[12px] font-semibold text-slate-500 hover:text-[#0a1b33]）。
右侧放置一个 "Get in touch" 按钮，其中包含文字和一个小型 ChevronRight（来自 lucide-react）。样式与 marquee 卡片完全相同：bg-white px-5 py-2 rounded-full text-[12px] font-semibold text-[#0a1b33] border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all。
5. 无缝 Marquee Logo 滚动组件
在主视觉容器下方（mt-10）添加一个自定义的高性能 Marquee Scroller 组件。
滚动组件必须使用纯 CSS @keyframes 动画（transform: translateX(0) 到 translateX(-50%)）实现无限滚动，并在 hover 时暂停。它需要使用左右遮罩渐变（maskImage linear-gradient，在边缘淡出至透明）。滚动组件上方不要添加标题或描述文字。
Logo 列表：提供一个包含 8 个对象的数组，每个对象含有来自 svgl.app 的 src URL、alt 名称和十六进制渐变对象：
Procure（procure.svg，蓝色渐变）
Shopify（shopify.svg，黄色渐变）
Blender（blender.svg，蓝色渐变）
Figma（figma.svg，紫色渐变）
Spotify（spotify.svg，粉色/红色渐变）
Lottielab（lottielab.svg，黄色/绿色渐变）
Google Cloud（google-cloud.svg，浅蓝色渐变）
Bing（bing.svg，青色/蓝绿色渐变）
将列表以内联形式渲染两次，以确保无缝循环。
卡片设计：让每个 logo 的容器卡片与导航栏的 "Get in touch" 按钮样式完全一致。容器类必须精确为：group relative h-24 w-40 shrink-0 flex items-center justify-center rounded-full bg-white border border-slate-200/60 shadow-sm hover:border-slate-300 transition-all overflow-hidden。
在卡片内部添加一个绝对定位的 div，使用指定的渐变颜色，初始缩放为 1.5 且 opacity 为 0，在 group-hover 时变为 scale 1 和 opacity 100。
image 标签应在 hover 时反相/变为黑色（group-hover:brightness-0 group-hover:invert）。

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

适用模型与稳定度

建议模型

待补充模型