Original Framer Motion components with TypeScript, Tailwind CSS, and copy-paste code. Every component includes an AI prompt for instant integration.
Multi-layer scroll parallax with sticky positioning, background blur, and text fade. Uses useScroll + useTransform for independent motion layers.
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.
Word-by-word color reveal as you scroll. Each word independently tracks scroll progress and transitions from muted gray to your custom gradient colors.
Vertical scroll drives horizontal movement. Content panels slide left as user scrolls down, creating a cinematic horizontal gallery experience.
Content sections that fade in/out and scale as you scroll through them. Left side shows numbered text, right side shows visual content. Each section tracks its own scroll progress.
Thin progress bar fixed to top or bottom of the page that fills as user scrolls. Spring-animated for smooth motion. Configurable color, height, and position.
Intersection-observer entrance animations with 4 directions (up, down, left, right) and configurable delay, duration, threshold. Includes StaggerReveal for cascading groups.
Numbers that spring-animate to their target value when scrolled into view. Supports prefix ($), suffix (%, k, +), and decimal places. CounterGroup for stat rows.
Card with a glowing radial spotlight that follows your cursor. The gradient tracks mouse position in real-time with configurable color and size.
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.
Full-screen hero with animated gradient mesh blobs, grain texture overlay, and staggered text entrance. The colored blobs slowly drift and pulse.
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.
Dramatic hero with light beams from above, floating particles, grid background, and pulsing glow at the beam impact point. Dark, cinematic feel.
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.
Dramatic hero with a perspective grid floor stretching to the horizon, pulsing glow line, and scattered star dots. 80s retro/synthwave aesthetic.
Hero with animated aurora borealis light bands that drift and pulse. Multiple blurred color layers create a mesmerizing northern lights effect.
Glassmorphism navbar that appears when scrolling up and hides when scrolling down. Pill-shaped with animated hover indicator that follows the active item.
Navbar with animated underline indicator that slides between tabs using layoutId. Supports controlled and uncontrolled modes with logo and right-side content slots.
macOS-style icon dock with animated active indicator, hover tooltips, and spring-based scale effects. Labels appear under the active icon.
Full-width navbar with animated dropdown panels. Menu items with chevron indicators reveal rich submenu grids with icons and descriptions.
Rounded pill-shaped navbar with animated active indicator sliding between items. Supports a primary CTA button variant for the last item.
Classic footer with brand column, link columns, social icons with hover animations, and a bottom copyright bar.
Clean centered footer with logo, horizontal link row, social icon row, and copyright text. Perfect for simple sites.
Three-tier pricing layout with animated monthly/yearly toggle, feature checklists, popular badge, and hover lift. Prices animate on toggle.
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.
Vertical plan selector with radio buttons. Selected plan expands to show features. Single-column layout perfect for checkout flows or plan selection modals.
Clean side-by-side two-plan layout. One plan can be highlighted with inverted colors (dark card). Hover lift animation and feature checklists.
Responsive grid of feature cards with icons, staggered entrance animations on scroll. Configurable 2, 3, or 4 column layout with hover effects.
Asymmetric Apple-style bento box layout with mixed column/row spans. Each cell can contain custom visuals with text overlay at the bottom.
Zigzag layout with text on one side and image on the other, alternating each row. Scroll-triggered entrance animations with gradient blob behind images.
Animated accordion FAQ with plus icon rotation, smooth height transitions, and optional multi-open mode. Hover highlight on questions.
Animated statistics section with spring-based number counting and staggered entrance. Available in row (divider separated) or grid layout.
Every component comes with Copy Prompt for AI assistants, Copy Code for instant integration, and full TypeScript types.
Social Proof
1 componentTestimonial Cards
Grid of testimonial cards with star ratings, author avatars (image or initial), quotes, and staggered scroll entrance animations.