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

Background Boxes

Creator · Aceternity UI

View original source ↗

Prompt

// components/ui/background-boxes.tsx
"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export const BoxesCore = ({ className, ...rest }: { className?: string }) => {
  const rows = new Array(150).fill(1);
  const cols = new Array(100).fill(1);
  let colors = [
    "#93c5fd",
    "#f9a8d4",
    "#86efac",
    "#fde047",
    "#fca5a5",
    "#d8b4fe",
    "#93c5fd",
    "#a5b4fc",
    "#c4b5fd",
  ];
  const getRandomColor = () => {
    return colors[Math.floor(Math.random() * colors.length)];
  };

  return (
    <div
      style={{
        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
      }}
      className={cn(
        "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4",
        className,
      )}
      {...rest}
    >
      {rows.map((_, i) => (
        <motion.div
          key={`row` + i}
          className="relative h-8 w-16 border-l border-slate-700"
        >
          {cols.map((_, j) => (
            <motion.div
              whileHover={{
                backgroundColor: `${getRandomColor()}`,
                transition: { duration: 0 },
              }}
              animate={{
                transition: { duration: 2 },
              }}
              key={`col` + j}
              className="relative h-8 w-16 border-t border-r border-slate-700"
            >
              {j % 2 === 0 && i % 2 === 0 ? (
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="1.5"
                  stroke="currentColor"
                  className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M12 6v12m6-6H6"
                  />
                </svg>
              ) : null}
            </motion.div>
          ))}
        </motion.div>
      ))}
    </div>
  );
};

export const Boxes = React.memo(BoxesCore);

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

Models & stability

Recommended models

待补充模型

Stability: 85 / 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/background-boxes.tsx "use client"; import React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const BoxesCore = ({ className, ...rest }: { className?: string }) => { const rows = new Array(150).fill(1); const cols = new Array(100).fill(1); let colors = [ "#93c5fd", "#f9a8d4", "#86efac", "#fde047", "#fca5a5", "#d8b4fe", "#93c5fd", "#a5b4fc", "#c4b5fd", ]; const getRandomColor = () => { return colors[Math.floor(Math.random() * colors.length)]; }; return ( <div style={{ transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`, }} className={cn( "absolute -top-1/4 left-1/4 z-0 flex h-full w-full -translate-x-1/2 -translate-y-1/2 p-4", className, )} {...rest} > {rows.map((_, i) => ( <motion.div key={`row` + i} className="relative h-8 w-16 border-l border-slate-700" > {cols.map((_, j) => ( <motion.div whileHover={{ backgroundColor: `${getRandomColor()}`, transition: { duration: 0 }, }} animate={{ transition: { duration: 2 }, }} key={`col` + j} className="relative h-8 w-16 border-t border-r border-slate-700" > {j % 2 === 0 && i % 2 === 0 ? ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="pointer-events-none absolute -top-[14px] -left-[22px] h-6 w-10 stroke-[1px] text-slate-700" > <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" /> </svg> ) : null} </motion.div> ))} </motion.div> ))} </div> ); }; export const Boxes = React.memo(BoxesCore);