iyO

# Floating Audio Device Product Showcase UI

Build a modern product showcase interface featuring floating 3D audio devices on a textured background. This design emphasizes premium product visualization with sophisticated gradients and professional typography.

## Layout Structure

Create a full-screen showcase layout with a subtle textured background and centered floating elements. The design uses a minimalist approach with two primary 3D rendered audio devices positioned diagonally across the viewport, accompanied by a clean logo placement at the bottom.

## Key Components

**Background Container**: Implement a light gray textured surface using CSS gradients or subtle noise patterns to create depth without overwhelming the focal elements.

**Floating Product Elements**: Position two circular audio device components with realistic shadows and 3D appearance. The left device features a dark frame with metallic internal components, while the right device displays a vibrant gradient face (yellow to pink to purple) with a dark rim.

**Brand Mark**: Place a modern, minimalist logo at the bottom center using clean typography with balanced letter spacing.

## Visual Styling

Use high-contrast shadows to create floating effects, with softer drop shadows beneath each product element. Implement gradient overlays for the right device face using a warm-to-cool color transition. Apply subtle metallic textures to product frames and ensure proper lighting effects to enhance the 3D appearance.

## Responsive Behavior

Scale product elements proportionally across breakpoints while maintaining their floating relationship. On mobile devices, stack elements vertically with reduced spacing and adjust shadow intensities for smaller screens.

## Dark/Light Mode

This design is optimized for light mode with the textured background. For dark mode adaptation, invert the background to a dark textured surface while maintaining product visibility and adjusting shadow opacity.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Audio Device Showcase",
    "description": "Premium product visualization interface with floating 3D rendered audio devices on textured background"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#1a1a1a", "dark": "#ffffff" },
      "neutral-50": { "light": "#fafafa", "dark": "#0a0a0a" },
      "neutral-100": { "light": "#f5f5f5", "dark": "#171717" },
      "neutral-200": { "light": "#e5e5e5", "dark": "#262626" },
      "neutral-800": { "light": "#262626", "dark": "#d4d4d4" },
      "neutral-900": { "light": "#171717", "dark": "#fafafa" },
      "gradient-warm": { "light": "#fbbf24", "dark": "#fbbf24" },
      "gradient-pink": { "light": "#f472b6", "dark": "#f472b6" },
      "gradient-purple": { "light": "#a855f7", "dark": "#a855f7" },
      "metallic-silver": { "light": "#e5e7eb", "dark": "#4b5563" },
      "shadow-light": { "light": "rgba(0,0,0,0.1)", "dark": "rgba(255,255,255,0.1)" },
      "shadow-medium": { "light": "rgba(0,0,0,0.2)", "dark": "rgba(255,255,255,0.2)" }
    },
    "typography": {
      "families": { "sans": "Inter, system-ui, sans-serif" },
      "sizes": { "xs": "12px", "sm": "14px", "base": "16px", "lg": "18px", "xl": "20px", "2xl": "24px", "3xl": "30px" },
      "weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
      "lineHeights": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" },
      "letterSpacing": { "tight": "-0.025em", "normal": "0em", "wide": "0.1em" }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px",
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "4xl": "96px",
      "rationale": "Scale based on 8px grid system for consistent visual rhythm and proper element relationships"
    },
    "radii": {
      "sm": "4px",
      "md": "8px",
      "lg": "12px",
      "xl": "16px",
      "full": "9999px"
    },
    "shadows": {
      "float": { "light": "0 20px 40px rgba(0,0,0,0.15)", "dark": "0 20px 40px rgba(0,0,0,0.4)" },
      "product": { "light": "0 25px 50px rgba(0,0,0,0.2)", "dark": "0 25px 50px rgba(0,0,0,0.6)" },
      "subtle": { "light": "0 4px 8px rgba(0,0,0,0.05)", "dark": "0 4px 8px rgba(0,0,0,0.2)" }
    }
  },
  "screens": [
    {
      "name": "ProductShowcase",
      "route": "/showcase",
      "layout": "Full-screen viewport with textured background and floating product elements",
      "components": [
        {
          "name": "BackgroundTexture",
          "type": "container",
          "properties": {
            "background": "tokens.colors.neutral-100",
            "pattern": "subtle noise texture overlay",
            "minHeight": "100vh"
          }
        },
        {
          "name": "LeftAudioDevice",
          "type": "product-element",
          "properties": {
            "width": "280px",
            "height": "280px",
            "background": "tokens.colors.primary-500",
            "borderRadius": "tokens.radii.full",
            "boxShadow": "tokens.shadows.product",
            "position": "absolute",
            "top": "20%",
            "left": "15%",
            "transform": "rotate(-15deg)"
          },
          "states": {
            "default": {
              "metallic-accent": "tokens.colors.metallic-silver"
            },
            "hover": {
              "transform": "rotate(-15deg) scale(1.05)",
              "transition": "all 0.3s ease"
            }
          }
        },
        {
          "name": "RightAudioDevice",
          "type": "product-element",
          "properties": {
            "width": "320px",
            "height": "320px",
            "background": "linear-gradient(135deg, tokens.colors.gradient-warm, tokens.colors.gradient-pink, tokens.colors.gradient-purple)",
            "border": "8px solid tokens.colors.primary-500",
            "borderRadius": "tokens.radii.full",
            "boxShadow": "tokens.shadows.product",
            "position": "absolute",
            "top": "30%",
            "right": "20%",
            "transform": "rotate(10deg)"
          },
          "states": {
            "default": {},
            "hover": {
              "transform": "rotate(10deg) scale(1.05)",
              "transition": "all 0.3s ease"
            }
          }
        },
        {
          "name": "BrandLogo",
          "type": "typography",
          "properties": {
            "fontSize": "tokens.typography.sizes.2xl",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.primary-500",
            "letterSpacing": "tokens.typography.letterSpacing.wide",
            "position": "absolute",
            "bottom": "tokens.spacing.4xl",
            "left": "50%",
            "transform": "translateX(-50%)"
          }
        }
      ]
    }
  ]
}
```
</design-specification>

Copy this prompt and paste it into your AI coding assistant to build this design.