Loading…
Case library · Public evidence
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Floating Navbar」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/floating-navbar.tsx "use client"; import React, { useState } from "react"; import { motion, AnimatePresence, useScroll, useMotionValueEvent, } from "motion/react"; import…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sticky Scroll Reveal」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/sticky-scroll-reveal.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { useMotionValueEvent, useScroll } from "motion/react"; import {…
项目案例展示区块，React + TypeScript + Framer Motion，DM Sans 字体，悬停像素网格效果是名字的来源。
Prompt
Build a "Projects / Case Studies" section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Moving Border」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/moving-border.tsx "use client"; import React from "react"; import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useTransform, } from "motion/react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Card Stack」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/card-stack.tsx "use client"; import { useEffect, useState } from "react"; import { motion } from "motion/react"; let interval: any; type Card = { id: number; name: string;…
航天公司 EngineTech 的极简黑底 footer，动态点状顶边加四栏导航网格。
Prompt
--- Build a **Site Footer** for an aerospace company called "EngineTech." This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Focus Cards」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/following-pointer.tsx import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; import { cn } from…
旅行应用 Wandor 的全屏 hero，React + TypeScript + Vite + Tailwind。
Prompt
**Build a single-page React + TypeScript landing page for a travel app called "Wandor" using Vite, Tailwind CSS, and lucide-react. The page is a full-viewport hero section with a looping…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Loaders」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 手写，适合对照学两种写法的差别。
Prompt
Create a full-screen hero section landing page using React, Vite, and Framer Motion (`motion` package). Use plain CSS (no Tailwind). The font is Inter (weights 300, 400, 500, 600) from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Apple Cards Carousel」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// components/ui/pixelated-canvas.tsx "use client"; import React from "react"; type PixelatedCanvasProps = { src: string; width?: number; height?: number; /** Size of each cell (in CSS…
暗色主题 CTA 区块的像素级复刻，React 18 + framer-motion，连 cn() 工具函数的组成都写进规格。
Prompt
Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` as `cn()`. Dark theme background…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Images Badge」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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。
Prompt
Build a single full-viewport marketing landing page for **Boomerang**, a conversational AI platform for financial institutions. Tech: React + TypeScript + Vite + Tailwind CSS + Lucide…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Compare」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 白底居中，适合学怎么在网页里做逼真的手机壳展示。
Prompt
Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons. **Phone Frame:** - Dimensions:…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Layout Text Flip」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 项目，再按需替换文案、配色与触发参数复用。
Prompt
// 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 }…
Prompt
--- **Prompt to recreate the "Categories" section:** > Build a "Categories" section in React + Tailwind CSS with the following exact specifications: > > **Section Container:** > -…
