3D / 动效 Hero

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。 将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。 在浏览器中创建一个细节极其丰富的实时 {argument nam

使用 Blender MCP 搭建一个小型、风格化的日本花店场景。重点忠实还原关键视觉元素：绿色雨篷、显示日文“花屋”的屋顶招牌、摆放在店铺前方的花盆与植物、自动售货机、自行车、交通信号灯、电线杆、周围的树木，以及其他易于辨认的街道细节。以温暖迷人的卡通风格渲染场景，配以柔和光照、悦目的材质和温馨氛围。 为整个花店场景制作一段极具冲击力、充满动感的 exploded-view 动画。爆炸拆解效果应大胆夸张，而非含蓄细微。流畅且有条理地将各个组件向外分离，以极具戏剧性的方式展

使用 Three.js 和提供的饺子 GLB model，构建一个名为“The Dumpling Club”的完整、精致的交互式 3D 网站。 Art direction: 营造一个温馨的微缩美食场景，采用暖奶油色背景、陶土色点缀、柔和的影棚光照、逼真的阴影和优雅的字体排印。将富有表现力的衬线标题与简洁的无衬线控件搭配使用。使用标题“Small bites. Big feelings.”。为场景留出充足的呼吸空间。 The serving: 在一个圆形竹蒸笼内放置五只可爱

精准复刻这个 **Vesper.ai** 单视口落地页。文档标题：`Vesper.ai — Operational AI Infrastructure`。`lang="en"`。使用一个包含内联 CSS 的 HTML 文件，并加入一个用于菜单和动画回退的小型 IIFE。纯黑色 `#000000`。除三项统计数据外，不要添加任何额外版块、卡片、表单、定价表或页脚。不要添加视频、WebGL、Three.js 或 Lottie。不要虚构 CloudFront URL。 立即强制显

为 AI 网站构建器创建一个深色模式 Hero 区块，严格遵循以下规格： ## 技术设置 ### 必需的软件包 安装以下软件包： - `motion`（版本 12.23.24 或更高）——用于动画 - `hls.js`（版本 1.6.15 或更高）——用于视频流播放 - `lucide-react`（版本 0.487.0 或更高）——用于图标 ### 字体 导入以下 Google Fonts： ```css @import url('https://fonts.goog

使用 React、Vite、TypeScript、Tailwind CSS、shadcn/ui，以及作为背景嵌入的 Spline 3D scene，为一家名为“SENTINEL AI”的安防公司创建一个全屏深色 hero landing page。技术栈使用 @splinetool/react-spline 和 @splinetool/runtime 嵌入 3D 内容。以下是全部细节： 字体： Google Fonts“​​Sora”，字重为 300、400、500、600

Prompt to recreate this landing page: Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js. --- ## Global Design System ### Fonts Google Fonts import: Inter (300–700…

使用 Tailwind CSS、`motion/react` 实现动画，并使用 `lucide-react` 提供图标，构建一个 React 函数组件。 **1. 字体排版与设置：** - 从 Google Fonts 导入 "Inter" 字体（字重 400、500、600、700），并在 Tailwind 配置/CSS 中将其设为默认无衬线字体。 - 页面整体背景应为 `#f8f9fa`。 **2. 顶部留白版块（View Below）：** - 在页面顶部创建一个版

// components/ui/parallax-hero-images.tsx "use client"; import React, { useEffect, useState, useMemo, useCallback, memo } from "react"; import { motion, useMotionValue, useSpring, useTransform, MotionValue, } from "motion/react"; import { …

// components/ui/world-map.tsx "use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import { useTheme } from "next-themes"; interface MapProps { dots?: Array<{ start: { la…

// components/ui/file-upload.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { IconUpload } from "@tabler/icons-react"; import { useDropzone…

// components/ui/placeholders-and-vanish-input.tsx "use client"; import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export function Pl…