径向图

Prompt

使用 React、TypeScript、Tailwind CSS 3 和 Framer Motion，将“我们的综合品牌塑造方法”版块构建为 React 组件。该版块采用深色背景（`#0f0f0f`）和白色文本。字体为 `'DM Sans', sans-serif`（通过 Google Fonts 加载：`https://fonts.googleapis.com/css?family=DM+Sans:500,400`）。以下是确切规范：

---

**整体版块容器：**

- `<section>` 使用 `overflow-x-hidden`、`bg-[#0f0f0f]`、`text-white`，内联样式为 `fontFamily: "'DM Sans', sans-serif"`

- 内层包装容器：`mx-auto max-w-7xl px-6 py-24 sm:px-10 lg:px-16 lg:py-32`

- 所有动画均使用缓动曲线 `[0.22, 1, 0.36, 1]`，并通过 Framer Motion 的 `useInView` 配合 `{ once: true, margin: "-60px" }`，在滚动进入视口时仅触发一次

---

**页眉（版块顶部）：**

- Flex row（`flex items-start gap-4`），使用 `mb-20`

- 两行垂直堆叠的文本：

  - 第 1 行：“我们的综合”，使用 `text-[#6e6e6e]`（灰色）、`font-light`，字号 `clamp(2rem, 3.4vw, 2.6rem)`、`leading-[1.18]`、`tracking-[-0.01em]`。从 `opacity:0, y:20` 动画至可见，持续 `0.7s`。

  - 第 2 行：“品牌塑造方法”，使用 `text-white`，字体样式相同。动画相同，但设置 `delay: 0.1s`。

- 右侧放置一个小型方形按钮：`h-7 w-7`、`border border-white/20`，包含加号图标（SVG：两条垂直相交的线组成 +，`stroke="currentColor"`、`strokeWidth="1.3"`、viewBox `0 0 12 12`）。文本颜色为 `text-white/70`，hover：`bg-white/10 text-white`。从 scale 0.8、opacity 0 动画至 1，delay `0.25s`。

---

**内容行（页眉下方）：**

- `flex flex-col gap-12 lg:flex-row lg:items-start lg:gap-10`

- 左侧：`flex min-w-0 flex-1 flex-col gap-8 sm:flex-row sm:items-start sm:gap-10`，包含肖像和推荐语

- 右侧：圆形图

---

**左侧：故障效果肖像**

- 容器：`relative shrink-0`，固定尺寸 `width: 250px`、`height: 310px`

- 包含一个使用 `object-cover` 填满容器的 `<img>`，采用以下 Pexels 图片：`https://images.pexels.com/photos/3778212/pexels-photo-3778212.jpeg?auto=compress&cs=tinysrgb&w=600`

- 10 个白色小型故障块（`bg-white`）绝对定位在肖像边缘周围（部分溢出边界）。每个块都有固定像素 `width` 和 `height`，以及基于百分比的 `left`/`top`。它们以 `scale: 0 -> 1`、`opacity: [0, 1, 0.9]` 依次出现，从 `delay: 0.5s` 开始，每个错开 `0.05s`，持续 `0.35s`。

- 故障块的确切位置（x%、y%、宽度 px、高度 px）：

  ```

  (2, -3, 22, 22), (12, -5, 14, 10), (28, -2, 10, 10),

  (82, 22, 8, 8), (-4, 75, 16, 12), (8, 82, 10, 10),

  (-2, 88, 18, 16), (56, 82, 12, 14), (70, 90, 10, 10),

  (42, 94, 8, 6)

  ```

- 整个肖像组从 `opacity:0, y:24` 动画至可见，持续 `0.8s`，delay `0.2s`。

---

**左侧：推荐语文本（肖像旁）**

- 容器：`min-w-0 max-w-[420px]`

- 左双弯引号字符 `\u201C`，使用 `text-[#555]`，字体为 `Georgia, 'Times New Roman', serif`，`fontSize: "3.2rem"`、`lineHeight: 0.7`。以 `y:14` 动画进入，delay `0.3s`。

- 引语段落：“我们不断看到同一种模式&mdash;有潜力的品牌迷失在混乱的流程、零散的视觉设计和令人过目即忘的网站之间。这间工作室的存在，就是为了将这一切整合成一个清晰、一致的故事。”长破折号使用 `&mdash;`。样式为 `text-white/90`，字号 `clamp(1.05rem, 1.5vw, 1.28rem)`、`font-normal`、`leading-[1.58]`。从 `y:20` 动画进入，delay `0.4s`。

