"use client"; import { motion, AnimatePresence, LayoutGroup } from "motion/react"; import React, { useState, useId, useRef } from "react"; import { useOutsideClick } from "@/hooks/use-outside-click"; import Image from "next/image"; import { Button } from "@/components/ui/button"; import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { cn } from "@/lib/utils"; // Change Here const PHOTOS = [ { id: "photo-1", src: "https://images.unsplash.com/photo-1755398104393-746e52af4a9f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mzd8fHxlbnwwfHx8fHw%3D?q=80&w=800", alt: "Technology setup", rotation: -15, x: -90, y: 10, zIndex: 10, }, { id: "photo-2", src: "https://images.unsplash.com/photo-1756764099214-b09a5666914b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTB8fHxlbnwwfHx8fHw%3D?q=80&w=800", alt: "Design research", rotation: -3, x: -10, y: -15, zIndex: 20, }, { id: "photo-3", src: "https://images.unsplash.com/photo-1757372429884-92e02350c5d9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjJ8fHxlbnwwfHx8fHw%3D?q=80&w=800", alt: "Code and development", rotation: 12, x: 75, y: 5, zIndex: 30, }, { id: "photo-4", src: "https://images.unsplash.com/photo-1756993399574-2fa126269ce7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8NzR8fHxlbnwwfHx8fHw%3D?q=80&w=800", alt: "Dashboard interface", }, { id: "photo-5", src: "https://images.unsplash.com/photo-1756990637536-714b76296a30?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8ODJ8fHxlbnwwfHx8fHw%3D?q=80&w=800", alt: "Product design", }, { id: "photo-6", src: "https://images.unsplash.com/photo-1756838197413-07f174def66c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTA0fHx8ZW58MHx8fHx8?q=80&w=800", alt: "Laptop on desk", }, { id: "photo-7", src: "https://images.unsplash.com/photo-1756310406492-3ce3bef447aa?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTQwfHx8ZW58MHx8fHx8?q=80&w=800", alt: "Team collaboration", }, { id: "photo-8", src: "https://images.unsplash.com/photo-1755311905796-d539c7d24acd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTgzfHx8ZW58MHx8fHx8?q=80&w=800", alt: "UX wireframes", }, { id: "photo-9", src: "https://images.unsplash.com/photo-1755542366797-b3f036b11310?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTg2fHx8ZW58MHx8fHx8?q=80&w=800", alt: "Developer workspace", }, ]; const transition = { type: "spring", stiffness: 160, damping: 18, mass: 1, } as const; export function ExpandableGallery() { const [isExpanded, setIsExpanded] = useState(false); const layoutGroupId = useId(); const containerRef = useRef(null); useOutsideClick(containerRef, () => { if (isExpanded) { setIsExpanded(false); } }); return (

{isExpanded && ( setIsExpanded(false)} className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-all group z-50" >

Go back )}

{PHOTOS.map((photo, index) => { const isPrimary = index < 3; if (!isPrimary && !isExpanded) return null; return ( !isExpanded && setIsExpanded(true)} > {photo.alt}

); })}

{!isExpanded && (

People don’t fall in love with components.{" "}
They fall in love with how something feels.

)}

); } export default ExpandableGallery

People don’t fall in love with components.{" "} They fall in love with how something feels.

People don’t fall in love with components.{" "}
They fall in love with how something feels.

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Expandable Gallery

Created by

Installation

How to use

Dependencies

Website