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.
Installation
$pnpm dlx shadcn@latest add @componentry/showcase-card
Usage
API Reference
| Prop | Type | Default |
|---|---|---|
taglineOptional text displayed at the top of the image section | string | — |
headingMain title text (required) | string | — |
descriptionSupporting text below the heading | string | — |
imageUrlURL for the hero image (required) | string | — |
ctaTextText for the call-to-action button | string | — |
onCtaClickClick handler for the CTA button | () => void | — |
brandNameBrand or company name for the footer | string | — |
servicesArray of service tags displayed in footer | string[] | — |
enableTiltEnable 3D tilt effect on hover | boolean | true |
maxTiltMaximum tilt angle in degrees | number | 8 |
enableParallaxEnable parallax effect on image | boolean | true |
Click on the icon in the top right of the example preview to view the source code for specific variants.
Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
Have any questions?
Contact on@harshjdhvWork fast. Live slow.
Create your digital reality.
From nothing to everything, let's bring your vision to life.
studio.design
web✦product✦brand