Components
Loading preview...
The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s title, description, price, and a call-to-action button, while the shirt image sits in the top-right corner, outside the card boundary, instantly drawing attention. The shirt gently bounces with a subtle idle animation, giving the design a lively, premium feel. On hover, the entire card tilts with a parallax effect, the card itself scales down slightly with a soft shadow, and the shirt scales up and lifts forward with a stronger shadow, creating a dynamic push-pull motion that emphasizes the product. This combination of smooth 3D interactions, motion design, and layered layout makes the component ideal for highlighting featured products, running promotional ads, or enhancing landing pages with a visually rich, engaging showcase.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/shirt-parallax-card"use client";
import * as React from "react";
import { ShirtParallaxCard } from "@/components/ui/shirt-parallax-card";
export default function ShirtParallaxDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-muted/10 p-8">
<ShirtParallaxCard
title="Premium Cotton Shirt"
description="Soft-touch fabric with a tailored fit — perfect for work and casual wear."
price="$39.99"
/>
</div>
);
}