Interactive Background Card — UI Block
Background animation components for websites built with React and Framer Motion. CSS background animations including cursor fields, layered waves, particle noise, and aurora effects — drop into any Next.js hero section.
Interactive Dots
Interactive background
Build a hero that reacts to every move.
A responsive dot field with soft cursor repulsion, proximity lines, and physics-like return motion for polished SaaS and portfolio heroes.
Layered Wave Background
Layered wave background
A calmer hero for launches that need atmosphere.
Gradient wave layers drift at different speeds to create soft depth behind landing pages, SaaS heroes, portfolio intros, and event banners.
Particle Noise
Particle noise
Terrain-like particles flowing through a noise field.
A regular dot grid displaced by smooth noise into soft wave ridges, tuned for dark Framer-like generative hero sections.
Aurora Wavy Lines
WebGL motion
Aurora lines for immersive sections
Animated shader waves with a cooler emerald palette and smooth flowing depth.
Variants
Pro block
Upgrade to Pro to access the full source code for this block.