// examples
Real-world Patterns
Landing Hero Section
A cinematic hero combining AnimatedHero, TypewriterText, and AnimatedButton for a high-impact landing page opening.
Build beautiful interfaces
Copy-paste React components with smooth animations.
Feature Grid with Spotlight Cards
A responsive feature section using SpotlightCard for mouse-follow glow effects and GlowBorderCard for highlighted items.
Pricing Cards
Pricing table using GlowBorderCard for the featured tier with AnimatedButton CTAs and AnimatedNumber for prices.
Testimonials Carousel
Social proof section combining TestimonialsCard with MaskedAvatars for team display and FlipFadeText for rotating quotes.
Loading State Pattern
A polished loading experience using SkeletonLoader for content placeholders, RevealLoader for page transitions, and MorphingText for status updates.
App Navigation Layout
Full app chrome combining SpotlightNavbar for the top bar, GlassDock for a floating bottom bar, and AnimatedTabs for content sections.
Dashboard Stats Panel
An analytics dashboard section combining AnimatedCounter for live KPIs, ProgressBar for usage meters, AnimatedToggle for settings, and SpotlightCard for interactive panels.
Multi-step Onboarding Form
A guided onboarding wizard using Stepper for progress tracking, AnimatedButton for navigation, ModalDialog for confirmations, and toast notifications for feedback.
FAQ & Help Center
A support page pattern using Accordion for expandable FAQs, AnimatedTabs for category switching, Tooltip for contextual help, and DropdownMenu for quick actions.
Want to see a specific recipe? Open an issue on GitHub.