- 署名区块 `mt-10`：

  - 姓名：“Alex West”，使用 `text-[1.15rem] font-medium tracking-[0.01em] text-white`

  - 职位：“创始人 &amp; 创意总监”（在 JSX 中使用 `&amp;`），使用 `mt-1 text-[0.85rem] tracking-wide text-[#6e6e6e]`

  - 两者一起从 `y:14` 动画进入，delay `0.55s`。

---

**右侧：圆形图**

- 包装容器：`flex w-full max-w-[360px] shrink-0 items-center justify-center self-center sm:max-w-[400px] lg:max-w-[440px]`

- 内层容器的 `aspect-ratio: 1/1`，position relative，从 opacity 0->1 动画进入，delay `0.4s`，持续 `0.8s`。

- SVG 使用 `viewBox="0 0 100 100"`，绝对定位并填满容器：

  - 一个以 `(50, 50)` 为圆心、半径为 `30` 的圆，`stroke="white"`、`strokeWidth="0.18"`、`opacity="0.45"`

  - 3 条线从中心 `(50,50)` 向外辐射至半径 `36`（30+6），角度如下：

    - “网站”位于 215 度

    - “品牌”位于 335 度

    - “ui/ux design”位于 110 度

  - 线条默认：`strokeWidth: 0.18`、`opacity: 0.45`。hover 对应标签时：`strokeWidth: 0.6`、`opacity: 1`。过渡持续时间为 `0.3s`。

- 3 个文本标签以相同角度定位在距中心半径 `46`（30+16）的位置，并使用 `transform: translate(-50%, -50%)` 居中。样式为 `fontSize: clamp(1.25rem, 2.8vw, 2.4rem)`、`letterSpacing: -0.01em`、`text-white`、`whitespace-nowrap`。

  - 默认 `fontWeight: 300`，hover 该标签时：`fontWeight: 700`（过渡 `0.25s`）。

  - 每个标签从 `opacity:0, y:16` 动画至可见，从 delay `0.6s` 开始，每个错开 `0.15s`，持续 `0.7s`。

- hover 状态共享：hover 某个标签时，同时高亮该标签（加粗）及其对应的 SVG 线条。

---

**依赖项：** React 18、Framer Motion (v12+)、Tailwind CSS 3。使用 `useState`、`useRef`、Framer Motion 中的 `useInView`，并为所有动画使用 `motion` 组件。除 Framer Motion 外，不使用其他外部动画库。

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

适用模型与稳定度

建议模型

待补充模型

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

使用 React、TypeScript、Tailwind CSS 3 和 Framer Motion，将“我们的综合品牌塑造方法”版块构建为 React 组件。该版块采用深色背景（`#0f0f0f`）和白色文本。字体为 `'DM Sans', sans-serif`（通过 Google Fonts 加载：`https://fonts.googleapis.com/css?family=DM+Sans:500,400`）。以下是确切规范：

---

**整体版块容器：**

- `<section>` 使用 `overflow-x-hidden`、`bg-[#0f0f0f]`、`text-white`，内联样式为 `fontFamily: "'DM Sans', sans-serif"`

- 内层包装容器：`mx-auto max-w-7xl px-6 py-24 sm:px-10 lg:px-16 lg:py-32`

- 所有动画均使用缓动曲线 `[0.22, 1, 0.36, 1]`，并通过 Framer Motion 的 `useInView` 配合 `{ once: true, margin: "-60px" }`，在滚动进入视口时仅触发一次

---

**页眉（版块顶部）：**

- Flex row（`flex items-start gap-4`），使用 `mb-20`

- 两行垂直堆叠的文本：

  - 第 1 行：“我们的综合”，使用 `text-[#6e6e6e]`（灰色）、`font-light`，字号 `clamp(2rem, 3.4vw, 2.6rem)`、`leading-[1.18]`、`tracking-[-0.01em]`。从 `opacity:0, y:20` 动画至可见，持续 `0.7s`。

  - 第 2 行：“品牌塑造方法”，使用 `text-white`，字体样式相同。动画相同，但设置 `delay: 0.1s`。

- 右侧放置一个小型方形按钮：`h-7 w-7`、`border border-white/20`，包含加号图标（SVG：两条垂直相交的线组成 +，`stroke="currentColor"`、`strokeWidth="1.3"`、viewBox `0 0 12 12`）。文本颜色为 `text-white/70`，hover：`bg-white/10 text-white`。从 scale 0.8、opacity 0 动画至 1，delay `0.25s`。

---

**内容行（页眉下方）：**

- `flex flex-col gap-12 lg:flex-row lg:items-start lg:gap-10`

- 左侧：`flex min-w-0 flex-1 flex-col gap-8 sm:flex-row sm:items-start sm:gap-10`，包含肖像和推荐语

- 右侧：圆形图

---

