Componentry

Showcase Card

A premium showcase card component with 3D tilt effect, parallax image, and delightful micro-interactions. Perfect for portfolios, agency websites, and product showcases.

Install
pnpm dlx shadcn@latest add "https://componentry.fun/r/showcase-card.json"
Examples

Default

Work fast. Live slow.
Showcase image

Create your digital reality.

From nothing to everything, let's bring your vision to life.

studio.design
web✦product✦brand
import { ShowcaseCard } from "@/components/ui/showcase-card"

<ShowcaseCard
  tagline="Work fast. Live slow."
  heading="Create your digital reality."
  description="From nothing to everything, let's bring your vision to life."
  imageUrl="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
  ctaText="Send a message"
  onCtaClick={() => console.log("CTA clicked")}
  brandName="studio.design"
  services={["web", "product", "brand"]}
/>

Without 3D Effects

Simple & Clean
Showcase image

Minimal interaction.

A cleaner version without 3D effects for a more subtle experience.

import { ShowcaseCard } from "@/components/ui/showcase-card"

<ShowcaseCard
  tagline="Simple & Clean"
  heading="Minimal interaction."
  description="A cleaner version without 3D effects."
  imageUrl="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=800&q=80"
  ctaText="Learn more"
  enableTilt={false}
  enableParallax={false}
/>

Compact Grid

Showcase image

Mountain Summit

Reaching new heights in design

Showcase image

Ocean Depths

Diving deep into creativity

Showcase image

Forest Path

Finding your way forward

import { ShowcaseCardCompact, ShowcaseGrid } from "@/components/ui/showcase-card"

<ShowcaseGrid columns={3}>
  <ShowcaseCardCompact
    heading="Mountain Summit"
    description="Reaching new heights in design"
    imageUrl="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&q=80"
  />
  <ShowcaseCardCompact
    heading="Ocean Depths"
    description="Diving deep into creativity"
    imageUrl="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&q=80"
  />
  <ShowcaseCardCompact
    heading="Forest Path"
    description="Finding your way forward"
    imageUrl="https://images.unsplash.com/photo-1448375240586-882707db888b?w=600&q=80"
  />
</ShowcaseGrid>
Features
3D Tilt Effect
Smooth perspective-based tilt that follows cursor movement with spring physics
Image Parallax
Hero image moves subtly in response to cursor position for depth
Glow Effects
Dynamic radial gradient glow follows cursor for premium feel
Button Shine
CTA button features a sweeping shine animation on hover
Multiple Variants
Choose from default, compact (for grids), or horizontal layouts
Fully Responsive
Adapts beautifully from mobile to desktop with optimized touch interactions
Props
tagline
Optional text displayed at the top of the image section
heading
Main title text (required)
description
Supporting text below the heading
imageUrl
URL for the hero image (required)
ctaText
Text for the call-to-action button
onCtaClick
Click handler for the CTA button
brandName
Brand or company name for the footer
services
Array of service tags displayed in footer (e.g., ["web", "product"])
enableTilt
Enable 3D tilt effect on hover (default: true)
maxTilt
Maximum tilt angle in degrees (default: 8)
enableParallax
Enable parallax effect on image (default: true)
Variants
ShowcaseCard
Default vertical card with full features, 3D tilt, and parallax
ShowcaseCardCompact
Minimal card for grids, with hover scale and arrow indicator
ShowcaseGrid
Responsive grid container for ShowcaseCardCompact items