Components

78 animated, accessible building blocks. Click any component to see it live and copy the code.

Hero Section

Product hero with blur-in headline, CTAs and a dashboard mockup that tilts into place.

Bento Grid

Feature grid with animated mini-visuals in every tile.

Pricing Table

Three-tier pricing with an animated monthly/yearly toggle and rolling prices.

Testimonial Marquee

Two infinite rows of review cards moving in opposite directions.

Stats Section

Bordered metrics band with numbers that count up in view.

Process Timeline

Numbered steps with a gradient line that draws as you scroll.

FAQ Accordion

Accessible accordion with smooth height animation and rotating icon.

CTA Section

Dark call-to-action panel with grid texture and a breathing glow.

Logo Marquee

Infinite logo cloud with soft faded edges.

Blur Text

Words fade up out of a blur, one after another.

Rotating Text

Cycles through words with a springy vertical slide.

Typewriter

Types and deletes phrases with a blinking caret.

Number Ticker

Counts up to any number when it scrolls into view.

Shimmer Button

Primary button with a light sweep that loops across it.

Magnetic Button

Button that is pulled toward the cursor with spring physics.

Arrow Button

Outline button that fills on hover while its arrow slides through.

Spotlight Card

Card with a soft radial light that follows the cursor.

Tilt Card

3D perspective tilt with a moving glare highlight.

Glow Border Card

A beam of light travels endlessly around the card border.

Hover Navbar

Responsive navbar with a sliding hover pill and animated mobile menu.

Magnify Dock

App dock where icons grow smoothly as the cursor approaches.

Animated Tabs

Segmented tabs with a shared-layout indicator and blur crossfade.

Grid Beams

Precise grid lines with beams of light travelling along them.

Aurora Background

Soft pastel blobs drifting slowly behind your content.

Spotlight Dots

Dot pattern that lights up in color around the cursor.

Floating Label Input

Text field whose label floats up on focus — pure CSS.

Toggle Switch

Accessible switch with a springy knob, shown in a settings list.

Newsletter Form

Email capture with validation, loading and success states.

Toast Notifications

Stacking toasts with layout animation and auto-dismiss.

Avatar Stack

Overlapping avatars that lift and reveal a tooltip on hover.

Text Scroll Reveal

Each word lights up as the paragraph scrolls through the screen.

Sticky Scroll

Steps scroll past while a pinned visual swaps to match the active one.

Horizontal Scroll

Vertical scrolling drives a row of cards sideways in a pinned section.

Parallax Columns

Three image columns that move at different speeds as you scroll.

Scroll Progress

A thin gradient bar that tracks how far the reader has scrolled.

Letter Pull Up

Letters spring up one by one when the heading comes into view.

Scramble Text

Text decodes from random characters, on view or on every hover.

Gradient Text

A slow, looping gradient sweep across any words.

Ripple Button

A ripple spreads out from exactly where you click.

Stateful Button

Morphs from idle to loading to success, resizing smoothly between states.

Like Button

Heart toggle with a particle burst and a rolling counter.

Gradient Border Button

A rainbow gradient endlessly rotates around the button edge.

Expandable Cards

Cards that grow seamlessly into a full dialog using shared layout animation.

Swipe Card Stack

Drag the top card away and it moves to the back of the deck.

Flip Card

A 3D card that flips over on click to reveal its back.

Before / After Slider

Drag (or use arrow keys) to compare two images or designs.

Orbiting Icons

Integration icons circling a central logo on two orbits.

Command Palette

Searchable ⌘K menu with groups, shortcuts and full keyboard control.

Animated List

Live notifications that slide in at the top of a stack.

Feature Split

New

Two-column feature block with checklist and a visual that slides in.

Comparison Table

New

Plan comparison with a highlighted column and check / dash cells.

Team Grid

New

Team cards with social links that slide up on hover.

Footer

New

Full site footer with link columns, newsletter and socials.

Changelog

New

Release notes timeline with New / Improved / Fixed tags.

Bar Chart

New

Animated bars with hover tooltips — no chart library needed.

KPI Cards

New

Metric cards with trend arrows and self-drawing sparklines.

Progress Ring

New

Circular progress that counts up when it scrolls into view.

Donut Chart

New

Interactive donut with legend — hover a slice to focus it.

Modal Dialog

New

Accessible confirm dialog rendered in a portal, with Esc and scroll lock.

Drawer

New

Side sheet that slides in and closes on Esc or swipe — shown as a cart.

Popover

New

Click-to-open panel that closes on outside click — shown as notifications.

Tooltip

New

Delayed, keyboard-accessible tooltips with shortcut hints.

Collapsible Sidebar

New

App sidebar that animates between full and icon-only widths.

Pagination

New

Page numbers with smart ellipses and a sliding active pill.

Stepper

New

Multi-step progress with animated checkmarks and connectors.

OTP Input

New

One-time code boxes with auto-advance, paste and arrow keys.

Password Strength

New

Live strength meter with a rule checklist and show/hide toggle.

File Dropzone

New

Drag-and-drop upload area with size limits and a file list.

Tag Input

New

Type and press Enter to add tags; Backspace removes the last.

Skeleton Loader

New

Shimmering placeholders that swap to real content when loaded.

Rating Stars

New

Accessible star rating with hover preview and a playful wiggle.

Status Badge

New

Pulsing status pills for operational, degraded, outage and maintenance.

Highlight Text

New

A marker highlight sweeps behind key words on scroll.

Shimmer Text

New

A light sweep across text for loading and AI 'thinking' states.

Hold to Confirm

New

Destructive button that fires only after a press-and-hold.

Copy Code Button

New

Terminal-style snippet with an animated copy confirmation.

Meteors

New

A subtle diagonal meteor shower behind your content.

Flicker Grid

New

Grid squares that softly light up at random.