Buttons
Cards
Scroll Card
GSAP-powered rotating scroll-pinned sections with Lenis smooth scrolling
Sticky Cards
GSAP pinned stacking cards that stack on top of each other as you scroll
Card Scatter
Scroll-driven card scatter animation with GSAP — cards fly out and rotate as you scroll, revealing a centered logo and CTA
Stacked Scroll Cards
Scroll-pinned stacking cards with scale-down, rotation, and overlay dimming effects using GSAP
Lenis Expanding Grid
Responsive 10-row grid hooked recursively onto React Lenis scroll metrics, widening dynamically upon upward viewport intersections.
Transitions
Grid Transition
Grid-based page transition with block scaling reveal and GSAP, powered by next-transition-router
SVG View Transition
SVG path-based overlay page transition drawing a step-by-step graphic, using next-view-transitions
Block Transition
Grid-based block reveal page transition overlay with customizable animations
Page Transition
Full-page block reveal transition that intercepts Next.js navigation, animates 20 vertical blocks with an SVG logo draw sequence.
SVG Stroke Transition
SVG wipe-draw page transition — two curved paths animate their stroke to cover and reveal pages with a dramatic wipe effect.
Preloader
Counter Reveal Preloader
GSAP preloader with counter, image reveal, and overlay messages — a cinematic loading sequence with word-split hero reveal
Crisp Loading
GSAP-powered image strip loading animation with SplitText heading reveal transitioning into an interactive thumbnail slideshow.
Orbit Preloader
GSAP-powered preloader with 8 rotating SVG orbit text rings, a 0–100 counter, and a cinematic hero reveal with word-by-word slide-up animation
Cinematic Scatter Preloader
Cinematic preloader with progress bar, stacked image reveals, SplitText character scatter, and hero headline entrance
Greet Preloader
A multilingual greeting overlay animation powered by GSAP with a curved transition effect.
Hover Effects
Mouse Trail
Image trail effect that spawns masked image cards following the cursor with staggered clip-path reveal and fade-out animations.
Interactive Team Hover
Team section where hovering a profile image expands it and reveals the member's name via SplitText char animation from the centre.
Interactive Base Grid
Background lattice with performance-optimized mathematical distance checks enabling reactive hover clusters.
Stagger Link Hover
Per-character clip-path rotation hover animation using the Web Animations API with an animated progress bar indicator.
Glitch Ripple Text
ASCII glitch ripple hover effect — characters scramble in a wave pattern originating from the mouse position with configurable spread and character pool.
3D Image Hover
GSAP multi-layer image hover with shape controls (rect/circle/diamond/hexagon), toggle effects (rotation/blur/color/opacity/parallax/3D), and live slider tuning.
Line Wobble
SVG elastic wobble line that follows your mouse with spring-physics snap-back animation. Zero dependencies.
Flip Text Hover
Pure CSS per-character flip-up hover effect with staggered spring animation using text-shadow technique.
Word Underline
Random hand-drawn SVG underline that draws on hover. Each hover picks a new unique underline variant. Powered by GSAP DrawSVGPlugin.
Interactive Gallery
Interactive image gallery with hover-activated thumbnails and click-to-open overlay panels featuring GSAP Flip transitions, title animation, and detail content.
Pixelated Image Reveal
Image card with pixelated grid transition between default and hover states. Dynamic pixel grid with random stagger animation. Supports touch devices.
Scroll Effects
SVG Scroll Draw
SVG path stroke-draw animation on scroll with feature cards and pinned sections
Clock Scroll
Clock hand rotation scroll animation with portrait reveal and text cycling
Animated Teams
Scroll-animated team section with card slide-in, letter initials, and responsive layout using GSAP ScrollTrigger
Work Grid
Scroll-triggered work portfolio grid with rotation entrance animations powered by GSAP
Spotlight Gallery
3D scroll-driven image gallery — images scatter from a central point into space with cover reveal and word-by-word text transitions
Telescope Image Scroll
Scroll-pinned telescope zoom effect with stacked mask layers revealing a full banner image, split intro text that slides apart, and word-by-word header reveal.
Horizontal Loop Scroll
Infinite horizontal text marquee that reacts to scroll speed — scroll faster to speed up the marquee. Powered by GSAP + Observer.
Text Animations
Block Reveal Text
Text reveal animation with a sliding colored block overlay effect using GSAP SplitText
Telescope Text
Scroll-powered character-by-character text reveal with alternating slide directions using GSAP SplitText
Scroll Highlight Text
Scroll-driven character color animation — text lights up with an accent color then transitions to final color as you scroll
Text Fill Scroll
Text gradually fills with a gradient color as you scroll through it. Powered by GSAP ScrollTrigger.
Sliders
Three.js Slider
Infinite 3D image slider with distortion effects, drag, wheel, and touch support powered by Three.js
OVA Scroll Slider
Fullscreen scroll-driven image slider with GSAP SplitText title animations, progress bar, and slide indicators
Work Carousel
Fullscreen vertical-scroll carousel with dramatic clip-path entry transitions, SplitText word/line reveals, and looping slide navigation via scroll or swipe.
Infinite Parallax Slider
Infinite horizontal slider with deep parallax on images, supporting wheel scroll, drag, and touch. Slides loop seamlessly with inner image offset.
Valvet Arc Carousel
A smoothly interpolated arc gallery leveraging GSAP on scroll to scale, position, and stack images algorithmically.
WebGL Slideshow
Three.js + GSAP shader-powered slideshow with 5 transition effects (glass, frost, ripple, plasma, timeshift), auto-play, keyboard nav, and effect switcher.
Draggable Infinite Slider
Infinite horizontal slider with drag support, prev/next buttons, slide counter, and caption badges. Powered by GSAP Draggable + InertiaPlugin.
Hero
Interactive Gradient
WebGL fluid gradient powered by Three.js that distorts and trails behind the mouse cursor. Fully customisable colours, brush size, decay, and distortion.
Dynamic Background
WebGL particle system that renders any logo/image as interactive particles. Mouse proximity pushes particles apart with spring-back physics.
Timeline Hero
Cinematic hero section with stacked image intro reveal, radial gradient overlay, and GSAP SplitText word animations
Navigation
Animated Menu
Fullscreen overlay menu with GSAP clip-path animations, hamburger toggle, and 3D character reveal
Fullscreen Menu
Fullscreen overlay menu with GSAP clip-path reveal, SplitText char animations, mouse-following link highlighter, and smooth lerp movement
Bubble Navbar
Dark pill-shaped navbar with animated bubble indicators — active item gets a light gradient bubble, hovered items get a subtle dark highlight.
Side Navigation
Full-screen side navigation panel with GSAP wipe animation, staggered link entrances, overlay backdrop, and escape key close.
Dock Navbar
macOS-style dock navigation bar with magnification hover effect. Items scale up on hover with neighbors also growing proportionally.
Overlay Menu
Fullscreen overlay navigation with layered background panel animations, clip-path reveal, and SplitText line-by-line link animations.