3.9 KiB
Art Gallery Slider
A full-screen art gallery experience with GSAP-powered horizontal scrolling, dynamic color extraction, and animated ambient backgrounds.
Features
- Dynamic Ambient Backgrounds: Extracts dominant colors from each artwork to create animated gradient backgrounds that shift as you navigate
- Heavy Drag Interactions: Smooth drag with resistance and momentum scrolling using Framer Motion
- Trackpad/Magic Mouse Support: Horizontal scroll gestures with accumulated delta thresholds
- Keyboard Navigation: Arrow keys, A/D, Home/End for full keyboard accessibility
- Parallax Effects: Cards shift during drag with parallax motion
- Hover Animations: Artwork lifts with slide-up info panels on hover
- Glassmorphism UI: Dark editorial aesthetic with blur effects and elegant typography
Tech Stack
- Next.js 15 (App Router)
- React 19
- Framer Motion (animations, drag gestures)
- GSAP (scroll-triggered animations)
- Tailwind CSS v4
- TypeScript
Project Structure
``` ├── app/ │ ├── page.tsx # Main page │ ├── layout.tsx # Root layout with fonts │ └── globals.css # Tailwind config & design tokens ├── components/ │ ├── art-gallery-slider.tsx # Main slider component │ ├── artwork-card.tsx # Individual artwork cards │ └── navigation-dots.tsx # Navigation indicator ├── hooks/ │ ├── use-slider-navigation.ts # Keyboard & index control │ ├── use-slider-drag.ts # Mouse/touch drag logic │ ├── use-slider-wheel.ts # Trackpad/scroll handling │ └── use-color-extraction.ts # Color management ├── lib/ │ ├── color-extractor.ts # Canvas-based color extraction │ └── constants.ts # Configuration values ├── data/ │ └── artworks.ts # Artwork data └── types/ └── artwork.ts # TypeScript interfaces ```
Prompt to Recreate
``` Build a full-screen art gallery slider with the following features:
- LAYOUT & DESIGN
- Full viewport height gallery with horizontal card-based slider
- Dark editorial aesthetic (#0a0a0a background)
- Glassmorphism navigation elements with backdrop blur
- Playfair Display for headings, Inter for body text
- Cards sized at 70vh height with 3:4 aspect ratio
- DYNAMIC AMBIENT BACKGROUNDS
- Extract 3 dominant colors from each artwork image using canvas
- Create animated radial gradient backgrounds using extracted colors
- Smooth 600ms crossfade transitions between backgrounds as slides change
- Colors should be distinct (filter similar colors) and not too light
- DRAG INTERACTIONS
- Heavy drag feel with 0.4 resistance factor (mouse movement dampened)
- Momentum-based settling with slow easing (0.1 factor)
- Parallax effect on cards during drag (slight horizontal offset based on drag delta)
- Snap to nearest slide on release
- TRACKPAD/MAGIC MOUSE SUPPORT
- Detect horizontal wheel events (deltaX)
- Accumulate scroll delta with 0.3 resistance
- Trigger slide change when accumulated delta exceeds 120px threshold
- Reset accumulator after 150ms of inactivity
- KEYBOARD NAVIGATION
- Left/Right arrows and A/D keys for prev/next
- Home/End keys to jump to first/last slide
- Visual hint text showing keyboard controls
- ARTWORK CARDS
- Image with object-cover fill
- Hover state: lift card with translateY(-8px) and scale(1.02)
- Info panel slides up from bottom on hover (glassmorphism background)
- Display: title, artist name, year
- Prevent text selection on artwork info
- NAVIGATION DOTS
- Fixed position at bottom center
- Dots use extracted primary color for active state
- Scale animation on active dot
- Click to navigate to specific slide
- CODE ARCHITECTURE
- Separate custom hooks for: navigation, drag, wheel, color extraction
- Centralized types, constants, and data files
- Clean component composition in main slider ```
License
MIT