ui-fx-kit
64 composable React effects
Hooks · CSS · Components
Background
14 effectsAurora Background
Soft flowing aurora bands in indigo, violet, and cyan. Minimal canvas animation.
Constellation
Interactive star field with proximity-based constellation lines.
Gradient Mesh
Drifting radial gradient blobs. Stripe/iOS wallpaper style.
Matrix Rain
Classic digital rain with falling katakana and latin characters.
Ripple Wave
Mouse-triggered ripple waves propagating across the canvas.
Starfield Warp
Warp-speed star tunnel with dynamic speed and color controls.
Geometric Morph
SVG polygon morphing between shapes with smooth interpolation.
Noise Flow Field
Perlin noise-driven particle flow field — generative art aesthetic.
Silk Waves
Fluid, silk-like wave animation with soft gradient colors.
Plasma Shader
WebGL plasma effect with sinusoidal color mixing.
Lightning Bolts
Recursive fractal lightning bolts with glow and branching.
Light Rays
Volumetric god-rays emanating from a central light source.
Grid Distortion
Mouse-reactive grid mesh with spring-based point distortion.
Liquid Chrome
Reflective liquid metal surface with WebGL shading.
Text
10 effectsTypewriter Text
Realistic keystroke simulation with cursor blink and multi-phrase cycling.
Text Reveal
Scroll-driven word-by-word reveal with opacity and blur transitions.
Scramble Text
Matrix-style character scramble that resolves to the target string.
Split Flap
Airport departure board flip animation — each character flips through the alphabet.
Morphing Text
Smooth blur-morph transition between words. Google Fonts style.
Staggered Chars
Per-character entrance animation with wave, bounce, rotate, and more variants.
Glitch Text
CSS glitch effect with RGB split and scanline artifacts. Mouse-reactive.
ASCII Text
Canvas-rendered ASCII art text with mouse proximity reveal.
Text Pressure
Variable-font weight morphs based on mouse proximity to each character.
Circular Text
Text arranged on a circle path with auto-rotate and hover-reverse.
Card
9 effectsSpotlight Cards
Mouse-tracking spotlight that illuminates cards from within. Dark glassmorphism.
Physics Cards
Draggable cards with spring physics, tilt on hover, and collision stacking.
Holographic Card
Foil shimmer with sparkle particles and dynamic 3D tilt.
Flip Card
3D card flip with spring physics. Supports hover and click triggers.
Stack Swipe
Tinder-style swipeable card stack with spring physics and velocity detection.
Bento Grid
Apple-inspired bento layout with per-cell 3D tilt and staggered entrance.
Parallax Depth Card
Multi-layer card with per-layer parallax depth on hover. 3D immersion effect.
Sticker Peel
Corner-peel effect that reveals content beneath, triggered by mouse proximity.
Reflective Card
Glass or metallic card surface with dynamic light reflection on tilt.
Cursor
6 effectsCursor Glow
Glowing trail particles that follow the cursor.
Blob Cursor
WebGL metaball cursor — a liquid blob that morphs around the pointer.
Splash Cursor
Particle splash burst that follows cursor movement.
Pixel Trail
Colored pixel squares trail behind the cursor.
Image Trail
Images appear and fade along the cursor path.
Ghost Cursor
Chain of ghost dots that follow the cursor with spring lag.
Shader
8 effects3D Hero
Three.js scene with floating geometry, particles, and mouse interaction.
Metallic Paint
WebGL brushed-metal surface with directional specular highlights.
Iridescence
WebGL rainbow sheen that shifts with mouse position — oil-slick effect.
Liquid Ether
Swirling plasma field with mouse-reactive fluid dynamics.
Prism Refraction
WebGL chromatic aberration and RGB dispersion lens effect.
Metaballs
WebGL metaball simulation — organic blobs that merge and separate.
Noise Grain
Animated film grain overlay with mouse proximity clear-zone.
Interactive
17 effectsSpotlight Input
Input with spotlight glow, sparkle particles on focus, and shockwave on submit.
Interactive Dot Grid
A grid of dots that reacts to cursor proximity with displacement and connecting lines.
Scroll Velocity
Marquee text that speeds up and slows down based on scroll velocity.
Particle Text
Text built from particles that explode and reform on toggle.
Dock Magnify
macOS-style dock with Gaussian magnification based on cursor proximity.
Confetti Burst
Physics-based confetti explosion with gravity and rotation.
Drag Reorder
Smooth drag-to-reorder list with spring animation and live index tracking.
Click Spark
Burst of spark lines radiating from each click point.
Horizontal Scroll
Vertical scroll converted to horizontal movement — magazine scroll pattern.
Counter Ticker
Slot-machine digit scroll to animate numbers on scroll into view.
Circular Gallery
Draggable items arranged on a 3D circular carousel with momentum.
Shimmer Skeleton
Animated loading skeleton with shimmer sweep and preset shapes.
Page Transition
Morph, fade, or slide transitions between content slots — router-ready.
Stagger List
List items animate in with configurable stagger patterns and variants.
Color Palettes
Pick a palette, see it applied live below. Then copy the colors into your effect props.
Background
Card Title
A description using the muted color from this palette.
Heading
Gradient Text
Body text in muted
All colors — click to copy