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

Done

RippleButton

Button with ripple click effect

Done

ShimmerButton

Button with a rotating conic-gradient shimmer border effect

Done

GradientButton

Button with a rotating conic-gradient rainbow border effect

Done

InteractiveHoverButton

Button with interactive hover effect revealing alternate content

Done

Cards

Card layouts and containers for content presentation

DirectionAwareHover

Image card with overlay that slides in from the mouse entry direction

Done

Card3D

Interactive 3D perspective card with depth effects on child elements

Done

CardSpotlight

Card with mouse-following radial gradient spotlight overlay

Done

BentoGrid

Bento-style grid layout with slot-based and props-based card variants

Done

FlipCard

Card that flips to reveal back content on hover using CSS 3D transforms

Done

Book

3D book component with cover, spine, and back face that opens on hover

Done

GlareCard

Holographic trading card effect with mouse-tracking glare and rainbow foil

Done

TextRevealCard

Card that reveals text on horizontal mouse drag with animated star particles

Done

Text & Typography

Text animations, typography effects, and content display

BlurReveal

Scroll-triggered blur-to-clear reveal animation with staggered children

Done

ColourfulText

Per-character color animation with shuffling colors

Done

FlipWords

Cycling word animation with per-letter fade-in and blur effects

Done

HyperText

Character scramble effect that activates on hover

Done

LetterPullup

Staggered letter pull-up animation with wave entrance effect

Done

NumberTicker

Animated number counter with easing, triggered on viewport entry

Done

SparklesText

Text with animated SVG sparkle stars overlay

Done

BoxReveal

Content reveal with sliding colored box animation

Done

ContainerTextFlip

Text container that cycles through words with per-character blur animation

Done

Focus

Text component that cycles focus through words with blur and corner frame

Done

TextGenerateEffect

Typewriter-style text reveal that fades in words one by one with optional blur

Done

LineShadowText

Text with animated diagonal line shadow pattern that scrolls continuously

Done

Backgrounds

Animated and decorative background effects

FallingStarsBg

Canvas-based 3D starfield with perspective projection, motion trails, and glow

Done

StarsBackground

Animated starfield background with parallax mouse tracking

Done

FlickeringGrid

Canvas-based grid of squares with flickering opacity

Done

Sparkles

Canvas-based floating particle sparkle effect with configurable density and colors

Done

Effects

Visual effects, animations, and decorative elements

AnimatedBeam

Animated SVG beams connecting elements with smooth gradients

Done

BorderBeam

Animated beam effect that travels around borders

Done

ImageTrailCursor

Cursor-following image trail with 8 animation variants

Done

InteractiveGridPattern

SVG grid of squares that highlight on hover with smooth fade transitions

Done

FluidCursor

WebGL fluid simulation that follows cursor movement

Done

GlowBorder

Animated glowing border effect with gradient support

Done

Meteors

Animated meteor shower effect with randomized positions and delays

Done

NeonBorder

Dual-color neon glow border effect with optional rotation animation

Done

LiquidGlass

Glass-like visual effect using SVG filters for chromatic displacement

Done

SmoothCursor

Physics-based smooth cursor with spring animations and rotation effects

Done

GlowingEffect

Mouse-proximity based glowing border effect with animated conic gradient

Done

Confetti

Confetti celebration effect powered by canvas-confetti with button trigger support

Done

Ripple

Concentric pulsing circles with ripple wave animation

Done

TracingBeam

Vertical SVG beam that highlights scroll progress alongside content

Done

Layout

Layout primitives and structural components

Marquee

Infinite scrolling component for text, images, or cards

Done

ContainerScroll

Scroll-driven animation that rotates and scales a card from tilted to flat

Done

Navigation

Navigation menus, tabs, and wayfinding components

Timeline

Vertical timeline with scroll-driven progress line and sticky labels

Done

Dock

macOS-style dock with icon magnification on hover

Done

Data Display

Components for displaying data, lists, and collections

LogoCloud

Logo display with animated marquee, static grid, and icon variants

Done

Feedback

User feedback components like tooltips, toasts, and loaders

AnimatedTooltip

Avatar row with animated tooltips that follow mouse movement

Done

Media

Image, video, and media display components

Compare

Before/after image comparison slider with hover and drag modes

Done