Shadcn.io is not affiliated with official shadcn/ui
Features Tilt Parallax Card Grid
A tilt parallax card grid features section for React and Next.js with six 3D mouse-tilt cards, multi-layer parallax depth, and floating accent badges that lift on hover built with shadcn/ui and Tailwind CSS
Give feature cards real depth with this tilt parallax card grid block for React and Next.js. Features a six-card grid where each card responds to the mouse with 3D rotation on both axes, a background watermark icon that sits behind the surface, a title layer that stays flush to the card, and an accent badge that floats forward for true parallax separation. Built with TypeScript, Lucide React icons, motion/react useMotionValue and useTransform hooks for frame-perfect tilt, and Tailwind CSS. Perfect for developer tooling showcases, platform feature sections, and any marketing block where the cards themselves should feel like physical objects on the page.
Related Components
React Features Depth Layered Stack Block
Depth layered stack layout
React Features Layered Deck Shuffle Stack Block
Layered deck shuffle stack layout
React Features Shadow Lift Card Grid Block
Shadow lift card grid layout
React Features Spotlight Hover Mask Grid Block
Spotlight hover mask grid layout
React Features Floating Icon Sextet Block
Floating icon sextet layout
React Features Rounded Tile Card Grid Block
Rounded tile card grid layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Thin Sidebar Marquee Panel
A thin icon-only sidebar master-detail features section for React and Next.js with a w-16 vertical icon rail, hover tooltips, and a large marquee text-3xl detail panel with crosshair image placeholder built with shadcn/ui and Tailwind CSS
Timeline Evolution Story
A horizontal timeline evolution story features section for React and Next.js with five clickable year nodes along a top rail and a single detail card below that swaps with AnimatePresence built with shadcn/ui and Tailwind CSS