Tilt Card

A highly premium, interactive 3D parallax tilt card designed for presenting project portfolios, case studies, or feature cards. It responds dynamically to mouse/pointer hover with spring-loaded physics and wraps tags and long descriptions with collapsible states.

Live Preview

SaaS

Sleek Dashboard

Next.jsTailwind CSSTypeScriptFramer Motion

A clean and modern analytics dashboard interface designed for SaaS platforms, featuring real-time telemetry and customized layout widgets.

Education

Linguistic Platform

ReactCSS ModulesFirebaseWeb Audio API

An interactive learning application helping users master vocabulary and phonetics through immersive micro-lessons and automated quizzes.

Commerce

E-Commerce Concept

Next.jsTailwind CSS v4ShopifyGSAP

A minimal, image-rich product grid and seamless checkout flow designed for high-end boutique brands and contemporary lookbooks.

* Hover to experience physics-based 3D tilt interaction. Mobile users see stable static view.

Installation

CLI

npx @modus-ui/cli add tilt-card

Manual

Copy the code from the component tab.
Create a file at components/ui/tilt-card.tsx.
Paste the code.

Usage

tsx

import { TiltCard } from "@/components/ui/tilt-card";

export default function Example() {
  return (
    <TiltCard
      title="AlphaAuctions"
      description="A premium, real-time online auction and bidding platform. Features live bidding rooms."
      image="https://images.unsplash.com/photo-1563013544-824ae1d704d3?auto=format&fit=crop&w=800&q=80"
      tag="Web"
      techStack="Next.js, TypeScript, Tailwind CSS, Prisma, PostgreSQL, Socket.io"
      liveUrl="https://example.com"
      githubUrl="https://github.com"
    />
  );
}

Props

Prop	Type	Default	Description
`title`	`string`	-	The title of the card.
`description`	`string`	-	Descriptive text for the project or feature.
`image`	`string`	-	Source URL of the cover image.
`tag`	`string`	-	A category badge overlaid on the top-right of the image (e.g. "Web", "Design").
`techStack`	`string \| string[]`	-	A comma-separated string or array of tags for technical skills/tools.
`liveUrl`	`string`	-	URL for the interactive preview button.
`githubUrl`	`string`	-	URL for the github source repository button.
`caseStudyUrl`	`string`	-	URL to show a separate Case Study button.
`onCaseStudyClick`	`() => void`	-	Optional custom handler when clicking Case Study.
`maxTilt`	`number`	`15`	Maximum rotation angle in degrees.
`perspective`	`number`	`1000`	Depth perspective value for 3D distortion.
`children`	`ReactNode`	-	Direct children override if you wish to build custom inner layout.
`className`	`string`	-	Custom container styles.