Order Tracking Parallax Card

Installation

Usage

import { OrderTrackingParallaxCard } from "@/components/ruixen/order-tracking-parallax-card";
 
export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8">
      <OrderTrackingParallaxCard
        orderId="4582"
        product="Wireless Headphones"
        status="Out for Delivery"
        eta="Tomorrow, 7 PM"
        imageUrl="https://example.com/delivery-truck.png"
      />
    </div>
  );
}

Props

Features

• 3D Parallax Effects: Mouse movement creates realistic depth and tilt
• Progress Tracking: Visual progress bar showing delivery stages
• Status Indicators: Color-coded status badges for each delivery stage
• Interactive Animation: Smooth spring-based animations on hover
• Layered Depth: Multiple Z-index layers for 3D effect
• Responsive Design: Adapts to different screen sizes

Delivery Status Colors

3D Animation Details

Mouse Tracking

• Rotation Range: ±15° on both X and Y axes
• Tilt Sensitivity: Based on mouse position within card bounds
• Spring Physics: Stiffness: 300, Damping: 30

Layer Depths

• Truck Image: translateZ(60px) + dynamic Y movement
• Order Info: translateZ(30px) + dynamic Y movement
• Progress Bar: translateZ(45px) + dynamic Y movement
• Card Container: translateZ(40px)

Progress Steps

The component automatically calculates progress based on status:

const steps = ["Processing", "Shipped", "Out for Delivery", "Delivered"];
const activeStep = steps.indexOf(status);

Progress bar fills based on the active step index.

Customization

Custom Status Colors

// Add custom status handling
const getStatusColor = (status: string) => {
  switch (status) {
    case "Processing":
      return "bg-purple-100 text-purple-700";
    case "Shipped":
      return "bg-orange-100 text-orange-700";
    // ... other cases
  }
};

Custom Progress Steps

// Modify the steps array for different workflows
const customSteps = ["Order Placed", "Preparing", "Shipped", "Delivered"];

Animation Sensitivity

// Adjust rotation ranges for more/less tilt
const rotateX = useTransform(ySpring, [-0.5, 0.5], ["10deg", "-10deg"]); // Less tilt
const rotateY = useTransform(xSpring, [-0.5, 0.5], ["-20deg", "20deg"]); // More tilt

Integration Examples

Order List

{
  orders.map((order) => (
    <OrderTrackingParallaxCard
      key={order.id}
      orderId={order.id}
      product={order.product}
      status={order.status}
      eta={order.eta}
    />
  ));
}

Dashboard Widget

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {recentOrders.map((order) => (
    <OrderTrackingParallaxCard {...order} />
  ))}
</div>

Use Cases

• E-commerce: Order tracking pages and dashboards
• Logistics: Package tracking systems
• Food Delivery: Real-time delivery status updates
• Shipping: Courier and postal service tracking
• Retail: In-store pickup and delivery tracking

Performance Considerations

• Transform Optimization: Uses hardware-accelerated transforms
• Spring Animations: Optimized spring physics for smooth motion
• Event Throttling: Mouse events are efficiently handled
• Minimal Reflows: Uses transform properties to avoid layout thrashing

Accessibility

• Keyboard Navigation: Card is focusable and keyboard accessible
• Screen Readers: Proper semantic structure with order information
• Motion Preferences: Consider implementing prefers-reduced-motion
• Color Contrast: Status colors meet WCAG contrast requirements