Component Showcase
Component Library
A comprehensive showcase of all available components in the design system. Each component is modular and designed to work seamlessly together.
UI Components
Core Building Blocks
Essential UI components for building interfaces
Buttons
Various button variants and sizes
Card Component
Card with header, content, and footer
This is the card content area. Cards are versatile containers for displaying information.
Input & Label
Form input components
Switch
Toggle switch component
Status: Disabled
Accordion
Collapsible content sections
Navigation Menu
Site navigation component
Carousel
Image/content carousel with navigation
Data Display
Charts & Visualizations
Components for displaying data and statistics
Pie Chart
Circular chart for data visualization
Radial Chart
Radial bar chart component
Progress
Current progress indicator
Avatar Circles
Overlapping avatar display
Content Components
Blog & Media
Components for displaying blog posts and content
Blog Card
Card for displaying blog posts
Blog Author
Author information component
Default
Vance Denson
With Twitter
With Update Date
Written by Vance Denson
Image Only
Safari Browser Frame
Browser frame component for showcasing screenshots
Magic UI
Animated Effects
Beautiful animated components and effects
Blur Fade
Fade-in animation with blur effect
This content fades in with a blur effect
Border Beam
Animated border effect
Hover to see the animated border
Marquee
Scrolling text or content
Dot Pattern
Decorative dot pattern background
Background with dot pattern
Flickering Grid
Animated grid background effect
Animated grid background
Ripple Effect
Animated ripple background
Ripple effect background
GSAP Animations
Professional Web Animations
Powerful GSAP (GreenSock Animation Platform) components for creating smooth, performant animations
Ball Button
Magnetic button with elastic animation
Scramble Text
Text scrambling animation effect
GSAP
Circular Timeline Animation
Interactive circular animation with timeline controls
Positioning of animations on the timeline:
Rotating Triangles
Grid of continuously rotating triangles
Interactive Squares
Mouse-responsive squares with elastic animation
Concentric Circles
Mouse-following concentric circles
Animated Stroke Circles
Staggered stroke animation on concentric circles
Text Shadow Effect
Mouse-responsive text shadow animation
NEXT
Image Filter Effect
Mouse-responsive image filters (hue-rotate, blur, opacity)
Layout Components
Structure & Organization
Components for organizing page structure
Section Component
Container with title, subtitle, and description
The Section component is used throughout this page to organize content. It provides consistent spacing and typography for section headers.
This page itself uses the Section component to organize different component categories.
Drawer
Slide-out navigation drawer
Click the menu icon in the header to see the drawer in action.
Theme
Dark & Light Mode
Theme switching component
Theme Toggle
Switch between light and dark themes
Toggle theme using the button in the header
GSAP Advanced Image Effects
Complex Image Animations
Stunning GSAP-powered image effects with parallax, 3D transforms, and unique reveal animations
Image Parallax Zoom
Parallax movement combined with zoom effect on scroll
Parallax Zoom
Image Reveal Mask (Circle)
Circular mask reveal on scroll
Image Reveal Mask (Rectangle)
Rectangular mask reveal on scroll
Image 3D Flip
3D flip effect on scroll with back content
Image Magnetic Hover
Magnetic hover effect that follows cursor
Magnetic Hover Effect
Image Split Reveal
Image splits into grid pieces and reassembles
Image Stack Reveal
Stacked images reveal with depth effect
Image Scroll Zoom
Zoom in/out based on scroll position
Scroll to Zoom
Image Liquid Reveal
Liquid wave reveal effect on scroll
Image Perspective Tilt
3D perspective tilt on scroll and hover
Image Distortion Wave
Wave distortion effect with blur reveal
Image Morphing Grid
Grid cells morph and reassemble with elastic animation
Horizontal Scroll Gallery
Horizontal scrolling image gallery with pinning
Image 1
Image 2
Image 3
Image 4
Image 5
GSAP Text
Scroll-Triggered Text Animations
Modern, subtle GSAP-powered text animations that trigger on scroll
Fade In Text
Simple fade-in with slide-up effect
Blur Reveal Text
Blur-to-clear reveal effect
Split Text Reveal (Characters)
Character-by-character reveal with 3D rotation
Split Text Reveal (Words)
Word-by-word reveal with 3D rotation
Parallax Text
Smooth parallax movement on scroll
Scale Text
Scale animation from small to full size
Word Reveal
Word-by-word reveal with clip-path animation
Slide In Text (Left)
Slide in from the left
Slide In Text (Right)
Slide in from the right
Rotate Reveal Text
Rotate and scale reveal with bounce effect
Mask Reveal Text (Left)
Clip-path mask reveal from left
Mask Reveal Text (Up)
Clip-path mask reveal from bottom
GSAP Advanced Text + Image Scroll Triggers
Complex Combined Animations
Stunning GSAP ScrollTrigger components that combine text and image animations for maximum visual impact
Image Text Split Reveal
Image splits horizontally or vertically, revealing text through the gap
Text Image Pin Parallax
Text pins in place while image scrolls behind with parallax effect
WIN WIN WIN
Image Text Magnetic Scroll
Both image and text respond to mouse movement with magnetic effects while scrolling
WIN WIN WIN
Text Image Morphing Reveal
Text characters explode outward, morphing into an image reveal with circular clip-path
WINWINWIN
Image Text 3D Flip Scroll
3D card flip effect with image on front and text on back. Text animates during the flip
Text Image Wave Distortion
Wave distortion effect applied to both image and text. Each character moves in a wave pattern
WINWINWIN
Image Text Staggered Cascade
Multiple image layers cascade in with staggered timing, followed by text words revealing
WINWINWIN
Text Image Pinch Zoom
Image reveals with circular clip-path and zooms in while text characters pop in with rotation
WINWINWIN
Component Library Demo
All components are modular and designed to work together seamlessly.