Spatial Product Showcase

A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients that adapt to the active item, and a sleek floating control dock. Fully responsive, accessible, and data-driven.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spatial Product Showcase to your project and fits it to your theme.

import EarbudShowcase from "@/components/ui/spatial-product-showcase";

export default function DemoOne() {
  return <EarbudShowcase />;
}