Cards, Galleries & UI
Card interactions, galleries, sliders, and section layouts — reusable UI motion patterns for marketing sites.
4 indexed demos · 29 total in this collection
Browse other experiment categories
Experiments in this category
- Stack RevealDemoExpandable card stack with spring layout animations and color transitions. Animated card component with hover effects and spring motion.
- Swipe CardsDemoTinder-style draggable card stack with rotation and spring physics. Animated card component with hover effects and spring motion.
- Warp SliderDemoWebGL-powered image slider with warp distortion transitions, GSAP text animations, and Three.js shaders. Interactive slider for galleries, heroes, and editorial layouts.
- Circular GalleryLanding page reveal with GSAP Flip-powered circular gallery layout transition and counter loader. A GSAP animation, reusable React component. Animated gallery for portfolio grids and landing page showcases.
- 3D Card FlipHover-triggered 3D card flip with preserve-3d, gradient reflections, shimmer overlay, and backface content reveal. Animated card component with hover effects and spring motion.
- Split-Screen SliderDemoDual-panel slider where left and right halves animate in opposite directions with GSAP-choreographed split transitions. Animated React carousel with smooth drag and transition motion.
- Esea CarouselDemoScroll-driven fullscreen carousel with clip-path slide transitions, infinite marquee text, and progress bar indicators using GSAP and Lenis. Animated React carousel with smooth drag and transition motion.
- Card BeamHover-activated beam light effect card with glowing border gradient and spotlight tracking. Animated card component with hover effects and spring motion.
- Card RevealDemoScroll-triggered card reveal with staggered entry animations and depth layering. Animated card component with hover effects and spring motion.
- Card StackDemoDraggable card stack with swipe-to-dismiss and spring restack physics. Reusable React card layout for galleries and feature sections.
- Curved SliderDemoCircular arc slider with perspective-warped cards and smooth drag navigation. Animated React carousel with smooth drag and transition motion.
- Distort SliderDemoImage slider with WebGL distortion transition effects between slides. Animated React carousel with smooth drag and transition motion.
- First Last CardsCard layout with first and last card emphasis, hover effects, and staggered entry. Reusable React card layout for galleries and feature sections.
- Flip GalleryDemoImage gallery with GSAP Flip-powered layout transitions between grid and detail views. Animated gallery for portfolio grids and landing page showcases.
- Lalle GalleryDemoHorizontal scroll gallery with draggable cards and momentum-based navigation. Interactive image gallery with scroll and hover-driven reveals.
- Phive CardsDemoFive-card layout with hover-triggered expansion and spring-based reflow animations. Animated card component with hover effects and spring motion.
- Project GalleryDemoPortfolio project gallery with filterable grid, hover previews, and detail transitions. Animated gallery for portfolio grids and landing page showcases.
- Roadmap CardsDemoTimeline-style roadmap cards with connected path lines and staggered scroll reveals. Animated card component with hover effects and spring motion.
- Services ScrollDemoScroll-driven services section with pinned navigation and content transitions. Reusable landing page section with staggered reveal motion.
- Strip SliderDemoVertical strip-based slider with staggered panel reveals and content transitions. Interactive slider for galleries, heroes, and editorial layouts.
- Tunnel SliderDemoTunnel-perspective slider with 3D depth and receding panel transitions. Interactive slider for galleries, heroes, and editorial layouts.
- Video Slider 3DDemo3D perspective video slider with depth stacking and cinematic transitions. Animated React carousel with smooth drag and transition motion.
- WeGo GalleryDemoInteractive gallery with expandable image cards and smooth layout transitions. Animated gallery for portfolio grids and landing page showcases.
- Accordion GalleryDemoExpandable accordion-style image gallery with smooth width transitions. Interactive image gallery with scroll and hover-driven reveals.
- Vertical GalleryDemoVertical scrolling gallery with parallax image transitions and caption reveals. Interactive image gallery with scroll and hover-driven reveals.
- Face ButtonDemoInteractive face-shaped button with expressive hover animations and micro-interactions. Button hover effects and micro interactions for premium UI.
- Bubble Text SliderDemoText slider with bubble-shaped morphing transitions between slides. Interactive slider for galleries, heroes, and editorial layouts.
- Osmo SliderDemoOsmo-inspired horizontal slider with infinite loop and smooth drag navigation. Interactive slider for galleries, heroes, and editorial layouts.
- Arc ButtonDemoCircular arc-shaped button with rotating text and magnetic hover interaction. Reusable React button animations for marketing and product sites.
Need a custom build? Contact ZiyadX to adapt these patterns for your brand, SaaS, or e-commerce site.