Pop Tilt Cards

Interactive tilt card deck with smooth hover animations, 3D popping effects, images, links, and customizable card styling.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/pop-tilt-cards

npx layro-cli add @iurvish/pop-tilt-cards

npx layro-cli add @iurvish/pop-tilt-cards

bunx layro-cli add @iurvish/pop-tilt-cards

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

Code

Demo

"use client";

import { useState } from "react";
import { motion } from "motion/react";

interface CardItem {
  id: string | number;
  title: string;
  bgColor: string;
  textColor: string;
}

// Soft bright pastels only (no photos / gradient globe imagery)
const CARDS: CardItem[] = [