KraavonUI

Components

53 animated components. Copy, paste, and ship.

Soft Aurorabackgrounds

Animated aurora borealis background with soft color blobs

backgroundanimationcss
Particle Fieldbackgrounds

Canvas-based floating particles that connect with lines on hover

backgroundcanvasparticles
Mesh Gradientbackgrounds

Animated mesh gradient background with smooth color transitions

backgroundgradientanimation
Dot Gridbackgrounds

Interactive dot grid that reacts to mouse movement

backgroundinteractivecanvas
Light Beambackgrounds

Animated light beam/ray sweeping effect

backgroundanimationlight
Aa
Typewritertext

Classic typewriter animation with blinking cursor

textanimationtypewriter
Aa
Scramble Texttext

Text that scrambles with random characters before revealing

textanimationscramble
Aa
Split Texttext

Text that splits and animates each letter using Framer Motion

textanimationframer-motion
Aa
Gradient Texttext

Animated gradient that flows through text continuously

textgradientanimation
Aa
Count Uptext

Number count-up animation with configurable easing

textnumberanimation
Magnetic Buttonbuttons

Button that follows the cursor magnetically with Framer Motion

buttonmagneticframer-motion
Ripple Buttonbuttons

Button with material-style ripple click effect

buttonrippleclick
Glow Buttonbuttons

Button with animated glow/neon border effect

buttonglowneon
Shine Buttonbuttons

Button with sweeping shine/glint animation on hover

buttonshinehover
Tilt Cardcards

3D tilt card that follows mouse with perspective transform

card3dtilt
Flip Cardcards

Card that flips on hover revealing back content

cardfliphover
Glow Cardcards

Card with glow effect that follows the mouse cursor

cardglowmouse
Spotlight Cardcards

Card with spotlight that follows cursor on dark background

cardspotlightcursor
Floating Sphere3d

Three.js floating sphere with metallic material and environment

3dthree.jssphere
Wave Plane3d

Three.js animated wave plane with vertex displacement

3dthree.jswave
Particle Cloud3d

Three.js particle cloud that slowly orbits and breathes

3dthree.jsparticles
Spinnerloaders

Clean animated CSS spinner with multiple size variants

loaderspinnercss
Dots Loaderloaders

Animated bouncing dots loader with staggered timing

loaderdotsanimation
Morphing Blobloaders

SVG blob shape that morphs continuously with smooth animation

loaderblobsvg
Animated Tabsnavigation

Tabs with sliding underline indicator using Framer Motion

navigationtabsframer-motion
Docknavigation

macOS-style magnifying dock with Framer Motion spring physics

navigationdockframer-motion
Floating Navnavigation

Floating pill navigation that hides on scroll down, reveals on scroll up

navigationfloatingframer-motion
Stars Backgroundbackgrounds

Twinkling star field on a deep space background

backgroundstarscanvas
Grid Backgroundbackgrounds

Dark grid with radial fade, perfect as a section backdrop

backgroundgridcss
Shader Gradientbackgrounds

Animated GLSL WebGL shader gradient, fully GPU-powered

backgroundwebglglsl
Aa
Glitch Texttext

Text that glitches with random character scramble on hover or mount

textglitchanimation
Aa
Word Rotatetext

Cycles through a list of words with smooth vertical animation

textanimationrotate
Aa
Blur Revealtext

Content that un-blurs and fades in on scroll into view

textanimationblur
Aa
Morphing Texttext

Text that morphs between strings with a blur transition

textanimationmorph
Gradient Border Buttonbuttons

Button wrapped in an animated gradient border

buttongradientborder
Spotlight Buttonbuttons

Dark button with spotlight glow following the cursor

buttonspotlightcursor
Glass Cardcards

Frosted glass morphism card with backdrop blur

cardglassblur
Neon Cardcards

Dark card with neon glow border that intensifies on hover

cardneonglow
Bento Gridcards

Apple-style bento grid layout with hover lift effect

cardgridbento
Torus Knot3d

Three.js torus knot with glass transmission material and iridescence

3dthree.jstorus
Ring Loaderloaders

Smooth SVG ring spinner with configurable size and color

loaderringsvg
Progress Barloaders

Glowing animated progress bar with optional label

loaderprogressanimation
OTP Inputinputs

6-digit OTP input with auto-focus, paste support, and glow on fill

inputotpform
Password Strengthinputs

Password input with real-time strength meter and show/hide toggle

inputpasswordform
Toast Notificationoverlays

Animated toast notifications with success, error, info, and warning variants

overlaytoastnotification
Vortex Backgroundbackgrounds

Canvas 2D particle vortex, 700 particles spiral inward with rotating hue, perfect for hero sections

backgroundcanvasparticles
Aa
Aurora Texttext

Living aurora text effect using conic-gradient clip-text + SVG feTurbulence displacement

textauroragradient
Holographic Cardcards

CSS 3D holographic foil card, rainbow conic-gradient overlay shifts with mouse position

card3dholographic
Cursor Trailbackgrounds

Smooth canvas cursor trail, fading particles follow mouse movement with configurable color and length

cursortrailcanvas
Animated Beambackgrounds

SVG connector beam that animates between two elements, great for flow diagrams and feature showcases

svgbeamconnector
Aa
Magnetic Texttext

Individual letters magnetically attract to the cursor using Framer Motion springs

textmagneticframer-motion
Liquid Buttonbuttons

Button with a liquid ripple fill on hover, smooth expanding fill from cursor entry point

buttonliquidripple
Noise Backgroundbackgrounds

Animated SVG fractal noise grain texture overlay, premium film grain effect for dark hero sections

backgroundnoisegrain