import * as React from "react"; import { ExampleGalleryImmersiveMediaFour } from "@/registry/example-gallery-immersive-media-four/example-gallery-immersive-media-four"; import { import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; Camera, Film, Image as ImageIcon, Palette, Sparkles, } from "lucide-react"; type ComponentProps = React.ComponentPropsWithoutRef< typeof ExampleGalleryImmersiveMediaFour >; const filters: NonNullable = [ { id: "ui", label: "UI Kits", icon: , }, { id: "dashboards", label: "Dashboards", icon: , }, { id: "animations", label: "Motion", icon: , }, ]; const mediaTypes: NonNullable = [ { id: "video", label: "Video", icon: , }, { id: "image", label: "Screenshot", icon: , }, { id: "animation", label: "Animation", icon: , }, ]; const items: ComponentProps["items"] = [ { id: "command-center", title: "Command center walkthrough", summary: "Live prototype recording that toggles between dark and light surfaces while showcasing contextual analytics overlays.", categoryIds: ["ui", "dashboards"], mediaTypeIds: ["video"], cover: { id: "command-cover", src: "https://images.unsplash.com/photo-1517433456452-f9633a875f6f?auto=format&fit=crop&w=1400&q=80", alt: "Command center dashboard video preview", aspectRatio: 16 / 9, }, badge: "Featured", rating: "4.8", favorite: true, tags: ["Keyboard nav", "Realtime"], slides: [ { id: "command-1", src: "https://images.unsplash.com/photo-1483478550801-ceba5fe50e8e?auto=format&fit=crop&w=1400&q=80", alt: "Command center slide with stacked cards", caption: "Layered card stack with sticky analytics drawer.", }, { id: "command-2", src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80", alt: "Command center in light mode", caption: "Light mode variant with hover states surfaced.", }, { id: "command-3", src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1400&q=80", alt: "Command center showing audit trail", caption: "Audit trail timeline with mention avatars and inline approvals.", }, ], integrations: ["Figma", "Framer", "Amplitude"], metadataSections: [ { id: "overview", label: "Overview", description: "High-level context for where this gallery item fits.", entries: [ { label: "Platform", value: "Web", icon: , }, { label: "Duration", value: "2m 14s", emphasis: "muted" }, { label: "Release", value: "2025 Q1", emphasis: "positive" }, ], }, { id: "interactions", label: "Interactions", entries: [ { label: "Scroll", value: "Velocity eased" }, { label: "Hover", value: "Elevation + glow", emphasis: "positive" }, { label: "Shortcuts", value: "Command + K, Command + /" }, ], }, { id: "accessibility", label: "Accessibility", entries: [ { label: "Focus states", value: "AAA-compliant", emphasis: "positive", }, { label: "Captions", value: "Auto-generated", emphasis: "muted" }, { label: "Motion", value: "Respects prefers-reduced-motion", emphasis: "positive", }, ], }, ], }, { id: "modal-gallery", title: "Modal preview carousel", summary: "Immersive modal experience with gradient overlays, metadata tabs, and swipe gestures tuned for mobile.", categoryIds: ["ui", "animations"], mediaTypeIds: ["animation"], cover: { id: "modal-cover", src: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92eee?auto=format&fit=crop&w=1400&q=80", alt: "Modal preview carousel still", aspectRatio: 4 / 5, }, rating: "4.7", tags: ["Lottie", "Carousel", "Gyro controls"], slides: [ { id: "modal-1", src: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1400&q=80", alt: "Modal overlay with tabbed metadata", }, { id: "modal-2", src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80", alt: "Modal showing carousel controls", }, ], integrations: ["LottieFiles", "GSAP"], metadataSections: [ { id: "motion", label: "Motion", entries: [ { label: "Duration", value: "600ms" }, { label: "Easing", value: "Custom cubic", emphasis: "muted" }, { label: "Spring", value: "120 / 16", emphasis: "positive" }, ], }, { id: "input", label: "Input", entries: [ { label: "Gestures", value: "Swipe + pinch" }, { label: "Keyboard", value: "Escape closes" }, ], }, ], }, { id: "media-grid", title: "Masonry media grid", summary: "Responsive CSS columns layout with lazy-loaded imagery, overlay actions, and sticky filter chips.", categoryIds: ["dashboards"], mediaTypeIds: ["image"], cover: { id: "grid-cover", src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1400&q=80", alt: "Masonry gallery preview", aspectRatio: 3 / 4, }, tags: ["Lazy-load", "Favorites"], slides: [ { id: "grid-1", src: "https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1400&q=80", alt: "Grid item close-up", }, { id: "grid-2", src: "https://images.unsplash.com/photo-1556740749-887f6717d7e4?auto=format&fit=crop&w=1400&q=80", alt: "Gallery overlay hovering", }, ], metadataSections: [ { id: "performance", label: "Performance", entries: [ { label: "LCP", value: "1.3s", emphasis: "positive" }, { label: "Placeholder", value: "Blur-up", emphasis: "muted" }, ], }, { id: "filters", label: "Filters", entries: [ { label: "Types", value: "Video, screenshot, animation" }, { label: "Persistence", value: "Query string" }, ], }, ], }, { id: "immersive-story", title: "Immersive product story", summary: "Full-screen narrative blending parallax imagery with audio reactive lighting tied to user input.", categoryIds: ["animations"], mediaTypeIds: ["video", "animation"], cover: { id: "story-cover", src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80", alt: "Immersive product story sequence", aspectRatio: 16 / 9, }, tags: ["Audio reactive", "Parallax"], slides: [ { id: "story-1", src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1400&q=80", alt: "Story slide with audio cues", }, ], metadataSections: [ { id: "channels", label: "Channels", entries: [ { label: "Web", value: "Reactive" }, { label: "Touch", value: "Haptic cues", emphasis: "positive" }, ], }, { id: "audio", label: "Audio", entries: [ { label: "Mix", value: "3D spatial" }, { label: "Volume", value: "Adaptive", emphasis: "muted" }, ], }, ], }, { id: "spec-sheet", title: "Specification sheet", summary: "Tabbed metadata layout listing specs, integrations, and security compliance for enterprise stakeholders.", categoryIds: ["dashboards"], mediaTypeIds: ["image"], cover: { id: "spec-cover", src: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1400&q=80", alt: "Specification sheet screenshot", aspectRatio: 16 / 10, }, tags: ["Tabs", "Metadata"], slides: [ { id: "spec-1", src: "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1400&q=80", alt: "Spec sheet tab", }, ], metadataSections: [ { id: "security", label: "Security", entries: [ { label: "Compliance", value: "SOC 2 Type II", emphasis: "positive" }, { label: "Data region", value: "US & EU" }, ], }, { id: "integrations", label: "Integrations", entries: [ { label: "CRM", value: "Salesforce" }, { label: "Docs", value: "Notion" }, ], }, ], }, { id: "favorite-collection", title: "Favorite collection", summary: "Curated board combining the most-saved immersive experiences from the design library.", categoryIds: ["ui", "dashboards"], mediaTypeIds: ["image", "video"], cover: { id: "favorite-cover", src: "https://images.unsplash.com/photo-1545239351-1141bd82e8a6?auto=format&fit=crop&w=1400&q=80", alt: "Favorites collection collage", aspectRatio: 1, }, tags: ["Favorites", "Insights"], slides: [ { id: "favorite-1", src: "https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=1400&q=80", alt: "Favorite board cards", }, { id: "favorite-2", src: "https://images.unsplash.com/photo-1483478550801-ceba5fe50e8e?auto=format&fit=crop&w=1400&q=80", alt: "Close-up of favorite tile", }, ], metadataSections: [ { id: "insights", label: "Insights", entries: [ { label: "Saves", value: "1,204", emphasis: "positive" }, { label: "Contributors", value: "18" }, ], }, { id: "notes", label: "Curator notes", entries: [ { label: "Highlights", value: "Modal patterns, radial gradients" }, ], }, ], }, ]; export function ExampleGalleryImmersiveMediaFourDemo(): React.JSX.Element { return ( ); } export default ExampleGalleryImmersiveMediaFourDemo;

Simple