Components

145 animated, accessible building blocks — 90 free to copy and paste, 55 more with Pro. Click any component to see it live.

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.

Radial Menu

New

Floating action button that fans its actions out in an arc.

Resizable Panels

New

Two panels with a draggable divider; arrow keys resize, double-click resets.

Odometer

New

Each digit rolls on its own column whenever the number changes.

Confetti Button

New

Fires a confetti burst from the button on click — no canvas, no library.

Flip Countdown

New

Flip-clock countdown to any date, with days, hours, minutes and seconds.

Link Preview

New

Inline links that show a preview card on hover or keyboard focus.

Stories Viewer

New

Segmented progress that auto-advances; tap to move, hold to pause.

Wheel Time Picker

New

iOS-style time picker made of three scroll-snapping wheels.

Todo List

New

Tasks with an animated check, strike-through, filters and smooth add/remove.

Segmented Control

New

A pill slides to the chosen option; a radio group with arrow-key support.

Number Stepper

New

Quantity stepper whose number slides as it changes; hold a button to repeat.

Password Generator

New

Random passwords with a length slider, character toggles, strength meter and copy.

Aurora Hero

Pro

Dark hero with drifting aurora light, gradient headline and an inline waitlist form.

Auto-play Feature Tabs

Pro

Feature tabs that auto-advance with a progress bar, pause on hover and swap an animated visual.

Usage Pricing Slider

Pro

Graduated usage-based pricing with a slider and a rolling price.

Testimonial Carousel

Pro

Swipeable, auto-playing testimonials with arrows, dots and keyboard support.

Integrations Directory

Pro

Filterable integrations grid with category chips, search and animated reflow.

App Shell

Pro

Responsive app layout with an animated sidebar, top bar search and a mobile drawer.

Mega Menu

Pro

Navbar with hover mega menus that slide between panels.

Data Table

Pro

Sortable, searchable table with row selection and animated bulk actions.

Area Line Chart

Pro

Smooth area chart that draws itself in, with a hover crosshair. Pure SVG.

Activity Heatmap

Pro

Contribution-style calendar heatmap with tooltips and a legend.

Funnel Chart

Pro

Conversion funnel with step-to-step drop-off and hover focus.

Kanban Board

Pro

Drag cards between columns with drop highlights and quick add.

Sortable List

Pro

Drag-to-reorder list with a handle, spring physics and keyboard reordering.

Dynamic Island

Pro

A morphing pill that springs between live-activity states.

AI Chat

Pro

Chat UI with streaming replies, typing indicator, stop button and auto-scroll.

3D Carousel

Pro

A 3D ring of cards you can drag, swipe or step through.

Install Command Tabs

Pro

npm / pnpm / yarn / bun tabs with copy feedback that remember your choice.

Multi-step Form

Pro

Onboarding wizard with per-step validation, sliding steps and a success state.

Combobox

Pro

Accessible searchable select with keyboard navigation and match highlighting.

Date Range Picker

Pro

Calendar range picker with hover preview, presets and animated months.

Color Picker

Pro

Saturation pad, hue slider, swatches and hex copy.

Upload Queue

Pro

Per-file upload progress with retry, cancel and drag-and-drop.

Notification Center

Pro

Inbox popover with tabs, mark-all-read and swipe-to-dismiss.

Context Menu

Pro

Right-click menu with shortcuts, dividers and full keyboard control.

Morphing Text

Pro

Words dissolve and re-form letter by letter with a blur morph.

Glitch Text

Pro

RGB-split glitch that fires on a timer and on hover.

Particle Network

Pro

Canvas particles that link up and react to the cursor; pauses off-screen.

Gradient Mesh

Pro

Living mesh gradient with grain and a cursor-following light.

Glow Grid

Pro

One cursor light illuminates the borders of every card in the grid.

Border Beam Card

Pro

Featured pricing card with a light beam circling its border.

Onboarding Checklist

Pro

Getting-started steps with a progress ring and a completion celebration.

Product Tour

Pro

Guided tour that dims the page and moves a spotlight between targets, step by step.

Signature Pad

Pro

Draw-to-sign pad with smooth strokes, undo, clear and PNG export.

Image Cropper

Pro

Avatar cropper: drag to pan, zoom, circle or square mask, crop in image pixels.

Virtual List

Pro

10,000 rows that stay smooth: only visible rows are rendered, with live search.

JSON Viewer

Pro

Collapsible JSON tree with type colours; click a key to copy its path.

Diff Viewer

Pro

Unified line diff with line numbers and +/− counts that updates as you edit.

Seat Picker

Pro

Cinema seat map with price tiers, taken seats, a seat limit and a live total.

File Tree

Pro

File explorer tree with expand, selection and full arrow-key navigation.

Gantt Chart

Pro

Project timeline: drag bars to move them, drag the edge to resize, snapping to days.

Spreadsheet

Pro

Editable grid with arrow-key navigation and SUM / AVG / arithmetic formulas that recalculate.

Waveform Audio Player

Pro

Click or drag the waveform to seek; play, pause, speed and restart.

Mention Input

Pro

Comment box with @mention autocomplete, arrow-key picking and highlighted mentions.

Week Scheduler

Pro

Week calendar where you click and drag to create events in 30-minute steps.

Card Payment Form

Pro

Live 3D card that flips for the CVC, with formatting and Luhn validation.

Price Range Slider

Pro

Dual-thumb range slider over a histogram, with a live matching count.

Shortcut Recorder

Pro

Keyboard-shortcut settings: press a combination to rebind, with conflict warnings.

Flow Builder

Pro

Workflow canvas: drag nodes and the animated curved connections follow.

Org Chart

Pro

Organisation chart with drawn connectors and collapsible teams.

Comment Thread

Pro

Threaded comments with nested replies, likes and collapsible threads.

Sticky Notes Board

Pro

Drag sticky notes around a board; type to edit, add and remove.

Query Builder

Pro

Build filters from field, operator and value rules with AND / OR matching.

Permission Matrix

Pro

Roles × permissions grid with column toggles and an unsaved-changes bar.

Invoice Builder

Pro

Editable line items with GST and discount; totals update as you type.

Video Timeline

Pro

Editor timeline with a moving playhead, seekable ruler and draggable clips.