Orbis 你好

Prompt

---

> **构建此区块前的设置要求：**
>
> **Google Fonts** -- 在 `index.html` 的 `<head>` 中加载以下内容：
> ```html
> <link rel="preconnect" href="https://fonts.googleapis.com" />
> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap" rel="stylesheet" />
> ```
>
> **Tailwind 配置** -- 使用以下精确的自定义值扩展 `theme`：
> ```js
> fontFamily: {
>   grotesk: ['Anton', 'sans-serif'],
>   condiment: ['Condiment', 'cursive'],
> },
> colors: {
>   cream: '#EFF4FF',
>   neon: '#6FFF00',
> }
> ```
> `font-grotesk` 映射到 **Anton**（一种高挑、窄体的展示字体）。`font-condiment` 映射到 **Condiment**（一种流畅的手写体/脚本字体）。
>
> **此区块不使用其他 CSS 类或动画。** 没有 keyframes、transitions 或 hover states。这是一个静态布局。
>
> ---
>
> **使用 Tailwind CSS 将以下区块构建为 React 组件：**
>
> 一个带有 `relative overflow-hidden min-h-screen` 类的 `<section>` 标签。不设置背景颜色——背景是全屏视频。
>
> **背景视频：** 一个绝对定位的 `<video>` 元素，覆盖整个区块。类：`absolute inset-0 w-full h-full object-cover`。属性：`autoPlay`、`loop`、`muted`、`playsInline`。`<source>` 元素指向：
> ```
> https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
> ```
> 并设置 `type="video/mp4"`。
>
> **内容容器：** 一个位于视频上方的 `<div>`，类为：`relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`。
>
> 内容容器内有**两行**：
>
> ---
>
> **第 1 行（顶部）：** 一个带有 `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——标题：** 一个带有 `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative` 类的 `<h2>`。文本内容为：
> ```
> 你好！<br />
> 我是 orbis
> ```
>（即第 1 行是“你好！”，第 2 行是“我是 orbis”，两行由 `<br />` 分隔。Tailwind 会将所有内容渲染为大写，因此显示为“你好！”和“我是 ORBIS”。）
>
> **在 `<h2>` 内部**，文本之后有一个绝对定位的 `<span>`，内容为 **“Orbis”**。该 span 的类为：`font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`。
>
> 该 span 的关键细节：
> - `normal-case` 会覆盖父元素的 uppercase，因此它会以 Condiment 手写字体渲染为“Orbis”（大写 O，小写 rbis）。
> - `text-neon` = `#6FFF00`（亮绿色）。
> - `mix-blend-exclusion` 使绿色文本与视频背景产生混合效果。
> - `absolute right-[-8px] bottom-[-20px]`（响应式：`sm:bottom-[-30px] md:bottom-[-40px]`）将其定位在父级标题的下方偏右处，并与上方的“orbis”一词重叠。
> - `-rotate-1` 使其略微逆时针倾斜（-1 度）。
> - `leading-[0.79]` 设置非常紧凑的行高。`tracking-[0.03em]` 添加细微的字间距。
> - `opacity-90` 使其具有 90% 的不透明度。
>
> **子元素 B——段落：** 一个带有 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed` 类的 `<p>`。文本为：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
>（`font-mono` 使用浏览器默认的等宽字体。`leading-relaxed` = 1.625 行高。）
>
> ---
>
> **第 2 行（底部）：** 一个带有 `flex justify-between items-start` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——左侧文本列**（始终可见）：一个带有 `flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，每个标签的类均为 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`。两者都包含相同的文本：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
> 关键细节：默认颜色为 `text-[#010828]`（与页面背景匹配、近乎不可见的深海军蓝），在大屏幕上切换为 `lg:text-cream`（`#EFF4FF`）。与 `opacity-10` 结合后，该文本会极其微弱、如幽灵般若隐若现——几乎不可见，作为细微的纹理元素，而非可读内容。
>
> **子元素 B——右侧文本列**（仅桌面端）：一个带有 `hidden lg:flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，其类和文本与子元素 A 完全相同。此列在手机/平板设备上隐藏，仅在 `lg:`（1024px+）屏幕上显示。
>
> ---
>
> **此区块没有 animations、transitions、hover effects、scroll effects 或 JavaScript interactions。** 它完全是一个带循环背景视频的静态布局。唯一的“动态”来自自动播放的视频本身。

---

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

适用模型与稳定度

建议模型

待补充模型

稳定度: 94 / 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

---

> **构建此区块前的设置要求：**
>
> **Google Fonts** -- 在 `index.html` 的 `<head>` 中加载以下内容：
> ```html
> <link rel="preconnect" href="https://fonts.googleapis.com" />
> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap" rel="stylesheet" />
> ```
>
> **Tailwind 配置** -- 使用以下精确的自定义值扩展 `theme`：
> ```js
> fontFamily: {
>   grotesk: ['Anton', 'sans-serif'],
>   condiment: ['Condiment', 'cursive'],
> },
> colors: {
>   cream: '#EFF4FF',
>   neon: '#6FFF00',
> }
> ```
> `font-grotesk` 映射到 **Anton**（一种高挑、窄体的展示字体）。`font-condiment` 映射到 **Condiment**（一种流畅的手写体/脚本字体）。
>
> **此区块不使用其他 CSS 类或动画。** 没有 keyframes、transitions 或 hover states。这是一个静态布局。
>
> ---
>
> **使用 Tailwind CSS 将以下区块构建为 React 组件：**
>
> 一个带有 `relative overflow-hidden min-h-screen` 类的 `<section>` 标签。不设置背景颜色——背景是全屏视频。
>
> **背景视频：** 一个绝对定位的 `<video>` 元素，覆盖整个区块。类：`absolute inset-0 w-full h-full object-cover`。属性：`autoPlay`、`loop`、`muted`、`playsInline`。`<source>` 元素指向：
> ```
> https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
> ```
> 并设置 `type="video/mp4"`。
>
> **内容容器：** 一个位于视频上方的 `<div>`，类为：`relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`。
>
> 内容容器内有**两行**：
>
> ---
>
> **第 1 行（顶部）：** 一个带有 `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——标题：** 一个带有 `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative` 类的 `<h2>`。文本内容为：
> ```
> 你好！<br />
> 我是 orbis
> ```
>（即第 1 行是“你好！”，第 2 行是“我是 orbis”，两行由 `<br />` 分隔。Tailwind 会将所有内容渲染为大写，因此显示为“你好！”和“我是 ORBIS”。）
>
> **在 `<h2>` 内部**，文本之后有一个绝对定位的 `<span>`，内容为 **“Orbis”**。该 span 的类为：`font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`。
>
> 该 span 的关键细节：
> - `normal-case` 会覆盖父元素的 uppercase，因此它会以 Condiment 手写字体渲染为“Orbis”（大写 O，小写 rbis）。
> - `text-neon` = `#6FFF00`（亮绿色）。
> - `mix-blend-exclusion` 使绿色文本与视频背景产生混合效果。
> - `absolute right-[-8px] bottom-[-20px]`（响应式：`sm:bottom-[-30px] md:bottom-[-40px]`）将其定位在父级标题的下方偏右处，并与上方的“orbis”一词重叠。
> - `-rotate-1` 使其略微逆时针倾斜（-1 度）。
> - `leading-[0.79]` 设置非常紧凑的行高。`tracking-[0.03em]` 添加细微的字间距。
> - `opacity-90` 使其具有 90% 的不透明度。
>
> **子元素 B——段落：** 一个带有 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed` 类的 `<p>`。文本为：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
>（`font-mono` 使用浏览器默认的等宽字体。`leading-relaxed` = 1.625 行高。）
>
> ---
>
> **第 2 行（底部）：** 一个带有 `flex justify-between items-start` 类的 `<div>`。包含两个子元素：
>
> **子元素 A——左侧文本列**（始终可见）：一个带有 `flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，每个标签的类均为 `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`。两者都包含相同的文本：
> > “一个超越时间与地点而固定存在的数字对象。对空间中距离、形态与寂静的探索”
>
> 关键细节：默认颜色为 `text-[#010828]`（与页面背景匹配、近乎不可见的深海军蓝），在大屏幕上切换为 `lg:text-cream`（`#EFF4FF`）。与 `opacity-10` 结合后，该文本会极其微弱、如幽灵般若隐若现——几乎不可见，作为细微的纹理元素，而非可读内容。
>
> **子元素 B——右侧文本列**（仅桌面端）：一个带有 `hidden lg:flex flex-col gap-5 max-w-[335px]` 类的 `<div>`。包含**两个相同的 `<p>` 标签**，其类和文本与子元素 A 完全相同。此列在手机/平板设备上隐藏，仅在 `lg:`（1024px+）屏幕上显示。
>
> ---
>
> **此区块没有 animations、transitions、hover effects、scroll effects 或 JavaScript interactions。** 它完全是一个带循环背景视频的静态布局。唯一的“动态”来自自动播放的视频本身。

---

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

适用模型与稳定度

建议模型

待补充模型