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

Card Stack

Creator · Aceternity UI

View original source ↗

Prompt

// components/ui/card-stack.tsx
"use client";
import { useEffect, useState } from "react";
import { motion } from "motion/react";

let interval: any;

type Card = {
  id: number;
  name: string;
  designation: string;
  content: React.ReactNode;
};

export const CardStack = ({
  items,
  offset,
  scaleFactor,
}: {
  items: Card[];
  offset?: number;
  scaleFactor?: number;
}) => {
  const CARD_OFFSET = offset || 10;
  const SCALE_FACTOR = scaleFactor || 0.06;
  const [cards, setCards] = useState<Card[]>(items);

  useEffect(() => {
    startFlipping();

    return () => clearInterval(interval);
  }, []);
  const startFlipping = () => {
    interval = setInterval(() => {
      setCards((prevCards: Card[]) => {
        const newArray = [...prevCards]; // create a copy of the array
        newArray.unshift(newArray.pop()!); // move the last element to the front
        return newArray;
      });
    }, 5000);
  };

  return (
    <div className="relative  h-60 w-60 md:h-60 md:w-96">
      {cards.map((card, index) => {
        return (
          <motion.div
            key={card.id}
            className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
            style={{
              transformOrigin: "top center",
            }}
            animate={{
              top: index * -CARD_OFFSET,
              scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
              zIndex: cards.length - index, //  decrease z-index for the cards that are behind
            }}
          >
            <div className="font-normal text-neutral-700 dark:text-neutral-200">
              {card.content}
            </div>
            <div>
              <p className="text-neutral-500 font-medium dark:text-white">
                {card.name}
              </p>
              <p className="text-neutral-400 font-normal dark:text-neutral-200">
                {card.designation}
              </p>
            </div>
          </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: 80 / 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/card-stack.tsx "use client"; import { useEffect, useState } from "react"; import { motion } from "motion/react"; let interval: any; type Card = { id: number; name: string; designation: string; content: React.ReactNode; }; export const CardStack = ({ items, offset, scaleFactor, }: { items: Card[]; offset?: number; scaleFactor?: number; }) => { const CARD_OFFSET = offset || 10; const SCALE_FACTOR = scaleFactor || 0.06; const [cards, setCards] = useState<Card[]>(items); useEffect(() => { startFlipping(); return () => clearInterval(interval); }, []); const startFlipping = () => { interval = setInterval(() => { setCards((prevCards: Card[]) => { const newArray = [...prevCards]; // create a copy of the array newArray.unshift(newArray.pop()!); // move the last element to the front return newArray; }); }, 5000); }; return ( <div className="relative h-60 w-60 md:h-60 md:w-96"> {cards.map((card, index) => { return ( <motion.div key={card.id} className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1] shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between" style={{ transformOrigin: "top center", }} animate={{ top: index * -CARD_OFFSET, scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind zIndex: cards.length - index, // decrease z-index for the cards that are behind }} > <div className="font-normal text-neutral-700 dark:text-neutral-200"> {card.content} </div> <div> <p className="text-neutral-500 font-medium dark:text-white"> {card.name} </p> <p className="text-neutral-400 font-normal dark:text-neutral-200"> {card.designation} </p> </div> </motion.div> ); })} </div> ); };