**左侧：故障效果肖像**

- 容器：`relative shrink-0`，固定尺寸 `width: 250px`、`height: 310px`

- 包含一个使用 `object-cover` 填满容器的 `<img>`，采用以下 Pexels 图片：`https://images.pexels.com/photos/3778212/pexels-photo-3778212.jpeg?auto=compress&cs=tinysrgb&w=600`

- 10 个白色小型故障块（`bg-white`）绝对定位在肖像边缘周围（部分溢出边界）。每个块都有固定像素 `width` 和 `height`，以及基于百分比的 `left`/`top`。它们以 `scale: 0 -> 1`、`opacity: [0, 1, 0.9]` 依次出现，从 `delay: 0.5s` 开始，每个错开 `0.05s`，持续 `0.35s`。

- 故障块的确切位置（x%、y%、宽度 px、高度 px）：

  ```

  (2, -3, 22, 22), (12, -5, 14, 10), (28, -2, 10, 10),

  (82, 22, 8, 8), (-4, 75, 16, 12), (8, 82, 10, 10),

  (-2, 88, 18, 16), (56, 82, 12, 14), (70, 90, 10, 10),

  (42, 94, 8, 6)

  ```

- 整个肖像组从 `opacity:0, y:24` 动画至可见，持续 `0.8s`，delay `0.2s`。

---

**左侧：推荐语文本（肖像旁）**

- 容器：`min-w-0 max-w-[420px]`

- 左双弯引号字符 `\u201C`，使用 `text-[#555]`，字体为 `Georgia, 'Times New Roman', serif`，`fontSize: "3.2rem"`、`lineHeight: 0.7`。以 `y:14` 动画进入，delay `0.3s`。

- 引语段落：“我们不断看到同一种模式&mdash;有潜力的品牌迷失在混乱的流程、零散的视觉设计和令人过目即忘的网站之间。这间工作室的存在，就是为了将这一切整合成一个清晰、一致的故事。”长破折号使用 `&mdash;`。样式为 `text-white/90`，字号 `clamp(1.05rem, 1.5vw, 1.28rem)`、`font-normal`、`leading-[1.58]`。从 `y:20` 动画进入，delay `0.4s`。

- 署名区块 `mt-10`：

  - 姓名：“Alex West”，使用 `text-[1.15rem] font-medium tracking-[0.01em] text-white`

  - 职位：“创始人 &amp; 创意总监”（在 JSX 中使用 `&amp;`），使用 `mt-1 text-[0.85rem] tracking-wide text-[#6e6e6e]`

  - 两者一起从 `y:14` 动画进入，delay `0.55s`。

---

**右侧：圆形图**

- 包装容器：`flex w-full max-w-[360px] shrink-0 items-center justify-center self-center sm:max-w-[400px] lg:max-w-[440px]`

- 内层容器的 `aspect-ratio: 1/1`，position relative，从 opacity 0->1 动画进入，delay `0.4s`，持续 `0.8s`。

- SVG 使用 `viewBox="0 0 100 100"`，绝对定位并填满容器：

  - 一个以 `(50, 50)` 为圆心、半径为 `30` 的圆，`stroke="white"`、`strokeWidth="0.18"`、`opacity="0.45"`

  - 3 条线从中心 `(50,50)` 向外辐射至半径 `36`（30+6），角度如下：

    - “网站”位于 215 度

    - “品牌”位于 335 度

    - “ui/ux design”位于 110 度

  - 线条默认：`strokeWidth: 0.18`、`opacity: 0.45`。hover 对应标签时：`strokeWidth: 0.6`、`opacity: 1`。过渡持续时间为 `0.3s`。

- 3 个文本标签以相同角度定位在距中心半径 `46`（30+16）的位置，并使用 `transform: translate(-50%, -50%)` 居中。样式为 `fontSize: clamp(1.25rem, 2.8vw, 2.4rem)`、`letterSpacing: -0.01em`、`text-white`、`whitespace-nowrap`。

  - 默认 `fontWeight: 300`，hover 该标签时：`fontWeight: 700`（过渡 `0.25s`）。

  - 每个标签从 `opacity:0, y:16` 动画至可见，从 delay `0.6s` 开始，每个错开 `0.15s`，持续 `0.7s`。

- hover 状态共享：hover 某个标签时，同时高亮该标签（加粗）及其对应的 SVG 线条。

---

**依赖项：** React 18、Framer Motion (v12+)、Tailwind CSS 3。使用 `useState`、`useRef`、Framer Motion 中的 `useInView`，并为所有动画使用 `motion` 组件。除 Framer Motion 外，不使用其他外部动画库。

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

适用模型与稳定度

建议模型

待补充模型