加载中…
案例库 · 公开证据
物流公司 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…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Background Boxes」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-boxes.tsx "use client"; import React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const BoxesCore = ({…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Typewriter Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/typewriter-effect.tsx "use client"; import { cn } from "@/lib/utils"; import { motion, stagger, useAnimate, useInView } from "motion/react"; import { useEffect } from…
单屏 404 页，React + Vite + Tailwind，DM Sans 配 Google Material Symbols 图标。
提示语
构建一个 404“找不到页面”hero page，作为单一全 viewport（100vh、不可滚动）的 React + Vite + Tailwind CSS 应用，使用 DM Sans font 和 Google Material Symbols Rounded…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Gooey Input」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/gooey-input.tsx "use client"; import { useState, useRef, useEffect, useId, useMemo, useCallback, type ChangeEvent, } from "react"; import { motion } from "motion/react";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Vortex Background」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/vortex.tsx "use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useRef } from "react"; import { createNoise3D } from "simplex-noise"; import { motion…
提示语
构建提示词：电影感太空旅行落地页 构建一个单页落地网站，包含两个全屏高度区块（Hero + Capabilities）。两个区块都使用循环背景视频，通过自定义 JS 实现 crossfade，并共享一套 liquid-glass…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Hover Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/card-hover-effect.tsx import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "motion/react"; import { useState } from "react"; export const HoverEffect…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Bento Grid」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/bento-grid.tsx import { cn } from "@/lib/utils"; export const BentoGrid = ({ className, children, }: { className?: string; children?: React.ReactNode; }) => { return (…
从 head 里的字体预连接写起的区块级 prompt，交付要求精确到 link 标签，与 Orbis NFT 同一品牌体系。
提示语
--- > **构建此区块前的设置要求：** > > **Google Fonts** -- 在 `index.html` 的 `<head>` 中加载以下内容： > ```html > <link rel="preconnect" href="https://fonts.googleapis.com" /> > <link…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Tailwind CSS buttons」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/tailwindcss-buttons.tsx "use client"; import React from "react"; import { IconClipboard } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; export const…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Meteor Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/meteors.tsx "use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import React from "react"; export const Meteors = ({ number, className,…
提示语
为 "Aurai"——一款全天候 AI 健康伴侣——构建全屏 hero section landing page。页面是一个单独的 viewport-height section，包含循环背景视频和叠加内容。 ## 视频背景 - 全屏 `<video>` element，带有…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Generate Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-generate-effect.tsx "use client"; import { useEffect } from "react"; import { motion, stagger, useAnimate } from "motion/react"; import { cn } from "@/lib/utils";…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Tracing Beam」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/tracing-beam.tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useTransform, useScroll, useVelocity, useSpring, } from…
提示语
构建一个全屏单页 React + TypeScript + Vite + Tailwind CSS Hero 区域，在循环播放的背景视频上呈现“液态玻璃”美学效果。使用 `lucide-react` 提供图标。不要使用其他 UI 库。 **字体与全局…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「SVG Mask Effect」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/svg-mask-effect.tsx "use client"; import { useState, useEffect, useRef } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Background Beams」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/background-beams.tsx "use client"; import React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const BackgroundBeams =…
提示语
创建一个 React + Tailwind CSS v4 + Motion（framer-motion successor）统计数据区块组件。使用 Vite 作为打包工具。该区块应完全适配移动端响应式布局。 ### 字体 在全局 CSS 中从 Google Fonts…
复制这段 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 = ({…
提示语
为“SynapseX”构建一个单页落地网站——这是一款未来主义神经 AI 界面产品。整个网站采用黑色背景、白色文字和全视口视频背景。所有文字均使用“Space Mono”（等宽字体）作为主字体。使用 React +…
复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「Text Reveal Card」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。
提示语
// components/ui/text-reveal-card.tsx "use client"; import React, { useEffect, useRef, useState, memo } from "react"; import { motion } from "motion/react"; import { twMerge } from…
复制这段 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…
