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

Magnetic Button

Creator · Aceternity UI

View original source ↗

Prompt

// components/ui/magnetic-button.tsx
"use client";

import React, { useRef, useState } from "react";
import { motion } from "motion/react";

export const MagneticButton = ({
  children,
  strength = 0.8,
  maxDistance = 100,
}: {
  children: React.ReactNode;
  strength?: number;
  maxDistance?: number;
}) => {
  const ref = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!ref.current) return;

    const { width, height, left, top } = ref.current.getBoundingClientRect();
    const { clientX, clientY } = e;

    let x = (clientX - (left + width / 2)) * strength;
    let y = (clientY - (top + height / 2)) * strength;

    const distance = Math.hypot(x, y);
    if (distance > maxDistance) {
      const scale = maxDistance / distance;
      x *= scale;
      y *= scale;
    }

    setPosition({ x, y });
  };

  const handleMouseLeave = () => {
    setPosition({ x: 0, y: 0 });
  };

  const hasMoved = position.x !== 0 || position.y !== 0;
  return (
    <div
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      className="cursor-pointer rounded-lg border border-dashed transition-colors duration-150 [--show-color:var(--color-blue-500)]"
      style={{
        borderColor: hasMoved ? "var(--show-color)" : "transparent",
        backgroundColor: hasMoved
          ? "color-mix(in srgb,var(--show-color) 20%, transparent)"
          : "transparent",
      }}
    >
      <motion.div
        ref={ref}
        animate={{ x: position.x, y: position.y }}
        transition={{ type: "spring", stiffness: 150, damping: 25, mass: 0.1 }}
      >
        {children}
      </motion.div>
    </div>
  );
};

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

Models & stability

Recommended models

待补充模型

Stability: 79 / 100
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/magnetic-button.tsx "use client"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; export const MagneticButton = ({ children, strength = 0.8, maxDistance = 100, }: { children: React.ReactNode; strength?: number; maxDistance?: number; }) => { const ref = useRef<HTMLDivElement>(null); const [position, setPosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => { if (!ref.current) return; const { width, height, left, top } = ref.current.getBoundingClientRect(); const { clientX, clientY } = e; let x = (clientX - (left + width / 2)) * strength; let y = (clientY - (top + height / 2)) * strength; const distance = Math.hypot(x, y); if (distance > maxDistance) { const scale = maxDistance / distance; x *= scale; y *= scale; } setPosition({ x, y }); }; const handleMouseLeave = () => { setPosition({ x: 0, y: 0 }); }; const hasMoved = position.x !== 0 || position.y !== 0; return ( <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} className="cursor-pointer rounded-lg border border-dashed transition-colors duration-150 [--show-color:var(--color-blue-500)]" style={{ borderColor: hasMoved ? "var(--show-color)" : "transparent", backgroundColor: hasMoved ? "color-mix(in srgb,var(--show-color) 20%, transparent)" : "transparent", }} > <motion.div ref={ref} animate={{ x: position.x, y: position.y }} transition={{ type: "spring", stiffness: 150, damping: 25, mass: 0.1 }} > {children} </motion.div> </div> ); };