The art gallery

Name: The art gallery
Uploaded: 2026-01-22T01:19:29.053+00:00
Channel: Roy
Description: Build a high-end, minimalist virtual art gallery as a React application using Tailwind CSS. Core Navigation & 3D Logic: Implement a scalable grid system (2x2 up to 5x5) that displays artwork. The primary navigation should use a 3D cube transition: when moving left or right, the entire page should ap

Build a high-end, minimalist virtual art gallery as a React application using Tailwind CSS. Core Navigation & 3D Logic: Implement a scalable grid system (2x2 up to 5x5) that displays artwork. The primary navigation should use a 3D cube transition: when moving left or right, the entire page should appear to rotate like the face of a cube in 3D space. Ensure smooth CSS transitions with transform-style: preserve-3d and a perspective of at least 2000px. Data & API Integration: Integrate the Metropolitan Museum of Art API to fetch real paintings. The app should fetch a random pool of objects, filter for items with images, and map them to the grid. Include a 'Sync' function that refreshes the collection and a 'Curator' panel (modal) that allows local editing of artwork titles and prices. The 'Category' field should be used to display randomly generated but realistic prices (e.g., $15,000). Visual Aesthetic & Typography: Minimalist Gallery Style: Use a very clean, 'sterile' gallery look. The background should be a slight off-white (#f7f7f7) with a subtle radial 'spotlight' effect behind the grid. Typography: All text should be lowercase by default (except for IDs). Use very wide letter-spacing (tracking) for headers and labels. No Lines/Dividers: Avoid all tacky borders, underscores, or horizontal rules. Use whitespace and subtle shadows for grouping instead. Placards: Each grid item should sit in a thin white frame with a small 'placard' underneath showing the title and price. Detail Modal: When an item is clicked, open a full-screen blurred background modal. Natural Dimensions: The artwork must be displayed in its natural aspect ratio (do not force it into a square). The detail view should include an 'Inquire' button and a 'Digital Reference' copy link. Remove all decorative icons or expanders from these buttons. Technical Stack: Use lucide-react for icons (Settings, Refresh, Terminal). Implement local storage to save 'Curator' edits. Use a functional, modular component structure (CubeStage, GridFace, ToyItem).

rarepromptsGoogle AI Studio

The art gallery