AI Coding (UI)Aceternity UIAdded 08/13/2026Source verified#source-aceternity #prompt-public #not-rerun #license-review #web-ui #motion-3d

Spotlight

Creator · Aceternity UI

View original source ↗

Prompt

// components/ui/spotlight.tsx
import React from "react";
import { cn } from "@/lib/utils";

type SpotlightProps = {
  className?: string;
  fill?: string;
};

export const Spotlight = ({ className, fill }: SpotlightProps) => {
  return (
    <svg
      className={cn(
        "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
        className
      )}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3787 2842"
      fill="none"
    >
      <g filter="url(#filter)">
        <ellipse
          cx="1924.71"
          cy="273.501"
          rx="1924.71"
          ry="273.501"
          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
          fill={fill || "white"}
          fillOpacity="0.21"
        ></ellipse>
      </g>
      <defs>
        <filter
          id="filter"
          x="0.860352"
          y="0.838989"
          width="3785.16"
          height="2840.26"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"
          ></feBlend>
          <feGaussianBlur
            stdDeviation="151"
            result="effect1_foregroundBlur_1065_8"
          ></feGaussianBlur>
        </filter>
      </defs>
    </svg>
  );
};

Provenance · verifiedPublished prompts are human-checked against the original post; platform-reconstructed prompts are not accepted.Compare with source ↗

Models & stability

Recommended models

待补充模型

Stability
Cost: Medium

Keep exploring

Explore related cases.

View all AI Coding (UI) Case →

AI Coding (UI)XAdded 07/28/2026

3D Supermarket-Packaging-Style Creative Agency Website

A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.

Skill · 3D and motion hero Skill · Portfolio story architecture

Prompt

Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al

Source heat · X

Stability

View case →

AI Coding (UI)Aceternity UIAdded 08/13/2026

3D Animated Pin

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D and motion hero

Prompt

// 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…

Source heat · Aceternity UI

—

Stability

View case →

AI Coding (UI)XAdded 09/12/2026

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D and motion hero Skill · Product and commerce conversion page

Prompt

First search for the "/unlazy" skill, read it fully, and use it throughout the entire task. Treat this as a major visual build lasting at least {argument name="minimum duration" d

Source heat · X

Stability

View case →

// components/ui/spotlight.tsx import React from "react"; import { cn } from "@/lib/utils"; type SpotlightProps = { className?: string; fill?: string; }; export const Spotlight = ({ className, fill }: SpotlightProps) => { return ( <svg className={cn( "animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-0", className )} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3787 2842" fill="none" > <g filter="url(#filter)"> <ellipse cx="1924.71" cy="273.501" rx="1924.71" ry="273.501" transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)" fill={fill || "white"} fillOpacity="0.21" ></ellipse> </g> <defs> <filter id="filter" x="0.860352" y="0.838989" width="3785.16" height="2840.26" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB" > <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" ></feBlend> <feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur_1065_8" ></feGaussianBlur> </filter> </defs> </svg> ); };