加载中…
案例库 · 公开证据
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Animated Tooltip」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/animated-tooltip.tsx "use client"; import React, { useState, useRef } from "react"; import { motion, useTransform, AnimatePresence, useMotionValue, useSpring, } from…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Spotlight」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/spotlight.tsx import React from "react"; import { cn } from "@/lib/utils"; type SpotlightProps = { className?: string; fill?: string; }; export const Spotlight = ({…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Container Scroll Animation」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/container-scroll-animation.tsx "use client"; import React, { useRef } from "react"; import { useScroll, useTransform, motion, MotionValue } from "motion/react"; export…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Infinite Moving Cards」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/infinite-moving-cards.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; export const InfiniteMovingCards = ({ items,…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Background Gradient Animation」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-gradient-animation.tsx "use client"; import { cn } from "@/lib/utils"; import { useEffect, useRef, useState } from "react"; export const…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Layout Grid」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/layout-grid.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Card = { id: number;…

复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Background Ripple Effect」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-ripple-effect.tsx "use client"; import React, { useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export const BackgroundRippleEffect…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Background Gradient」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-gradient.tsx import { cn } from "@/lib/utils"; import React from "react"; import { motion } from "motion/react"; export const BackgroundGradient = ({ children,…

复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Hero Highlight」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/hero-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { useMotionValue, motion, useMotionTemplate } from "motion/react"; import React from "react";…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Wavy Background」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/wavy-background.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef, useState } from "react"; import { createNoise3D } from…

复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Hover Border Gradient」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/hover-border-gradient.tsx "use client"; import React, { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Animated Tabs」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/tabs.tsx "use client"; import { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Tab = { title: string; value:…

复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Direction Aware Hover」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/direction-aware-hover.tsx "use client"; import { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@/lib/utils";…
复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Floating Navbar」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// 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 项目,再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sticky-scroll-reveal.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { useMotionValueEvent, useScroll } from "motion/react"; import {…

复制这段 TSX 组件源码,交给 Cursor、v0、Claude 等 AI 编程工具,说明这是「Moving Border」的 Aceternity UI 组件实现,即可让它接入你的 React 项目,再按需替换文案、配色与触发参数复用。
提示语
// 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 项目,再按需替换文案、配色与触发参数复用。
提示语
// 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;…

复制这段 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…

复制这段 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";…

复制这段 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 编程工具,说明这是「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,…