加载中…
案例库 · 公开证据
提示语
--- 为一家名为 "EngineTech" 的航空航天公司构建一个 **Site Footer**。这是一个黑色背景的页脚，包含带动画的点状顶部边框、带有大标题的四列导航网格、超大字号的字标品牌行，以及法律声明行。 ---…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Focus Cards」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/focus-cards.tsx "use client"; import React, { useState } from "react"; import { cn } from "@/lib/utils"; export const Card = React.memo( ({ card, index, hovered,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Following Pointer」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/following-pointer.tsx import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; import { cn } from…
提示语
**使用 Vite、Tailwind CSS 和 lucide-react，为名为 "Wandor" 的旅行应用构建一个单页 React + TypeScript 落地页。页面是一个全视口 hero…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Loaders」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/loader.tsx "use client"; import { motion } from "motion/react"; import React from "react"; export const LoaderOne = () => { const transition = (x: number) => { return {…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Stateful Button」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/stateful-button.tsx "use client"; import { cn } from "@/lib/utils"; import React from "react"; import { motion, AnimatePresence, useAnimate } from "motion/react";…
全屏 hero，React + Framer Motion，刻意不用 Tailwind、纯 CSS 手写，适合对照学两种写法的差别。
提示语
使用 React、Vite 和 Framer Motion（`motion` package）创建一个全屏 hero section landing page。使用纯 CSS（不使用 Tailwind）。字体使用 Google Fonts 的 Inter（字重…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Apple Cards Carousel」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/apple-cards-carousel.tsx "use client"; import React, { useEffect, useRef, useState, createContext, useContext, } from "react"; import { IconArrowNarrowLeft,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Pixelated Canvas」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/pixelated-canvas.tsx "use client"; import React from "react"; type PixelatedCanvasProps = { src: string; width?: number; height?: number; /**…
暗色主题 CTA 区块的像素级复刻，React 18 + framer-motion，连 cn() 工具函数的组成都写进规格。
提示语
构建与落地页 CTA 区域像素级一致的复刻版本。使用 React 18 + Vite + TypeScript、TailwindCSS、`framer-motion`、`clsx` + `tailwind-merge` 作为 `cn()`。采用深色主题背景（`#000000`）、Inter…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Images Badge」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/images-badge.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; interface ImagesBadgeProps…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Navbar Menu」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/navbar-menu.tsx "use client"; import React from "react"; import { motion } from "motion/react"; const transition = { type: "spring" as const, mass: 0.5, damping: 11.5,…
金融机构对话式 AI 平台 Boomerang 的整页营销落地，React + TypeScript + Tailwind。
提示语
为金融机构的对话式 AI 平台 **Boomerang** 构建一个占满单个视口的营销落地页。技术：React + TypeScript + Vite + Tailwind CSS + Lucide React（仅使用 `ArrowRight`）。不使用其他 UI…
复制这段 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 = ({…
手机外框 mockup 里的移动端健康测验界面，React + Tailwind 白底居中，适合学怎么在网页里做逼真的手机壳展示。
提示语
在一个逼真的手机边框模型中构建移动端健康测验界面，并将其居中放置在白色页面上。使用 React、Tailwind CSS 和 Lucide React icons。 **手机边框：** - 尺寸：宽 375px x 高 780px -…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Layout Text Flip」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/layout-text-flip.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from…
复制这段 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 }…
提示语
--- **重现“分类”区块的提示词：** > 使用 React + Tailwind CSS 构建一个“分类”区块，严格遵循以下规格： > > **区块容器：** > - 全宽 `<section>`，使用…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Squiggly Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/squiggly-text.tsx "use client"; import React, { useId } from "react"; import { motion, useTime, useTransform } from "motion/react"; import { cn } from "@/lib/utils";…
复制这段 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,…
提示语
**像素级忠实地**复刻此页面。单个占满整个视口的首屏。React + Tailwind CSS。不要卡片，不要紫色，不要 Inter/Roboto。采用黑色/奶油色的编辑设计风格作品集外观。 --- ## 技术栈与页面框架 - Vite…
复制这段 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…
