AI 编程(UI)Aceternity UI收录 2026/08/13来源已核实#source-aceternity #prompt-public #not-rerun #license-review #web-ui #motion-3d

SVG 蒙版效果

Prompt

// 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 const MaskContainer = ({
  children,
  revealText,
  size = 10,
  revealSize = 600,
  className,
}: {
  children?: string | React.ReactNode;
  revealText?: string | React.ReactNode;
  size?: number;
  revealSize?: number;
  className?: string;
}) => {
  const [isHovered, setIsHovered] = useState(false);
  const [mousePosition, setMousePosition] = useState<any>({ x: null, y: null });
  const containerRef = useRef<any>(null);
  const updateMousePosition = (e: any) => {
    const rect = containerRef.current.getBoundingClientRect();
    setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
  };

  useEffect(() => {
    containerRef.current.addEventListener("mousemove", updateMousePosition);
    return () => {
      if (containerRef.current) {
        containerRef.current.removeEventListener(
          "mousemove",
          updateMousePosition,
        );
      }
    };
  }, []);
  let maskSize = isHovered ? revealSize : size;

  return (
    <motion.div
      ref={containerRef}
      className={cn("relative h-screen", className)}
      animate={{
        backgroundColor: isHovered ? "var(--slate-900)" : "var(--white)",
      }}
      transition={{
        backgroundColor: { duration: 0.3 },
      }}
    >
      <motion.div
        className="absolute flex h-full w-full items-center justify-center bg-black text-6xl [mask-image:url(/mask.svg)] [mask-repeat:no-repeat] [mask-size:40px] dark:bg-white"
        animate={{
          maskPosition: `${mousePosition.x - maskSize / 2}px ${
            mousePosition.y - maskSize / 2
          }px`,
          maskSize: `${maskSize}px`,
        }}
        transition={{
          maskSize: { duration: 0.3, ease: "easeInOut" },
          maskPosition: { duration: 0.15, ease: "linear" },
        }}
      >
        <div className="absolute inset-0 z-0 h-full w-full bg-black opacity-50 dark:bg-white" />
        <div
          onMouseEnter={() => {
            setIsHovered(true);
          }}
          onMouseLeave={() => {
            setIsHovered(false);
          }}
          className="relative z-20 mx-auto max-w-4xl text-center text-4xl font-bold"
        >
          {children}
        </div>
      </motion.div>

      <div className="flex h-full w-full items-center justify-center">
        {revealText}
      </div>
    </motion.div>
  );
};

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

继续探索

继续看相关 Case。

查看全部 AI 编程(UI) Case →

AI 编程(UI)X收录 2026/07/28

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI收录 2026/08/13

3D 动画图钉

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

Skill · 3D / 动效 Hero

提示语

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

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X收录 2026/09/12

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

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

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

// 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 const MaskContainer = ({ children, revealText, size = 10, revealSize = 600, className, }: { children?: string | React.ReactNode; revealText?: string | React.ReactNode; size?: number; revealSize?: number; className?: string; }) => { const [isHovered, setIsHovered] = useState(false); const [mousePosition, setMousePosition] = useState<any>({ x: null, y: null }); const containerRef = useRef<any>(null); const updateMousePosition = (e: any) => { const rect = containerRef.current.getBoundingClientRect(); setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; useEffect(() => { containerRef.current.addEventListener("mousemove", updateMousePosition); return () => { if (containerRef.current) { containerRef.current.removeEventListener( "mousemove", updateMousePosition, ); } }; }, []); let maskSize = isHovered ? revealSize : size; return ( <motion.div ref={containerRef} className={cn("relative h-screen", className)} animate={{ backgroundColor: isHovered ? "var(--slate-900)" : "var(--white)", }} transition={{ backgroundColor: { duration: 0.3 }, }} > <motion.div className="absolute flex h-full w-full items-center justify-center bg-black text-6xl [mask-image:url(/mask.svg)] [mask-repeat:no-repeat] [mask-size:40px] dark:bg-white" animate={{ maskPosition: `${mousePosition.x - maskSize / 2}px ${ mousePosition.y - maskSize / 2 }px`, maskSize: `${maskSize}px`, }} transition={{ maskSize: { duration: 0.3, ease: "easeInOut" }, maskPosition: { duration: 0.15, ease: "linear" }, }} > <div className="absolute inset-0 z-0 h-full w-full bg-black opacity-50 dark:bg-white" /> <div onMouseEnter={() => { setIsHovered(true); }} onMouseLeave={() => { setIsHovered(false); }} className="relative z-20 mx-auto max-w-4xl text-center text-4xl font-bold" > {children} </div> </motion.div> <div className="flex h-full w-full items-center justify-center"> {revealText} </div> </motion.div> ); };