Polaroid Stack

Seven Polaroids sit in a pile. Hover and they fan into an arc from one corner.

Installation

terminal

pnpm dlx layro-cli add @iurvish/polaroid-stack

npx layro-cli add @iurvish/polaroid-stack

npx layro-cli add @iurvish/polaroid-stack

bunx layro-cli add @iurvish/polaroid-stack

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";

export type FanCard = {
  src: string;
  alt: string;
  hoverClassName: string;
};

const cardClassName = cn(
  "absolute top-1/2 left-1/2 h-[226px] w-[152px] -translate-x-1/2 -translate-y-1/2",
  "z-[100] origin-bottom-left overflow-hidden rounded-[8%] border-[5px] border-b-[40px] border-white bg-[#ebebeb]",
  "[scale:1] [transform:rotate(0deg)_translate(0px,-8px)] shadow-[#c7c7c7_-2px_2px_4px]",