加载中…
创作者 · Aceternity UI
复刻提示词保留原文，另附运行环境、素材与验收要求；附加说明不是原作者原话。
// components/ui/spotlight-new.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
type SpotlightProps = {
gradientFirst?: string;
gradientSecond?: string;
gradientThird?: string;
translateY?: number;
width?: number;
height?: number;
smallWidth?: number;
duration?: number;
xOffset?: number;
};
export const Spotlight = ({
gradientFirst = "radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)",
gradientSecond = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)",
gradientThird = "radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)",
translateY = -350,
width = 560,
height = 1380,
smallWidth = 240,
duration = 7,
xOffset = 100,
}: SpotlightProps = {}) => {
return (
<motion.div
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
transition={{
duration: 1.5,
}}
className="pointer-events-none absolute inset-0 h-full w-full"
>
<motion.div
animate={{
x: [0, xOffset, 0],
}}
transition={{
duration,
repeat: Infinity,
repeatType: "reverse",
ease: "easeInOut",
}}
className="absolute top-0 left-0 w-screen h-screen z-40 pointer-events-none"
>
<div
style={{
transform: `translateY(${translateY}px) rotate(-45deg)`,
background: gradientFirst,
width: `${width}px`,
height: `${height}px`,
}}
className={`absolute top-0 left-0`}
/>
<div
style={{
transform: "rotate(-45deg) translate(5%, -50%)",
background: gradientSecond,
width: `${smallWidth}px`,
height: `${height}px`,
}}
className={`absolute top-0 left-0 origin-top-left`}
/>
<div
style={{
transform: "rotate(-45deg) translate(-180%, -70%)",
background: gradientThird,
width: `${smallWidth}px`,
height: `${height}px`,
}}
className={`absolute top-0 left-0 origin-top-left`}
/>
</motion.div>
<motion.div
animate={{
x: [0, -xOffset, 0],
}}
transition={{
duration,
repeat: Infinity,
repeatType: "reverse",
ease: "easeInOut",
}}
className="absolute top-0 right-0 w-screen h-screen z-40 pointer-events-none"
>
<div
style={{
transform: `translateY(${translateY}px) rotate(45deg)`,
background: gradientFirst,
width: `${width}px`,
height: `${height}px`,
}}
className={`absolute top-0 right-0`}
/>
<div
style={{
transform: "rotate(45deg) translate(-5%, -50%)",
background: gradientSecond,
width: `${smallWidth}px`,
height: `${height}px`,
}}
className={`absolute top-0 right-0 origin-top-right`}
/>
<div
style={{
transform: "rotate(45deg) translate(180%, -70%)",
background: gradientThird,
width: `${smallWidth}px`,
height: `${height}px`,
}}
className={`absolute top-0 right-0 origin-top-right`}
/>
</motion.div>
</motion.div>
);
};适用模型与稳定度
建议模型
独立复测证据
2026年11月5日
2026年10月23日
2026年10月11日
多人复现
继续探索
复制这段 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 = ({ children, title, href, className, containerClassName…
复制这段 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 "@react-three/fiber"; import { OrbitControls, Html, useTexture } from "…
复制这段 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: string[]; className?: string; }) => { // Split the image…
Case 详情页把原帖效果、Prompt 与复测证据放在同一条阅读路径里。
