Images Badge

Source: Aceternity UI ↗
Author: Aceternity UI
Licence: Aceternity UI licence (free component)

Loading…

Hover the folder badge and its preview images fan out above it.

Code

"use client";
import { ImagesBadge } from "@/lab/aceternity/ui/images-badge";

export default function ImagesBadgeDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center pt-[12%]">
      <ImagesBadge
        text="Introducing Agenforce Marketing Template"
        images={[
          "https://assets.aceternity.com/pro/agenforce-1.webp",
          "https://assets.aceternity.com/pro/agenforce-2.webp",
          "https://assets.aceternity.com/pro/agenforce-3.webp",
        ]}
      />
    </div>
  );
}

Prompt

Build "Images Badge", a card animation. What it does: Hover the folder badge and its preview images fan out above it. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://ui.aceternity.com/components/images-badge (Aceternity UI, Aceternity UI licence (free component)).