Components
50 components ported to Svelte 5. Click on any component to see it in action.
Buttons
Interactive button components with various styles and animations
RainbowButton
Animated button with a rainbow gradient border effect
RippleButton
Button with ripple click effect
ShimmerButton
Button with a rotating conic-gradient shimmer border effect
GradientButton
Button with a rotating conic-gradient rainbow border effect
InteractiveHoverButton
Button with interactive hover effect revealing alternate content
Cards
Card layouts and containers for content presentation
DirectionAwareHover
Image card with overlay that slides in from the mouse entry direction
Card3D
Interactive 3D perspective card with depth effects on child elements
CardSpotlight
Card with mouse-following radial gradient spotlight overlay
BentoGrid
Bento-style grid layout with slot-based and props-based card variants
FlipCard
Card that flips to reveal back content on hover using CSS 3D transforms
Book
3D book component with cover, spine, and back face that opens on hover
GlareCard
Holographic trading card effect with mouse-tracking glare and rainbow foil
TextRevealCard
Card that reveals text on horizontal mouse drag with animated star particles
Text & Typography
Text animations, typography effects, and content display
BlurReveal
Scroll-triggered blur-to-clear reveal animation with staggered children
ColourfulText
Per-character color animation with shuffling colors
FlipWords
Cycling word animation with per-letter fade-in and blur effects
HyperText
Character scramble effect that activates on hover
LetterPullup
Staggered letter pull-up animation with wave entrance effect
NumberTicker
Animated number counter with easing, triggered on viewport entry
SparklesText
Text with animated SVG sparkle stars overlay
BoxReveal
Content reveal with sliding colored box animation
ContainerTextFlip
Text container that cycles through words with per-character blur animation
Focus
Text component that cycles focus through words with blur and corner frame
TextGenerateEffect
Typewriter-style text reveal that fades in words one by one with optional blur
LineShadowText
Text with animated diagonal line shadow pattern that scrolls continuously
Backgrounds
Animated and decorative background effects
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
StarsBackground
Animated starfield background with parallax mouse tracking
FlickeringGrid
Canvas-based grid of squares with flickering opacity
Sparkles
Canvas-based floating particle sparkle effect with configurable density and colors
Effects
Visual effects, animations, and decorative elements
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
BorderBeam
Animated beam effect that travels around borders
ImageTrailCursor
Cursor-following image trail with 8 animation variants
InteractiveGridPattern
SVG grid of squares that highlight on hover with smooth fade transitions
FluidCursor
WebGL fluid simulation that follows cursor movement
GlowBorder
Animated glowing border effect with gradient support
Meteors
Animated meteor shower effect with randomized positions and delays
NeonBorder
Dual-color neon glow border effect with optional rotation animation
LiquidGlass
Glass-like visual effect using SVG filters for chromatic displacement
SmoothCursor
Physics-based smooth cursor with spring animations and rotation effects
GlowingEffect
Mouse-proximity based glowing border effect with animated conic gradient
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Ripple
Concentric pulsing circles with ripple wave animation
TracingBeam
Vertical SVG beam that highlights scroll progress alongside content
Layout
Layout primitives and structural components
Navigation
Navigation menus, tabs, and wayfinding components
Data Display
Components for displaying data, lists, and collections
Feedback
User feedback components like tooltips, toasts, and loaders
Media
Image, video, and media display components