106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
# 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:
|
|
|
|
1. 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
|
|
|
|
2. 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
|
|
|
|
3. 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
|
|
|
|
4. 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
|
|
|
|
5. 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
|
|
|
|
6. 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
|
|
|
|
7. 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
|
|
|
|
8. 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
|