Components
Loading preview...
The OrderTrackingParallaxCard is a highly interactive, content-rich UI component designed to make order tracking both informative and visually engaging. Built with Framer Motion, it uses subtle 3D parallax tilt effects to bring depth to different layers — the delivery truck image, order details, and the progress tracker each shift independently as the user moves the cursor, creating a dynamic sense of motion. The card includes comprehensive details such as the order number, product name, current status badge, ETA, and a visual step tracker that clearly communicates progress from processing to delivery. Its clean design, layered depth, and real-time feedback make it ideal for e-commerce platforms, logistics dashboards, or delivery apps, offering users not just information but a premium, interactive experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/order-tracking-parallax-card"use client";
import * as React from "react";
import { OrderTrackingParallaxCard } from "@/components/ui/order-tracking-parallax-card";
export default function OrderTrackingParallaxDemo() {
return (
<OrderTrackingParallaxCard
orderId="4582"
product="Wireless Headphones"
status="Out for Delivery"
eta="Tomorrow, 7 PM"
/>
);
}