Ctrl+K
Create a Gallery page for a creative photo and video studio. The gallery should be visually rich, fully responsive, and include smooth animations and category filters. The content includes images and video clips from various types of shoots. The design should reflect a premium, cinematic, and artistic vibe. 🎯 Goals: Showcase portfolio across multiple categories Allow users to easily explore and filter content Make the visual experience immersive and modern 🔍 Key Features: Category Filters (with animation): Use horizontal scroll or toggle tabs Categories: "All", "Weddings", "Portraits", "Products", "Fashion", "Events", "Videos" Smooth filtering transition (fade/slide in/out) Gallery Grid / Masonry Layout: Responsive masonry layout with varied image sizes On-hover effects (zoom in, subtle overlay with title) Use lazy loading for performance Lightbox popup on click (with full image or video playback) Video Support: Embed short video clips with a play button overlay Autoplay on hover (optional), mute by default Separate section or integrated within the same gallery Animated Load-In: Use scroll animations (e.g., fade-up, zoom-in) Add staggered entry for items when page loads Minimal UI Design: Clean white or dark background Ample padding between images Elegant captions (project name, date, client name optional) 🎨 Style Guide: Fonts: Use elegant fonts like Poppins, DM Sans, or Playfair Display Color Palette: Monochrome base with subtle gold or pastel accents Animation Library: Use Framer Motion or GSAP-style scroll/hover effects 📱 Mobile Optimization: Stack categories into a dropdown or horizontal swipe Ensure tap-to-expand for images and videos Extras (Optional): Search bar to look up specific projects or keywords Infinite scroll or "Load More" button Option to share images/videos to social platforms Client logo badges (in a sticky bar or footer) Include a short intro section at the top: “Explore Our Visual Journey: From timeless portraits to vibrant events, dive into our world of moments captured in motion and stillness.” - Initial Deployment
f0eb4c3
verified