加载中…
案例库 · 公开证据
复制完整建站 Prompt 到 AI 编程工具（Cursor、v0、Claude 等）生成「Palomar Labs」对应的页面区块，替换文案、品牌与素材链接即可复用。 MotionSites 免费 Prompt 案例；站点不公开创作者，归属挂 MotionSites。
提示语
构建一个独立、像素级精确复刻的 Palomar Labs 营销落地页：仅包含固定导航栏 + 全 viewport 视频 Hero。不要添加其他区域。严格匹配此规范。不要编造额外文案、按钮、渐变、遮罩或装饰性斑块。 技术栈 R…
复制完整建站 Prompt 到 AI 编程工具（Cursor、v0、Claude 等）生成「Quantum Core」对应的页面区块，替换文案、品牌与素材链接即可复用。 MotionSites 免费 Prompt 案例；站点不公开创作者，归属挂 MotionSites。
提示语
# PROMPT — 精确复刻 "Apogee" Hero Section 构建一个像素级精确、完全适配移动端的 Hero 落地页区块，名称为 **"Apogee"**。严格遵循下方所有规范——精确的十六进制值、精确的像素数、精确的 class…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Parallax Hero Images」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/parallax-hero-images.tsx "use client"; import React, { useEffect, useState, useMemo, useCallback, memo } from "react"; import { motion, useMotionValue, useSpring,…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「World Map」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/world-map.tsx "use client"; import { useRef } from "react"; import { motion } from "motion/react"; import DottedMap from "dotted-map"; import { useTheme } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「File Upload」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// 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…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Placeholders And Vanish Input」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/placeholders-and-vanish-input.tsx "use client"; import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Evervault Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/evervault-card.tsx "use client"; import { useMotionValue } from "motion/react"; import React, { useState, useEffect } from "react"; import { useMotionTemplate, motion }…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sidebar」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sidebar.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useState, createContext, useContext } from "react"; import { AnimatePresence, motion } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Sparkles」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/sparkles.tsx "use client"; import React, { useId, useMemo } from "react"; import { useEffect, useState } from "react"; import Particles, { initParticlesEngine } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Notch」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/notch.tsx "use client"; import React, { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Pointer Highlight」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/pointer-highlight.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import { useRef, useEffect, useState } from "react"; export…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Hover Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-hover-effect.tsx "use client"; import React, { useRef, useEffect, useState } from "react"; import { motion } from "motion/react"; export const TextHoverEffect = ({…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Comet Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/comet-card.tsx "use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate, } from "motion/react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Colourful Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/colourful-text.tsx "use client"; import React from "react"; import { motion } from "motion/react"; export default function ColourfulText({ text }: { text: string }) {…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Wobble Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/wobble-card.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const WobbleCard =…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Flipping Board」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-flipping-board.tsx "use client"; import React, { useEffect, useRef, useState, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Scales」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/scales.tsx import { cn } from "@/lib/utils"; import React from "react"; export interface ScalesProps { orientation?: "horizontal" | "vertical" | "diagonal"; size?: number;…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「ASCII Art」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/ascii-art.tsx "use client"; import React, { useEffect, useLayoutEffect, useRef, useState, useCallback, useId, } from "react"; import { motion, useInView } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Globe」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/3d-globe.tsx "use client"; import React, { useRef, useMemo, useState, useCallback, Suspense } from "react"; import { Canvas, useFrame, useThree } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Keyboard」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/keyboard.tsx "use client"; import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from "react"; import { motion, AnimatePresence } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Dither Shader」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/dither-shader.tsx "use client"; import React, { useEffect, useRef, useCallback, useState } from "react"; import { cn } from "@/lib/utils"; type DitheringMode = "bayer" |…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Encrypted Text」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/encrypted-text.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView } from "motion/react"; import { cn } from…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Dotted Glow Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/dotted-glow-background.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; type DottedGlowBackgroundProps = { className?: string; /**…
