加载中…
案例库 · 公开证据
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Compare」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/compare.tsx "use client"; import React, { useState, useEffect, useRef, useCallback } from "react"; import { SparklesCore } from "@/components/ui/sparkles"; import {…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Background Lines」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-lines.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import React from "react"; export const BackgroundLines = ({…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Canvas Reveal Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/canvas-reveal-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import React, { useMemo, useRef }…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Noise Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/noise-background.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useSpring, useTransform,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Marquee」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-marquee.tsx "use client"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const ThreeDMarquee = ({ images, className, }: { images:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Tooltip Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/tooltip-card.tsx "use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Terminal」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/terminal.tsx "use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const KEY_SOUNDS_DOWN: Record<string,…
设计机构 Axion Studio 的落地页，hero 背景用 shaders 包做着色器效果，这批里唯一用 WebGL 着色器的。
提示语
为 “Axion Studio” 构建一个 React + Vite + Tailwind CSS 落地页——这是一个设计机构网站。英雄区背景使用 `shaders` 包（npm: `shaders`），图标使用 `lucide-react`。页面包含 3…
提示语
为一家名为“NEXOVA”的托管公司构建一个全屏 404 错误页面。整个页面采用单视口高度布局，包含循环播放的背景视频、导航栏、居中的 hero/404 区域和多栏页脚。使用 React + Tailwind CSS + Lucide React…
三台 iPhone 并排展示教会网站移动端设计，走 React Native + Expo Router 技术栈，这批里少见的原生移动端 prompt。
提示语
创建一个移动应用展示页面，为“Christ Family Church”展示 3 个 iPhone mockups——这是一款教会网站移动端设计。使用 React Native、Expo Router、react-native-reanimated 和 Manrope…
物流公司 CARGOX 的移动端优先落地页，整页装进 iPhone 15 Pro 外框，React + TypeScript + motion。
提示语
Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library…
提示语
为“SynapseX”构建一个单页落地网站——这是一款未来主义神经 AI 界面产品。整个网站采用黑色背景、白色文字和全视口视频背景。所有文字均使用“Space Mono”（等宽字体）作为主字体。使用 React +…
义肢产品的单页 hero，React + TypeScript + Tailwind，整页只住在 App.tsx，依赖压到最少。
提示语
使用 Vite 构建一个 React + TypeScript + Tailwind CSS 单页 Hero 区域。整个页面都位于 `src/App.tsx` 中。除 `react`、`react-dom`、`lucide-react` 和 Tailwind 外，不使用其他库。 **背景：** -…
全屏 hero，Vite + React + TypeScript，动效全部交给 GSAP，字体在 index.css 里定义。
提示语
**在 Vite + React + TypeScript + Tailwind CSS 项目中构建一个全屏 hero section。使用 `gsap` 和 `lucide-react`。不要使用其他 UI 库。** ### 字体（位于 `src/index.css`） 在 index.css…
提示语
为名为 "Axon" 的产品构建一个单页 hero 落地页——这是一个为繁琐工作流部署数字员工的平台。页面是一个全视口 hero 区域，包含循环背景视频和叠加内容。 **字体：** - 加载 Google Fonts：`Instrument…
提示语
**构建一个单页 HTML 展示页，在中性的 `#F4F4F4` 舞台上并排显示两个 iOS 设备框架（每个 370x790px）。舞台使用 JS 自动缩放以适配视口。两部手机均包含 Dynamic Island、状态栏（时间…
童趣品牌 TinyTrails 的动画 404 页，React + Tailwind，单个 App.tsx 交付。
提示语
使用 React、Tailwind CSS 和 Lucide React icons，为名为 "TinyTrails" 的儿童品牌构建一个全屏动画 404 错误页面。页面必须是单个 `App.tsx` 组件。使用从 Google Fonts 加载的 Inter 字体（字重…
提示语
为 **nexum** 构建一个单屏全屏（`h-screen w-full overflow-hidden`）Hero 页面——这是一个深色、电影感的 AI 运维落地页 Hero，包含 full-bleed 背景视频、glassmorphism…
提示语
为一家名为“VortxLab Creations”（品牌：“V O R T X”）的虚构创意科技工作室创建一个全屏沉浸式落地页。页面采用循环背景视频、带有八边形 clip-path…
提示语
Build a single, self-contained `index.html` file — no build step, no external requests except one video URL, no frameworks, no dependencies. Everything (CSS, JS, SVG) is inline. The file…
提示语
严格按照以下规范重建一个单文件、深色电影感的 AI 基础设施落地页。交付一个独立完整的 index.html（内联 CSS + JS，无需构建步骤）。像素级忠实还原经过测量的 Figma…
提示语
将此页面重建为单个自包含的 index.html 文件——像素级忠实还原 Falcon AI Operations Overview 三联画。不得使用框架、外部…
安全产品 Xero 的单页 hero 精确复刻题，React + TypeScript，Inter 字体，规格写到不留发挥空间。
提示语
构建一个名为 **"Xero"** 的 **单页 React + TypeScript (Vite)** 产品落地页英雄区，精确复刻以下区块。使用 **Inter** Google Font（字重 300、400、500、600、700、800）。英雄区不要使用 Tailwind…
保健品牌 TerraElix 的单页 hero，React + Tailwind + Lucide 图标，健康品类的清爽视觉参考。
提示语
使用 React + Tailwind CSS + Lucide React icons，为名为 "TerraElix" 的健康/营养补充剂品牌创建一个 single-page hero landing。页面是一个 full-viewport hero，包含背景图片、navbar、带逐词…
