The component library
built for speed
Original Framer Motion components with TypeScript, Tailwind CSS, and copy-paste code. Every component includes an AI prompt for instant integration.
Scroll Animations
3 componentsParallax Hero
Multi-layer scroll parallax with sticky positioning, background blur, and text fade. Uses useScroll + useTransform for independent motion layers.
Container Scroll
3D perspective card rotation driven by scroll position with responsive mobile support. The card rotates from 20deg to 0deg and scales based on scroll progress.
Text Gradient Scroll
Word-by-word color reveal as you scroll. Each word independently tracks scroll progress and transitions from muted gray to your custom gradient colors.
Reveal Effects
2 componentsScroll Reveal
Intersection-observer entrance animations with 4 directions (up, down, left, right) and configurable delay, duration, threshold. Includes StaggerReveal for cascading groups.
Animated Counter
Numbers that spring-animate to their target value when scrolled into view. Supports prefix ($), suffix (%, k, +), and decimal places. CounterGroup for stat rows.
Cards
2 componentsSpotlight Card
Card with a glowing radial spotlight that follows your cursor. The gradient tracks mouse position in real-time with configurable color and size.
Flip Card
3D card flip on hover or click with spring physics. Front and back faces use CSS preserve-3d and backface-visibility for true 3D rotation.
Hero Sections
6 componentsGradient Mesh Hero
Full-screen hero with animated gradient mesh blobs, grain texture overlay, and staggered text entrance. The colored blobs slowly drift and pulse.
Split Hero
Two-column hero with text on one side and an image on the other. Staggered entrance animations with a decorative gradient blob behind the image.
Spotlight Beam Hero
Dramatic hero with light beams from above, floating particles, grid background, and pulsing glow at the beam impact point. Dark, cinematic feel.
Badge Hero
Clean SaaS-style hero with an animated announcement badge pill at the top, staggered text entrance, and subtle radial gradient. Perfect for product landing pages.
Retro Grid Hero
Dramatic hero with a perspective grid floor stretching to the horizon, pulsing glow line, and scattered star dots. 80s retro/synthwave aesthetic.
Aurora Hero
Hero with animated aurora borealis light bands that drift and pulse. Multiple blurred color layers create a mesmerizing northern lights effect.
Navigation
5 componentsFloating Navbar
Glassmorphism navbar that appears when scrolling up and hides when scrolling down. Pill-shaped with animated hover indicator that follows the active item.
Animated Tabs Navbar
Navbar with animated underline indicator that slides between tabs using layoutId. Supports controlled and uncontrolled modes with logo and right-side content slots.
Dock Navbar
macOS-style icon dock with animated active indicator, hover tooltips, and spring-based scale effects. Labels appear under the active icon.
Mega Menu Navbar
Full-width navbar with animated dropdown panels. Menu items with chevron indicators reveal rich submenu grids with icons and descriptions.
Pill Navbar
Rounded pill-shaped navbar with animated active indicator sliding between items. Supports a primary CTA button variant for the last item.
Footers
2 componentsMulti-Column Footer
Classic footer with brand column, link columns, social icons with hover animations, and a bottom copyright bar.
Minimal Footer
Clean centered footer with logo, horizontal link row, social icon row, and copyright text. Perfect for simple sites.
Call to Action
1 componentPricing
4 componentsPricing Cards
Three-tier pricing layout with animated monthly/yearly toggle, feature checklists, popular badge, and hover lift. Prices animate on toggle.
Pricing Table
Feature comparison table with tiers as columns and features as rows. Checkmarks, X marks, or custom text per cell. Monthly/yearly toggle with animated prices.
Radio Pricing
Vertical plan selector with radio buttons. Selected plan expands to show features. Single-column layout perfect for checkout flows or plan selection modals.
Two-Tier Pricing
Clean side-by-side two-plan layout. One plan can be highlighted with inverted colors (dark card). Hover lift animation and feature checklists.
Features & Grids
3 componentsFeature Grid
Responsive grid of feature cards with icons, staggered entrance animations on scroll. Configurable 2, 3, or 4 column layout with hover effects.
Bento Grid
Asymmetric Apple-style bento box layout with mixed column/row spans. Each cell can contain custom visuals with text overlay at the bottom.
Alternating Features
Zigzag layout with text on one side and image on the other, alternating each row. Scroll-triggered entrance animations with gradient blob behind images.
Content Sections
2 componentsFAQ Accordion
Animated accordion FAQ with plus icon rotation, smooth height transitions, and optional multi-open mode. Hover highlight on questions.
Stats Section
Animated statistics section with spring-based number counting and staggered entrance. Available in row (divider separated) or grid layout.
Social Proof
1 componentCharts & Data
3 componentsAnimated Bar Chart
Horizontal or vertical bar chart with staggered entrance animations. Each bar grows from zero when scrolled into view.
Animated Line Chart
SVG line chart with path drawing animation, fill area, data point dots, and grid lines. Line draws itself when scrolled into view.
Animated Donut Chart
SVG donut chart with segments that animate in sequentially. Center label, configurable thickness, and auto-generated legend with percentages.
Ready to use these components?
Every component comes with Copy Prompt for AI assistants, Copy Code for instant integration, and full TypeScript types.