Components
Premium animated components that adapt to your design direction. Built with React, Framer Motion, GSAP, and Three.js.
Backgrounds
Animated backgrounds, grids, particles, and mesh gradients
Aurora Background
Animated aurora borealis gradient background with configurable colors and speed.
Gradient Blur
Blurred gradient orbs with configurable colors for atmospheric backgrounds.
Gradient Mesh
NewPremiumMulti-point animated mesh gradient that adapts to the active direction. Supports interactive mouse tracking.
Grid Background
Subtle grid pattern background using SVG for crisp rendering at any scale.
Infinite Grid
NewPremiumPerspective grid that scrolls infinitely with direction-aware coloring and edge fading.
Meteors
Falling meteor animation with randomized paths and fading trails.
Particles
Floating particle system with configurable density and movement.
Spotlight
Animated spotlight effect that follows cursor or auto-animates.
Cards
Interactive card components with hover effects and animations
Bento Grid
Apple-style bento grid layout with configurable spans and gap sizes.
Glow Card
Card with animated glow border that follows cursor position.
Hover Card
Card with smooth 3D tilt and scale on hover with spring physics.
Stack Cards
NewPremiumCards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.
Tilt Card
3D perspective tilt card that responds to mouse position.
Feature Showcase
NewPremiumInteractive three-panel bento: sidebar nav switches a live demo center panel and code snippet right panel. Perfect for SaaS feature sections.
Living System
NewPremiumA multi-panel organism that breathes, pulses, and reacts as one living entity. Nodes are connected by flowing particle streams with a shared heartbeat.
Neural Web
NewPremiumSelf-organizing neural network background. Nodes autonomously drift, form connections by proximity, pulse together, and recoil from your cursor like a living nervous system.
Synapse Card
NewPremiumIndividual cards that form a shared nervous system. Multiple SynapseCards on the same page automatically connect to each other with a synchronized heartbeat pulse.
Effects
Cursor effects, hover reveals, audio reactivity, and more
Animated Input
Input field with animated label, focus ring, and validation states.
Audio Reactive
NewPremiumElements that pulse and react to audio input from the microphone. Includes visualizer bars and scale effects.
Custom Cursor
Custom cursor replacement with smooth trailing and hover state changes.
Fluid Cursor
NewPremiumMetaball-style cursor with trailing blobs that merge and separate. Direction-aware coloring with blend mode effects.
Magnetic Button
Button that magnetically attracts toward the cursor on hover.
Magnetic Gallery
NewPremiumImage gallery where items are attracted to and repelled by the cursor with spring physics.
Reveal on Hover
NewPremiumText that reveals an image on hover, following the cursor position with spring animations.
Text Distortion
NewPremiumCanvas-based text that warps and distorts on hover with horizontal slice displacement.
Layout
Masonry grids, hero sections, and premium page layouts
Navigation
Morphing navbars and scroll-aware navigation
Scroll
Scroll-driven animations, parallax, and video playback
Scroll Video
NewPremiumVideo that advances frame-by-frame as the user scrolls. Apple-style product reveal effect with sticky positioning.
Parallax Scroll
Parallax scrolling effect with configurable speed and direction.
Infinite Scroll
Continuous horizontal or vertical scrolling content with seamless looping.
Text
Text animations, gradient text, reveals, and distortion
Gradient Text
Text with animated gradient color effect.
Split Screen Text
NewPremiumText that splits apart vertically on scroll, revealing content underneath. Scroll-driven with sticky positioning.
Text Generate
Text that generates character by character with a typing cursor effect.
Text Reveal
Text that reveals word by word with scroll-driven animation.
3D / Three.js
WebGL particle systems, globes, and 3D scroll scenes
Floating Shapes
3D floating geometric shapes with gentle rotation and bounce.
Globe
Interactive 3D globe with connection arcs and glow effects.
Particle Morph
NewPremiumParticle system that smoothly morphs between geometric shapes (sphere, cube, torus, spiral). Direction-aware coloring.
Scroll Progress 3D
NewPremium3D scene that rotates and scales based on page scroll progress. Wireframe icosahedron with direction-aware coloring.
Transitions
Page transitions, preloaders, and noise dissolves