# PixelPapa UI

> PixelPapa UI is a library of 368 animated React components and landing page sections (144 free, the rest with PixelPapa Pro), 10 full-site templates with copy-paste AI prompts, free design tools, and an AI image upscaler with PixelPapa Pro. Components are single TypeScript (.tsx) files built with Tailwind CSS v4 and Motion (formerly Framer Motion), use shadcn/ui colour tokens, and install with the shadcn CLI.

- Install a free component: `npx shadcn@latest add "https://pixelpapa.com/r/<name>.json"`
- Pro components need a Pro plan and an API key sent as `Authorization: Bearer <key>` (setup: https://pixelpapa.com/docs/installation#pro). The registry index marks them with `meta.pro: true`.
- Registry index (all items with descriptions, JSON): https://pixelpapa.com/r/registry.json
- Requirements: React 18 or 19, Tailwind CSS v4, shadcn/ui colour tokens. Dependencies at most: motion, lucide-react.
- Licence: free components for any personal or commercial project; Pro components and site templates with an active Pro or Scale plan. No redistribution of the library. Terms: https://pixelpapa.com/terms#license
- Components land in `components/pixelpapa/<name>.tsx`; each file default-exports a working demo.

Every page has a Markdown version: add `.md` to its URL. The full text of the docs, every component and every free site prompt is in https://pixelpapa.com/llms-full.txt.

## Docs

- [Introduction](https://pixelpapa.com/docs.md)
- [Installation](https://pixelpapa.com/docs/installation.md)
- [Use with AI](https://pixelpapa.com/docs/ai.md)

## Components

### Navbars

- [Navbar Announcement Bar](https://pixelpapa.com/components/navbars/navbar-announcement-bar.md) (Pro): A navbar topped by a dismissible strip that ticks through announcements and folds away with a spring when closed.
- [Navbar Centered Logo](https://pixelpapa.com/components/navbars/navbar-centered-logo.md) (Pro): An editorial storefront header with a serif wordmark between two link groups; labels roll on hover and the bag count pops when it changes.
- [Navbar Command Search](https://pixelpapa.com/components/navbars/navbar-command-search.md) (Pro): A docs navbar whose compact search field widens on focus or ⌘K into a filterable result list with arrow-key navigation.
- [Navbar Dynamic Island](https://pixelpapa.com/components/navbars/navbar-dynamic-island.md) (Pro): A compact black pill of links that swells on a spring into a live notification, drains a timer line, then shrinks back to navigation.
- [Navbar Floating Pill](https://pixelpapa.com/components/navbars/navbar-floating-pill.md) (Pro): A floating pill navbar that condenses as you scroll: it narrows on a spring, drops its release chip and swaps the CTA label for an arrow.
- [Navbar Glass Blur](https://pixelpapa.com/components/navbars/navbar-glass-blur.md): A frosted floating navbar that blurs and saturates whatever scrolls beneath it, with a specular highlight that tracks the pointer along the glass.
- [Navbar Mega Menu](https://pixelpapa.com/components/navbars/navbar-mega-menu.md) (Pro): Hover or focus a trigger and one shared panel springs to the new height while its content crossfades in the direction you moved.
- [Navbar Mobile Morph](https://pixelpapa.com/components/navbars/navbar-mobile-morph.md) (Pro): A mobile header whose hamburger folds into an X while a full-screen menu floods out from the button and its links rise in one by one.
- [Navbar Scroll Progress](https://pixelpapa.com/components/navbars/navbar-scroll-progress.md): A reading navbar with a spring-smoothed progress line, a minutes-left counter and a title that swaps in once the headline scrolls away.
- [Navbar Sliding Highlight](https://pixelpapa.com/components/navbars/navbar-sliding-highlight.md): A pill glides between links as you hover or tab through them, then settles back on the current page when you leave.
- [Navbar Underline Tabs](https://pixelpapa.com/components/navbars/navbar-underline-tabs.md) (Pro): A sticky product sub-navigation whose underline springs to the section you are reading and scrolls to a section when its tab is clicked.
- [Navbar User Menu](https://pixelpapa.com/components/navbars/navbar-user-menu.md) (Pro): An app navbar with an avatar dropdown that springs from the trigger, tracks hover and arrow keys with one sliding highlight, and closes on Escape.

### Hero Sections

- [Hero Before After Toggle](https://pixelpapa.com/components/heroes/hero-before-after-toggle.md) (Pro): A hero with a Before / After switch: the same nine request cards spring from a scattered pile into three labelled, colour-coded lanes and back.
- [Hero Cursor Spotlight](https://pixelpapa.com/components/heroes/hero-cursor-spotlight.md) (Pro): An always-dark hero where a soft light trails the pointer and reveals a hidden grid of service nodes; it wanders on its own until you move.
- [Hero Dashboard Lift](https://pixelpapa.com/components/heroes/hero-dashboard-lift.md): Centered headline over a product window that tilts flat as you scroll, with staggered entrance.
- [Hero Drifting Card Rows](https://pixelpapa.com/components/heroes/hero-drifting-card-rows.md) (Pro): Three tilted rows of small UI cards drift in opposite directions behind a headline that sits in a soft cleared pocket.
- [Hero Editorial Serif](https://pixelpapa.com/components/heroes/hero-editorial-serif.md) (Pro): A magazine-style opener: an oversized serif headline rises line by line from behind hairlines that draw across an asymmetric grid.
- [Hero Grid Cells Reveal](https://pixelpapa.com/components/heroes/hero-grid-cells-reveal.md): A hero on a spreadsheet-like grid where cells light up in rings that ripple out from the headline, and individual cells glow under the pointer.
- [Hero Mesh Gradient](https://pixelpapa.com/components/heroes/hero-mesh-gradient.md) (Pro): An inset poster hero filled with a slowly shifting CSS mesh of theme colours, with bottom-anchored type and a glass stat strip.
- [Hero Orbiting Icons](https://pixelpapa.com/components/heroes/hero-orbiting-icons.md): An integrations hero where app icons ride three counter-rotating rings over a horizon, staying upright as they rise and set around a glowing core.
- [Hero Phone Mockup](https://pixelpapa.com/components/heroes/hero-phone-mockup.md) (Pro): A split hero with a floating CSS phone whose app screen stays alive: new expenses spring into the list and the balance rolls to match.
- [Hero Rotating Words](https://pixelpapa.com/components/heroes/hero-rotating-words.md) (Pro): A type-led hero whose second line swaps audiences letter by letter out of a blur while an underline redraws and a matching booking chip updates.
- [Hero Social Proof Avatars](https://pixelpapa.com/components/heroes/hero-social-proof-avatars.md) (Pro): A hero led by its customers: an avatar row lifts whoever is speaking, stars fill in sequence, and that person's quote crossfades beneath the call to action.
- [Hero Split Email Capture](https://pixelpapa.com/components/heroes/hero-split-email-capture.md) (Pro): A two-column hero whose email field validates, shakes on a bad address and morphs into a confirmation, beside a tilted preview of the email you will get.
- [Hero Stacked Cards 3D](https://pixelpapa.com/components/heroes/hero-stacked-cards-3d.md) (Pro): A fintech hero with a stack of payment cards in real perspective: it tilts toward the pointer, fans out on hover and sends the top card to the back on click.
- [Hero Terminal Typing](https://pixelpapa.com/components/heroes/hero-terminal-typing.md) (Pro): A developer hero with a terminal that types its own commands, prints staged output and loops, next to a copyable install line.
- [Hero Video Frame](https://pixelpapa.com/components/heroes/hero-video-frame.md) (Pro): A centered hero over a faux video player: rings ripple out of the play button, and pressing it starts the scene, scrubber and timecode.
- [Hero Waitlist Countdown](https://pixelpapa.com/components/heroes/hero-waitlist-countdown.md) (Pro): A launch hero with a live countdown whose digits roll individually, and a waitlist field that turns into your place in the queue.

### Feature Sections

- [Features Accordion Visual](https://pixelpapa.com/components/features/features-accordion-visual.md) (Pro): An accordion on the left steers a product mock on the right: a spring-driven focus frame glides to the matching region while the rest dims.
- [Features Alternating Rows](https://pixelpapa.com/components/features/features-alternating-rows.md) (Pro): Three text-and-illustration rows that swap sides; each drawing animates in on view and its floating layer drifts with scroll.
- [Features Animated Workflow](https://pixelpapa.com/components/features/features-animated-workflow.md) (Pro): A four-stage pipeline where an order token hops card to card with a shared-layout spring, leaving a completed result behind at every stage.
- [Features Big Numbered List](https://pixelpapa.com/components/features/features-big-numbered-list.md): An editorial list with oversized serif numerals that rise through a mask on view; the hovered or focused row opens its note and a marker bar slides to it.
- [Features Code And Result](https://pixelpapa.com/components/features/features-code-and-result.md) (Pro): A code snippet with clickable values beside a live preview: cycle a prop in the code and the toast on the right springs in with the new tone and position.
- [Features Comparison Table](https://pixelpapa.com/components/features/features-comparison-table.md): An us-versus-them table with a lifted highlight column; checks pop and draw their stroke row by row as the table scrolls in.
- [Features Icon Grid Hover](https://pixelpapa.com/components/features/features-icon-grid-hover.md): A hairline grid of six features: grid lines glow under the cursor, a beam laps the hovered cell's border and a detail row slides up.
- [Features Integrations Hub](https://pixelpapa.com/components/features/features-integrations-hub.md) (Pro): A centre hub wired to six tool tiles with curved SVG lines; light pulses flow in from sources and out to destinations, and hovering a tile lights its wire.
- [Features Security Checklist](https://pixelpapa.com/components/features/features-security-checklist.md) (Pro): Security copy beside a live posture card: controls verify one by one with spinner-to-check swaps while a shield ring fills to 100%.
- [Features Sticky Scroll](https://pixelpapa.com/components/features/features-sticky-scroll.md) (Pro): Four text steps scroll past on the left while a pinned product panel on the right redraws itself for the step in view.
- [Features Tabbed Showcase](https://pixelpapa.com/components/features/features-tabbed-showcase.md) (Pro): Four tabs advance on their own with a filling progress bar while the product canvas below cross-fades; hover pauses, arrows and clicks jump.
- [Features Timeline Steps](https://pixelpapa.com/components/features/features-timeline-steps.md) (Pro): A three-step "how it works" row joined by a wavy line that draws itself in view, popping each numbered node as it arrives.

### Bento Grids

- [Bento AI Capabilities](https://pixelpapa.com/components/bento/bento-ai-capabilities.md): An AI feature bento: an answer streams word by word with citations, an agent ticks through its steps, a voice waveform pulses and a reply cross-fades between languages.
- [Bento Analytics](https://pixelpapa.com/components/bento/bento-analytics.md) (Pro): A metrics bento: an MRR curve that morphs between ranges, a donut whose legend isolates segments, a ticking live-visitor count, weekday bars and a row of sparklines.
- [Bento Collaboration](https://pixelpapa.com/components/bento/bento-collaboration.md): A multiplayer bento: named cursors glide across a shared board, comments pop into a thread, a teammate types live and reactions float up from a decision.
- [Bento Developer](https://pixelpapa.com/components/bento/bento-developer.md) (Pro): A developer bento: a terminal replays a deploy line by line, an API response swaps with the selected endpoint, a p95 latency graph scrolls live and uptime bars fill in.
- [Bento Hover Expand](https://pixelpapa.com/components/bento/bento-hover-expand.md): Four tall tiles share a row; the hovered or focused one springs wide to reveal its detail and metric while its siblings narrow and dim.
- [Bento Product Overview](https://pixelpapa.com/components/bento/bento-product-overview.md) (Pro): Five product tiles that each run a tiny working demo: a scrubbable revenue line, a self-typing command bar, spring switches, a fanning avatar stack and a live timer.
- [Bento Security Globe](https://pixelpapa.com/components/bento/bento-security-globe.md) (Pro): A security bento around a slowly rotating dotted SVG globe with region pins and traffic arcs, flanked by a ticking threat counter, a key-rotation ring and a residency picker.

### Stats

- [Stats Bar Race](https://pixelpapa.com/components/stats/stats-bar-race.md) (Pro): A bar-chart race: horizontal bars grow and re-rank with layout springs as the year advances on its own, with a play/pause control and a year scrubber.
- [Stats Count Up Row](https://pixelpapa.com/components/stats/stats-count-up-row.md): Four headline numbers in a divided row that count up from zero out of a blur when scrolled into view, each under a hairline that fills as it counts.
- [Stats Grid Bordered](https://pixelpapa.com/components/stats/stats-grid-bordered.md): A minimal hairline grid of serif numerals that rise through a mask on view; hovering a cell floods it with the foreground colour from the bottom edge and reveals a footnote.
- [Stats Radial Progress](https://pixelpapa.com/components/stats/stats-radial-progress.md): Four concentric rings sweep to their values with spring easing beside a legend; hovering a row thickens its ring, dims the rest and swaps the centre readout.
- [Stats Split Quote](https://pixelpapa.com/components/stats/stats-split-quote.md) (Pro): A split section: an oversized serif stat counts up on the left with a before/after bar, while the customer quote on the right reveals word by word.
- [Stats Ticker Odometer](https://pixelpapa.com/components/stats/stats-ticker-odometer.md) (Pro): A live counter built from rolling digit columns: each digit springs to its new value as the total ticks up, with three smaller odometers underneath.
- [Stats With Sparklines](https://pixelpapa.com/components/stats/stats-with-sparklines.md) (Pro): Four stat cards whose sparklines draw in on view; move the pointer across a card to scrub its history and the headline number follows the marker.

### Logo Clouds

- [Logos Grid Hover Reveal](https://pixelpapa.com/components/logo-clouds/logos-grid-hover-reveal.md) (Pro): A bordered logo grid where each cell rolls its wordmark up and away on hover or focus to reveal that customer's headline result and a case-study link.
- [Logos Marquee Fade](https://pixelpapa.com/components/logo-clouds/logos-marquee-fade.md): A single row of wordmarks drifting left forever, masked to fade at both edges; hovering slows the belt and lifts the logo under the cursor.
- [Logos Orbit Ring](https://pixelpapa.com/components/logo-clouds/logos-orbit-ring.md): Logo chips ride two counter-rotating rings that rise over the horizon behind the headline; each chip counter-spins so its wordmark stays upright.
- [Logos Spotlight Swap](https://pixelpapa.com/components/logo-clouds/logos-spotlight-swap.md) (Pro): Six fixed cells that take turns swapping their wordmark: every couple of seconds one cell blurs out its logo and focuses a new one from the pool.
- [Logos Two Row Opposing Marquee](https://pixelpapa.com/components/logo-clouds/logos-two-row-opposing-marquee.md): Two rows of logo chips glide in opposite directions; page scroll pushes them further apart in each direction, so the rows shear as you move.
- [Logos With Stat Header](https://pixelpapa.com/components/logo-clouds/logos-with-stat-header.md) (Pro): A logo strip led by a counting headline figure; the stat counts up on view, then the wordmarks rise in one by one along a hairline rule.

### Pricing

- [Pricing Addon Builder](https://pixelpapa.com/components/pricing/pricing-addon-builder.md) (Pro): Build a plan by switching add-ons on and off; each one slides onto a receipt and the running total rolls to its new value.
- [Pricing Comparison Matrix](https://pixelpapa.com/components/pricing/pricing-comparison-matrix.md) (Pro): A feature-by-feature plan table with a sticky plan header, grouped rows, a column that highlights on hover and checkmarks that draw themselves in.
- [Pricing Credits Packs](https://pixelpapa.com/components/pricing/pricing-credits-packs.md): Pay-as-you-go credit packs as radio cards with growing coin stacks, a best-value corner ribbon and a selection ring that glides to the chosen pack.
- [Pricing Currency Switcher](https://pixelpapa.com/components/pricing/pricing-currency-switcher.md) (Pro): Three plans in one divided panel with a hand-built currency menu; choosing a currency counts every price to its localised amount.
- [Pricing Enterprise Contact](https://pixelpapa.com/components/pricing/pricing-enterprise-contact.md) (Pro): Two self-serve plans beside an inverted enterprise card with a named contact and a short form that morphs into a confirmation.
- [Pricing Horizontal Rows](https://pixelpapa.com/components/pricing/pricing-horizontal-rows.md): An editorial price list: each plan is a full-width row with a serif name, and an inverted fill wipes up from the bottom edge on hover.
- [Pricing Single Plan Spotlight](https://pixelpapa.com/components/pricing/pricing-single-plan-spotlight.md): One plan presented large inside a slowly rotating gradient border, with a staggered included list, crossed-out extras and a money-back guarantee.
- [Pricing Sliding Toggle](https://pixelpapa.com/components/pricing/pricing-sliding-toggle.md) (Pro): Three plans with a monthly / yearly switch; prices roll to their new value and the popular plan is lifted.
- [Pricing Tier Tabs](https://pixelpapa.com/components/pricing/pricing-tier-tabs.md) (Pro): Audience tabs for individuals, teams and enterprise; the pill slides between tabs and the matching pair of plans blurs in from the side.
- [Pricing Usage Slider](https://pixelpapa.com/components/pricing/pricing-usage-slider.md) (Pro): Drag the seat slider and the monthly total recalculates with rolling digits while the matching volume tier lights up.

### Testimonials

- [Testimonials Before After Metrics](https://pixelpapa.com/components/testimonials/testimonials-before-after-metrics.md) (Pro): A before / after switch that rewinds every card at once: the number rolls back, the bar slides to its old mark and the quote swaps from complaint to praise.
- [Testimonials Carousel Spotlight](https://pixelpapa.com/components/testimonials/testimonials-carousel-spotlight.md) (Pro): A looping carousel where the centre quote is sharp and lifted while its neighbours shrink, blur and dim; drag, use arrows or pick an avatar.
- [Testimonials Case Study Tabs](https://pixelpapa.com/components/testimonials/testimonials-case-study-tabs.md) (Pro): Company tabs with a sliding pill; each one swaps in a headline metric that counts up, a sparkline that draws itself and the quote behind the number.
- [Testimonials Featured Quote](https://pixelpapa.com/components/testimonials/testimonials-featured-quote.md) (Pro): One oversized serif quote whose words blur in, with an author switcher underneath that fills a progress line and advances on its own.
- [Testimonials Marquee Columns](https://pixelpapa.com/components/testimonials/testimonials-marquee-columns.md): Three columns of customer quotes drift vertically in opposite directions beside a fixed headline; hovering a column pauses it.
- [Testimonials Masonry Wall](https://pixelpapa.com/components/testimonials/testimonials-masonry-wall.md): A masonry wall mixing short quotes, a highlighted story and stat tiles; it fades out at the fold and unrolls to full height on demand.
- [Testimonials Rating Summary](https://pixelpapa.com/components/testimonials/testimonials-rating-summary.md) (Pro): An average score that counts up beside star-breakdown bars; click a bar to filter the review list, which reflows with layout animation.
- [Testimonials Stacked Cards](https://pixelpapa.com/components/testimonials/testimonials-stacked-cards.md): A fanned pile of quote cards: drag or click the top card to fling it to the back while the rest spring forward.
- [Testimonials Tweet Grid](https://pixelpapa.com/components/testimonials/testimonials-tweet-grid.md) (Pro): Staggered columns of social-post cards with highlighted mentions, a quoted post and a like button that bursts and rolls its count.
- [Testimonials Video Cards](https://pixelpapa.com/components/testimonials/testimonials-video-cards.md) (Pro): A row of faux video thumbnails that widen on hover to reveal the quote; pressing play runs a progress bar and a live equaliser.

### FAQs

- [FAQ Chat Style](https://pixelpapa.com/components/faqs/faq-chat-style.md) (Pro): A support chat window where tapping a suggested question sends it as a bubble, shows a typing indicator, then types the answer in word by word.
- [FAQ Grid Cards](https://pixelpapa.com/components/faqs/faq-grid-cards.md): A grid of question cards that flip over in 3D on a spring to show the answer on the back; cards peek on hover and a control flips the whole deck in a wave.
- [FAQ Numbered Editorial](https://pixelpapa.com/components/faqs/faq-numbered-editorial.md): Magazine-style numbered questions in a serif: a rule draws across the open row, the label rolls from Read to Close and a short answer sits beside the long one.
- [FAQ Search Filter](https://pixelpapa.com/components/faqs/faq-search-filter.md) (Pro): Type to filter questions live: matches are highlighted in both question and answer, rows reflow with layout animation and topic chips update their counts.
- [FAQ Smooth Accordion](https://pixelpapa.com/components/faqs/faq-smooth-accordion.md): Single-column accordion whose panels spring open to their natural height while the plus icon folds into a minus and the open card lifts.
- [FAQ Two Column Categories](https://pixelpapa.com/components/faqs/faq-two-column-categories.md) (Pro): Category tabs on the left with a sliding highlight; the question list on the right swaps with a stagger and each row expands in place.
- [FAQ With Contact Card](https://pixelpapa.com/components/faqs/faq-with-contact-card.md) (Pro): Accordion beside a sticky support card; marking an answer as unhelpful makes the card hop, pulse and rewrite itself around that question.

### Calls to Action

- [CTA App Download](https://pixelpapa.com/components/cta/cta-app-download.md) (Pro): App download panel with generic store buttons, a scannable-looking code, and a phone that tilts toward the cursor while its route draws itself and a map saves offline.
- [CTA Countdown Launch](https://pixelpapa.com/components/cta/cta-countdown-launch.md) (Pro): A launch countdown on split-flap tiles whose digits roll over each second, with orbit rings turning behind it and a waitlist field that confirms your place inline.
- [CTA Dark Spotlight](https://pixelpapa.com/components/cta/cta-dark-spotlight.md): An always-dark closing section lit by a cursor torch: the headline ink and a dot grid brighten where the light falls, and it drifts on its own when no pointer is around.
- [CTA Gradient Glow Card](https://pixelpapa.com/components/cta/cta-gradient-glow-card.md) (Pro): A closing card ringed by a slowly rotating gradient border, with a soft light that trails the cursor and a copyable install command.
- [CTA Marquee Text Band](https://pixelpapa.com/components/cta/cta-marquee-text-band.md): Three rows of giant type drift in opposite directions behind one button; they speed up and lean with page scroll and slow to a crawl while you hover the button.
- [CTA Minimal Serif](https://pixelpapa.com/components/cta/cta-minimal-serif.md): One large serif sentence that rises word by word, closed by a magnetic link: a ring of turning type leans toward the cursor while the label's underline draws in.
- [CTA Split With Form](https://pixelpapa.com/components/cta/cta-split-with-form.md) (Pro): Pitch and a what-happens-next timeline on the left, a demo request form on the right that validates, sends and morphs into a drawn-check confirmation.
- [CTA Testimonial Combo](https://pixelpapa.com/components/cta/cta-testimonial-combo.md) (Pro): The ask on the left, the proof on the right: customer quotes rotate on a tilting card stack with a rolling metric badge, and each avatar wears a ring that fills until the next story.

### Footers

- [Footer App Style](https://pixelpapa.com/components/footers/footer-app-style.md) (Pro): A compact application footer with a working language menu that retranslates the links and a system / light / dark theme switch with a sliding thumb.
- [Footer CTA Above](https://pixelpapa.com/components/footers/footer-cta-above.md) (Pro): A rounded call-to-action card that overlaps the top edge of the footer, with a sheen that tracks the cursor and link columns underneath.
- [Footer Dark Gradient Glow](https://pixelpapa.com/components/footers/footer-dark-gradient-glow.md) (Pro): An always-dark footer lit by a breathing horizon glow, with a faint perspective grid, twinkling points and link columns that brighten on hover.
- [Footer Editorial Serif](https://pixelpapa.com/components/footers/footer-editorial-serif.md) (Pro): A magazine-style colophon: a large serif sign-off that reveals line by line, hairline-ruled numbered columns and a live local clock.
- [Footer Giant Wordmark](https://pixelpapa.com/components/footers/footer-giant-wordmark.md): Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.
- [Footer Marquee Links](https://pixelpapa.com/components/footers/footer-marquee-links.md): Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.
- [Footer Minimal Centered](https://pixelpapa.com/components/footers/footer-minimal-centered.md): A quiet centered footer: logo mark, a link row with a pill that glides between hovered links, round social buttons and a back-to-top control.
- [Footer Sitemap Columns](https://pixelpapa.com/components/footers/footer-sitemap-columns.md) (Pro): Full sitemap footer with four link columns, an inline newsletter form that confirms in place and a live status pill.

### Contact & Newsletter

- [Contact Booking Slots](https://pixelpapa.com/components/contact/contact-booking-slots.md) (Pro): A meeting scheduler card: pick a day from a strip, then a time slot that highlights with a shared-layout pill, switch 12/24-hour format and confirm into a summary.
- [Contact Cards Channels](https://pixelpapa.com/components/contact/contact-cards-channels.md): Three contact channel cards, each with its own live detail: a copy-to-clipboard email, a chat thread with a typing indicator and a voice line with moving level bars.
- [Contact Map Office](https://pixelpapa.com/components/contact/contact-map-office.md) (Pro): A dotted SVG world map with pulsing office pins linked by animated arcs; the office list and the pins select each other and show live local time.
- [Contact Split Form](https://pixelpapa.com/components/contact/contact-split-form.md) (Pro): Two-column contact section whose form has floating labels, inline validation that slides in on blur, a shake on invalid submit and a drawn-check success state.
- [Newsletter Card Perks](https://pixelpapa.com/components/contact/newsletter-card-perks.md): A signup card with a staggered perks list on one side and a fanned stack of past issues that spreads apart on hover on the other.
- [Newsletter Inline Success](https://pixelpapa.com/components/contact/newsletter-inline-success.md): A single-line signup whose submit button shrinks into a spinner, then a green check, while the field collapses around a confirmation message.

### Team & About

- [About Story Timeline](https://pixelpapa.com/components/team/about-story-timeline.md): Company milestones alternate either side of a centre line that fills as you scroll; each year lights its node and slides its card in from its own side.
- [Team Grid Hover Bio](https://pixelpapa.com/components/team/team-grid-hover-bio.md): A grid of drawn gradient portraits; hovering or focusing a person slides a frosted bio panel up over the portrait while the silhouette drifts back.
- [Team Leadership Rows](https://pixelpapa.com/components/team/team-leadership-rows.md): Leadership as large typographic rows between hairlines; the hovered or focused row springs open to show a portrait, a quote and a few facts.
- [Team Values And Photos](https://pixelpapa.com/components/team/team-values-and-photos.md) (Pro): A numbered values list that advances on a timer beside a collage of gradient photo tiles; the tiles tied to the active value lift forward while the rest recede.

### Blog Sections

- [Blog Category Filter](https://pixelpapa.com/components/blog/blog-category-filter.md): Filter chips with a sliding active pill and live counts; the post grid reflows with shared layout animation as cards pop in and out.
- [Blog Changelog Feed](https://pixelpapa.com/components/blog/blog-changelog-feed.md) (Pro): A versioned changelog with a sticky date rail, colour-coded tags you can filter by, and entries that collapse out of the timeline with layout animation.
- [Blog Featured Plus Grid](https://pixelpapa.com/components/blog/blog-featured-plus-grid.md) (Pro): One large featured story beside its drawn cover, followed by a three-up grid; covers zoom and a reading arrow slides in on hover.
- [Blog List Hover Preview](https://pixelpapa.com/components/blog/blog-list-hover-preview.md): A typographic list of posts; a floating cover card trails the cursor on a spring, tilts with its speed and flips to the hovered post's artwork.
- [Blog Magazine Layout](https://pixelpapa.com/components/blog/blog-magazine-layout.md): A newspaper-style front page: masthead, a serif lead story with drawn cover art, a column of hairline-ruled briefs and a numbered most-read list.

### Auth Screens

- [Auth Card Social](https://pixelpapa.com/components/auth/auth-card-social.md): A centred sign-in card with generic provider buttons that show their own loading state, and an email step that unfolds a password field once the address is valid.
- [Auth Magic Link Sent](https://pixelpapa.com/components/auth/auth-magic-link-sent.md): A check-your-inbox screen: an envelope opens and its letter lifts on a loop, a ring counts down to when resend unlocks, and the address can be changed in place.
- [Auth OTP Verify](https://pixelpapa.com/components/auth/auth-otp-verify.md) (Pro): A six-box verification screen with auto-advance, backspace, arrow keys and paste; digits pop in, a wrong code shakes and clears, the right one ripples green.
- [Auth Password Strength](https://pixelpapa.com/components/auth/auth-password-strength.md): A set-password screen with a four-segment meter that fills and recolours as you type, a requirements checklist that ticks off live and a one-click strong suggestion.
- [Auth Signup Steps](https://pixelpapa.com/components/auth/auth-signup-steps.md) (Pro): A three-step sign-up card with a filling progress rail, steps that slide in the direction of travel, a live workspace URL preview and a celebratory finish.
- [Auth Split Brand Panel](https://pixelpapa.com/components/auth/auth-split-brand-panel.md) (Pro): Sign-in form on one side and a brand panel on the other, where collaborators orbit a logo on slow rings and customer quotes rotate on a timer.

### Banners

- [Banner Announcement Marquee](https://pixelpapa.com/components/banners/banner-announcement-marquee.md): A top strip that scrolls a seamless loop of announcements between faded edges, pauses on hover or focus and collapses when dismissed.
- [Banner Cookie Consent](https://pixelpapa.com/components/banners/banner-cookie-consent.md) (Pro): A corner consent card whose preferences panel unfolds with spring height, with real switches per category and a chip to reopen it after a choice.
- [Banner Countdown Sale](https://pixelpapa.com/components/banners/banner-countdown-sale.md) (Pro): A sale strip with a ticking countdown whose digits roll over, a sweeping sheen, and a promo code that confirms itself when copied.
- [Banner Newsletter Inline](https://pixelpapa.com/components/banners/banner-newsletter-inline.md): An in-article signup banner: on submit the paper plane flies off, the field collapses and a confirmation line draws itself in.
- [Banner Status Incident](https://pixelpapa.com/components/banners/banner-status-incident.md) (Pro): A status strip with a pulsing severity dot that expands on a spring into a timeline of incident updates, recoloured by severity.
- [Banner Upgrade Progress](https://pixelpapa.com/components/banners/banner-upgrade-progress.md): An in-app usage banner whose meter springs to the current value, counts the number up and shifts from calm to amber to red as the plan limit nears.

### Buttons

- [Button 3D Press](https://pixelpapa.com/components/buttons/button-3d-press.md): A raised key with a real edge and cast shadow: it lifts slightly on hover, sinks hard on press and bounces back on release.
- [Button Async States](https://pixelpapa.com/components/buttons/button-async-states.md) (Pro): Runs a promise and morphs through idle, a collapsed spinner, then a success or error label, animating its width between each.
- [Button Border Beam](https://pixelpapa.com/components/buttons/button-border-beam.md) (Pro): A comet of light laps the button's border on a loop, with a soft halo that follows the head of the beam.
- [Button Confetti Burst](https://pixelpapa.com/components/buttons/button-confetti-burst.md) (Pro): Throws a fan of DOM confetti from the exact point you clicked; pieces arc up, tumble and fall under gravity. No canvas.
- [Button Copy Feedback](https://pixelpapa.com/components/buttons/button-copy-feedback.md) (Pro): Copies a value to the clipboard, then swaps its icon for a drawn check and rolls the label to "Copied" before settling back.
- [Button Gradient Border Glow](https://pixelpapa.com/components/buttons/button-gradient-border-glow.md) (Pro): A flowing gradient outline with a blurred twin underneath; the glow brightens on hover and leans toward the cursor.
- [Button Group Segmented](https://pixelpapa.com/components/buttons/button-group-segmented.md) (Pro): A segmented control whose pill stretches like jelly: its leading edge races ahead and the trailing edge catches up on a softer spring.
- [Button Hold To Confirm](https://pixelpapa.com/components/buttons/button-hold-to-confirm.md) (Pro): Press and hold to wipe a solid fill across the button; release early and it springs back, hold to the end and it confirms.
- [Button Icon Reveal](https://pixelpapa.com/components/buttons/button-icon-reveal.md) (Pro): On hover the label slides aside and an icon glides into the space it leaves, or an existing icon exits and re-enters like a conveyor. The button never changes width.
- [Button Like Counter](https://pixelpapa.com/components/buttons/button-like-counter.md) (Pro): A like button whose heart pops with a ring and spark burst while the count rolls digit by digit, odometer style.
- [Button Liquid Fill](https://pixelpapa.com/components/buttons/button-liquid-fill.md) (Pro): Colour floods the button from the exact point the pointer enters and drains toward the point it leaves, inverting the label at the waterline.
- [Button Ripple](https://pixelpapa.com/components/buttons/button-ripple.md) (Pro): An ink ripple grows from the exact press point to the farthest corner and fades, with overlapping ripples for rapid taps.
- [Button Shimmer Sweep](https://pixelpapa.com/components/buttons/button-shimmer-sweep.md): A slanted band of light crosses the button on a slow loop and fires again, faster, the moment you hover.
- [Button Slide To Unlock](https://pixelpapa.com/components/buttons/button-slide-to-unlock.md) (Pro): Drag the thumb across a shimmering track to confirm; it springs home if released early and locks in with a check at the end.
- [Button Split Dropdown](https://pixelpapa.com/components/buttons/button-split-dropdown.md) (Pro): A primary action joined to a chevron that opens a springy menu; picking a mode rolls the main label to the new action.
- [Magnetic Button](https://pixelpapa.com/components/buttons/magnetic-button.md): A button that leans toward the cursor with spring physics and snaps back on leave.

### Badges

- [Badge Count Pop](https://pixelpapa.com/components/badges/badge-count-pop.md) (Pro): A notification count that bumps with a spring whenever it changes, rolls the digits in the direction of the change and pops out at zero.
- [Badge Dismissible Tags](https://pixelpapa.com/components/badges/badge-dismissible-tags.md) (Pro): Removable tags that blur and shrink away while their neighbours glide into the gap with a layout spring.
- [Badge Gradient Outline](https://pixelpapa.com/components/badges/badge-gradient-outline.md): Pill badges with a hairline gradient border and matching gradient text; on hover the colours slide through the outline and a soft tint fills the pill.
- [Badge Shimmer New](https://pixelpapa.com/components/badges/badge-shimmer-new.md): A small "New" label whose text catches a passing highlight on a loop while a tiny spark twinkles beside it.
- [Badge Status Pulse](https://pixelpapa.com/components/badges/badge-status-pulse.md): Status badges with a live dot per state: a calm sonar ring for healthy, a breathing glow for degraded, urgent double rings for down and an orbiting arc for deploying.
- [Badge Trend Delta](https://pixelpapa.com/components/badges/badge-trend-delta.md) (Pro): A delta badge that flips its arrow with a spring, cross-fades between green and red and rolls the figure whenever the value changes sign or size.
- [Badge Verified Seal](https://pixelpapa.com/components/badges/badge-verified-seal.md) (Pro): A scalloped verification seal that spins in on a spring, draws its check stroke, takes a single sheen and then keeps turning slowly. Hover replays it.

### Toggles & Switches

- [Toggle Day Night](https://pixelpapa.com/components/toggles/toggle-day-night.md) (Pro): A theme switch drawn as a tiny sky: the sun rolls across and becomes a cratered moon, clouds sink away and stars pop out one by one.
- [Toggle Icon Morph](https://pixelpapa.com/components/toggles/toggle-icon-morph.md): A switch with a glyph inside the thumb: the two strokes of the cross swing and re-join into a check as the thumb rolls across.
- [Toggle iOS With Label List](https://pixelpapa.com/components/toggles/toggle-ios-with-label-list.md) (Pro): A settings card of labelled switches under a master toggle; turning the master off folds the dependent rows away with a staggered collapse.
- [Toggle Like Bookmark](https://pixelpapa.com/components/toggles/toggle-like-bookmark.md): Icon toggles that each fill in their own way: the heart pops, the bookmark drops in from above, the star spins and the bell rings, all with a ring burst.
- [Toggle Lock Shake](https://pixelpapa.com/components/toggles/toggle-lock-shake.md) (Pro): A switch that can be locked: clicking it then shakes its head, rattles the padlock in the thumb and pops up the reason it cannot change.
- [Toggle Segmented Theme](https://pixelpapa.com/components/toggles/toggle-segmented-theme.md) (Pro): A light / dark / system picker with a sliding thumb and icons that react when chosen, paired with a miniature window that wipes between themes and splits in two for "system".
- [Toggle Spring Switch](https://pixelpapa.com/components/toggles/toggle-spring-switch.md): A switch whose thumb stretches toward the other side while pressed, then snaps across with a little overshoot on release.

### Inputs

- [Input Credit Card](https://pixelpapa.com/components/inputs/input-credit-card.md) (Pro): A payment form with a live card preview: digits group in fours, a highlight glides to the part you are editing, and the card flips over for the security code.
- [Input Currency Format](https://pixelpapa.com/components/inputs/input-currency-format.md) (Pro): A large amount field that groups thousands as you type without losing the caret, pads cents on blur, and grows to hug its digits.
- [Input Floating Label](https://pixelpapa.com/components/inputs/input-floating-label.md): Text fields whose label rests as a placeholder, then springs up into a small caption on focus or when filled; inset and underline variants.
- [Input Inline Edit](https://pixelpapa.com/components/inputs/input-inline-edit.md): Text that turns into a field in place with no layout shift; Enter or blur saves with a brief tick, Escape puts the old value back.
- [Input Mention Autocomplete](https://pixelpapa.com/components/inputs/input-mention-autocomplete.md) (Pro): A comment box that opens a people list when you type @, filters as you go, inserts the handle with Enter or Tab and tints finished mentions inline.
- [Input Number Stepper](https://pixelpapa.com/components/inputs/input-number-stepper.md) (Pro): A spinbutton whose digits roll up or down like an odometer; hold a button to repeat with acceleration, or use the arrow keys.
- [Input OTP Boxes](https://pixelpapa.com/components/inputs/input-otp-boxes.md) (Pro): One-time-code boxes that auto-advance, accept a pasted code, step back on Backspace, pop each digit in and shake or hop on error or success.
- [Input Password Reveal Strength](https://pixelpapa.com/components/inputs/input-password-reveal-strength.md) (Pro): A password field with a morphing show/hide eye, a four-segment strength meter that fills with springs, and a checklist that ticks off rules as you type.
- [Input Phone Country](https://pixelpapa.com/components/inputs/input-phone-country.md) (Pro): A phone field with a flag and dial-code picker; choosing a country rolls the flag over and re-masks the number, and the list is fully keyboard driven with typeahead.
- [Input Search Expand](https://pixelpapa.com/components/inputs/input-search-expand.md) (Pro): A round search icon that springs open into a full field, shows a ⌘K hint while empty, and collapses again on Escape or blur.
- [Input Tag Chips](https://pixelpapa.com/components/inputs/input-tag-chips.md) (Pro): A tag field where chips spring in, reflow with layout animation when one is removed, and a duplicate makes the existing chip pulse instead of adding twice.
- [Input Textarea Autogrow Counter](https://pixelpapa.com/components/inputs/input-textarea-autogrow-counter.md) (Pro): A textarea that eases taller as you write, with a progress ring that fills toward the limit, turns amber near it and counts the overflow in red.
- [Input URL Prefix Copy](https://pixelpapa.com/components/inputs/input-url-prefix-copy.md): A URL field with a fixed prefix segment that strips pasted protocols, plus a copy button that morphs to a tick while a highlight sweeps the field.
- [Input With Validation States](https://pixelpapa.com/components/inputs/input-with-validation-states.md) (Pro): A field that debounces a sync or async validator and moves through checking, valid and invalid states with a morphing status icon and a sliding message.

### Checkboxes & Radios

- [Checkbox Card Select](https://pixelpapa.com/components/checkboxes/checkbox-card-select.md) (Pro): Multi-select cards: a chosen card tints, its icon tile inverts and a check bubble springs into the corner while the running total rolls.
- [Checkbox Draw Check](https://pixelpapa.com/components/checkboxes/checkbox-draw-check.md): A checkbox whose fill springs out from the centre while the tick is drawn as a single pen stroke, then erased in reverse when cleared.
- [Checkbox Indeterminate Tree](https://pixelpapa.com/components/checkboxes/checkbox-indeterminate-tree.md) (Pro): A nested checkbox tree where parents reflect their children: the mark morphs between a dash and a check, and branches fold open with animated height.
- [Checkbox Todo Strikethrough](https://pixelpapa.com/components/checkboxes/checkbox-todo-strikethrough.md): A to-do list where ticking an item draws a line through its text from left to right, then the finished item sinks to the bottom with a layout spring.
- [Radio Card Plans](https://pixelpapa.com/components/checkboxes/radio-card-plans.md): Plan cards backed by native radios: one shared selection ring glides from card to card with a spring while the radio dot pops in.
- [Radio Segmented Dots](https://pixelpapa.com/components/checkboxes/radio-segmented-dots.md) (Pro): A minimal radio group of dots on a hairline: a ringed marker bounces between them on a spring and the chosen option's name rolls in beside the label.

### Selects

- [Select Animated Dropdown](https://pixelpapa.com/components/selects/select-animated-dropdown.md): A custom select whose menu springs open with staggered rows and a highlight that glides between options; arrow keys, Home/End, Enter, Escape and typeahead all work.
- [Select Avatar People](https://pixelpapa.com/components/selects/select-avatar-people.md) (Pro): An assignee picker with gradient initials avatars and presence dots; the chosen avatar pops into the trigger and the list filters from a built-in search.
- [Select Cascading Menu](https://pixelpapa.com/components/selects/select-cascading-menu.md) (Pro): A two-level select: pick a group on the left and its children slide in on the right; arrow keys move within a column and Left/Right step between levels.
- [Select Color Swatches](https://pixelpapa.com/components/selects/select-color-swatches.md): A radio group of colour swatches where a ring springs from one swatch to the next and the colour name rolls over; arrow keys move the selection.
- [Select Combobox Search](https://pixelpapa.com/components/selects/select-combobox-search.md) (Pro): A searchable combobox that filters as you type, bolds the matching letters, slides a highlight under the active row and restores the selection on Escape.
- [Select Multi Chips](https://pixelpapa.com/components/selects/select-multi-chips.md): A multi-select whose picks become chips that spring into the field and reflow when removed; type to filter, Enter toggles, Backspace removes the last chip.

### Sliders

- [Slider Circular Dial](https://pixelpapa.com/components/sliders/slider-circular-dial.md) (Pro): A thermostat-style dial: drag the knob around a 270° arc and the gradient track, knob and reading follow on a spring; presets sweep it to a new value.
- [Slider Range Dual](https://pixelpapa.com/components/sliders/slider-range-dual.md) (Pro): A two-thumb range slider under a histogram whose bars light up inside the selection; thumbs keep a minimum gap and the nearest one follows a track press.
- [Slider Ruler Ticks](https://pixelpapa.com/components/sliders/slider-ruler-ticks.md) (Pro): A ruler you drag or flick under a fixed needle; it coasts with inertia, snaps to the nearest tick and shows the reading large in the centre.
- [Slider Spring Thumb](https://pixelpapa.com/components/sliders/slider-spring-thumb.md): A slider whose value bubble trails the thumb on a loose spring and leans into the direction of travel, then settles upright.
- [Slider Stepped Labels](https://pixelpapa.com/components/sliders/slider-stepped-labels.md): A discrete slider with labelled stops: the thumb follows your finger freely, then springs onto the nearest stop while its label lights up.
- [Slider Volume Vertical](https://pixelpapa.com/components/sliders/slider-volume-vertical.md): A tall pill you drag up and down like a phone volume control; the fill follows on a spring, the pill stretches when you pull past either end, and M mutes.

### Text Effects

- [Blur Reveal Text](https://pixelpapa.com/components/text/blur-reveal-text.md): Words rise out of a blur one after another when the text scrolls into view.
- [Text Circular Rotating](https://pixelpapa.com/components/text/text-circular-rotating.md) (Pro): Text set on a circle that spins continuously and eases down to a crawl on hover, with a slot in the middle for an icon or button.
- [Text Counting Number](https://pixelpapa.com/components/text/text-counting-number.md) (Pro): A spring-driven count-up with locale formatting, prefix, suffix and decimals; writes straight to the DOM so it never re-renders.
- [Text Glitch Slice](https://pixelpapa.com/components/text/text-glitch-slice.md) (Pro): The word is cut into horizontal strips that jolt sideways in short bursts, with two colour ghosts splitting off underneath.
- [Text Gradient Flow](https://pixelpapa.com/components/text/text-gradient-flow.md): A seamless multi-stop gradient that travels through the letters on a loop, with an optional blurred glow of the same gradient behind.
- [Text Highlight Marker](https://pixelpapa.com/components/text/text-highlight-marker.md) (Pro): Hand-drawn marker strokes (highlight, underline or circle) draw themselves behind words when they scroll into view.
- [Text Letters Pull Up](https://pixelpapa.com/components/text/text-letters-pull-up.md) (Pro): Each letter springs up from behind a mask with a slight tilt, staggered across the line when it enters the viewport.
- [Text Reveal On Scroll Words](https://pixelpapa.com/components/text/text-reveal-on-scroll-words.md) (Pro): A pinned paragraph whose words go from faint to full strength one by one as you scroll through its track.
- [Text Scramble Decode](https://pixelpapa.com/components/text/text-scramble-decode.md) (Pro): Characters churn through random glyphs and lock into place left to right; replays on hover or focus.
- [Text Shimmer Sweep](https://pixelpapa.com/components/text/text-shimmer-sweep.md): A slanted band of light glides across dimmed text, rests, then sweeps again; colours follow the theme.
- [Text Split Flip Board](https://pixelpapa.com/components/text/text-split-flip-board.md) (Pro): Departure-board characters: every cell flips its split flap through the alphabet until it lands on the target letter.
- [Text Typewriter Loop](https://pixelpapa.com/components/text/text-typewriter-loop.md) (Pro): Types a phrase, holds, deletes it and moves to the next one, with a blinking caret that stays solid while keys are moving.
- [Text Variable Proximity](https://pixelpapa.com/components/text/text-variable-proximity.md) (Pro): Letters gain weight, size and contrast the closer the cursor gets, easing back as it leaves; made for variable fonts.
- [Text Wave Hover](https://pixelpapa.com/components/text/text-wave-hover.md) (Pro): Letters lift and swell in a soft bell curve around the pointer, and a slow idle swell rolls through when nobody is hovering.
- [Text Word Rotate](https://pixelpapa.com/components/text/text-word-rotate.md) (Pro): A vertical word carousel that lives inside a sentence; the slot springs to each word's width while words roll in from below.

### Backgrounds

- [Animated Grid Lines](https://pixelpapa.com/components/backgrounds/bg-animated-grid-lines.md) (Pro): A perspective floor of grid lines that scrolls toward the viewer forever, with light pulses racing down a few of the lines.
- [Aurora Background](https://pixelpapa.com/components/backgrounds/aurora-background.md): Slow drifting colour ribbons behind your content, built from blurred gradients with no canvas.
- [Beams Light Rays](https://pixelpapa.com/components/backgrounds/bg-beams-light-rays.md) (Pro): Soft light rays fan out from above and sway a few degrees while breathing in brightness, with dust motes drifting through them.
- [Dot Grid Spotlight](https://pixelpapa.com/components/backgrounds/bg-dot-grid-spotlight.md) (Pro): A quiet dot grid where a soft light trails the cursor and swells the dots it passes over; it wanders on its own when idle.
- [Flow Field](https://pixelpapa.com/components/backgrounds/bg-flow-field.md) (Pro): Hundreds of canvas particles ride a slowly shifting vector field and leave fading silk trails in your theme colours.
- [Gradient Mesh Blobs](https://pixelpapa.com/components/backgrounds/bg-gradient-mesh-blobs.md): Five saturated blobs wander on separate looping paths and melt into a mesh gradient, while one extra blob follows the cursor on a spring.
- [Hex Tiles Hover](https://pixelpapa.com/components/backgrounds/bg-hex-tiles-hover.md) (Pro): A canvas honeycomb (or square grid) where the tile under the cursor lights up, spills into its neighbours and slowly cools, with stray tiles sparking while idle.
- [Noise Grain Vignette](https://pixelpapa.com/components/backgrounds/bg-noise-grain-vignette.md): Flickering film grain over a warm centre glow with darkened corners, like a projected still; grain jumps in steps, never tweens.
- [Particles Constellation](https://pixelpapa.com/components/backgrounds/bg-particles-constellation.md) (Pro): Canvas particles drift slowly and draw links to their neighbours; the cursor becomes a bright node that pulls nearby stars into the web.
- [Ripple Rings](https://pixelpapa.com/components/backgrounds/bg-ripple-rings.md) (Pro): Concentric rings carry a pulse of brightness outward from the centre like sonar, and every click drops a new ripple where you pressed.
- [Shooting Stars](https://pixelpapa.com/components/backgrounds/bg-shooting-stars.md) (Pro): Three layers of twinkling stars with meteors that streak diagonally across at staggered intervals, each with a bright head and a fading tail.
- [Wave Lines](https://pixelpapa.com/components/backgrounds/bg-wave-lines.md) (Pro): A bundle of thin SVG sine lines, each with its own wavelength and speed, sliding past one another so the ribbon keeps braiding and unbraiding.

### Cards

- [Card 3D Tilt](https://pixelpapa.com/components/cards/card-3d-tilt.md) (Pro): A card that leans toward the pointer on springs, with a glare that tracks the cursor and layers floating at different depths.
- [Card Border Beam](https://pixelpapa.com/components/cards/card-border-beam.md) (Pro): A card with a comet of light travelling around its border, drawn with an animated conic gradient and a soft glow copy.
- [Card Expandable Detail](https://pixelpapa.com/components/cards/card-expandable-detail.md) (Pro): Compact rows that expand in place with a shared layout animation, pushing their neighbours aside on a spring.
- [Card Flip](https://pixelpapa.com/components/cards/card-flip.md) (Pro): A two-sided card that turns over on a spring when clicked or activated from the keyboard, on either axis.
- [Card Glass Frost](https://pixelpapa.com/components/cards/card-glass-frost.md): A frosted glass card with a lit top edge and fine grain, floating over slowly drifting colour blobs.
- [Card Hover Reveal Actions](https://pixelpapa.com/components/cards/card-hover-reveal-actions.md) (Pro): A media card whose artwork zooms on hover while quick actions spring in from the edge and a call to action rises from the footer.
- [Card Notification Stack](https://pixelpapa.com/components/cards/card-notification-stack.md): A loose pile of notifications that straightens and fans out from its centre into a readable list on hover or focus.
- [Card Pricing Mini Glow](https://pixelpapa.com/components/cards/card-pricing-mini-glow.md) (Pro): A compact plan card with a slowly rotating colour halo behind it and a light on the border that follows the pointer.
- [Card Product Hover](https://pixelpapa.com/components/cards/card-product-hover.md) (Pro): A product tile whose artwork recolours with the swatches and leans in on hover, with an add-to-cart button that morphs into a quantity stepper.
- [Card Profile Follow](https://pixelpapa.com/components/cards/card-profile-follow.md) (Pro): A profile card whose follow button springs into a confirmed state with a spark burst while the follower count rolls up.
- [Card Stack Swipe](https://pixelpapa.com/components/cards/card-stack-swipe.md) (Pro): A deck you fling left or right; the top card follows your drag with rotation, flies off with momentum and rejoins the back.
- [Card Stat Sparkline](https://pixelpapa.com/components/cards/card-stat-sparkline.md) (Pro): A KPI card whose sparkline draws itself in, then lets you scrub along it to read any point while the headline value follows.
- [Spotlight Card](https://pixelpapa.com/components/cards/spotlight-card.md): A card whose border and surface light up under the cursor like a torch on glass.

### Carousels

- [Carousel Coverflow 3D](https://pixelpapa.com/components/carousels/carousel-coverflow-3d.md) (Pro): Covers fan out in perspective around a centred item; swipe, click a side cover or use the arrow keys and they swing through on springs.
- [Carousel Marquee Infinite](https://pixelpapa.com/components/carousels/carousel-marquee-infinite.md): An endless row that glides in either direction and eases to a stop under the pointer instead of freezing, then eases back up to speed.
- [Carousel Progress Autoplay](https://pixelpapa.com/components/carousels/carousel-progress-autoplay.md) (Pro): Story-style slides with segmented progress bars that fill in real time; tap either side to move, press and hold to pause.
- [Carousel Snap Drag](https://pixelpapa.com/components/carousels/carousel-snap-drag.md) (Pro): A draggable track that carries your throw's momentum to the nearest slide, with arrows, stretching dots and arrow-key control.
- [Carousel Stacked Fade](https://pixelpapa.com/components/carousels/carousel-stacked-fade.md): Slides sit in a receding stack; the front one drops away and fades while the next rises forward, on a timer that pauses on hover.
- [Carousel Thumbnail Gallery](https://pixelpapa.com/components/carousels/carousel-thumbnail-gallery.md) (Pro): A main stage with a thumbnail strip; slides push in from the direction you travel and a ring glides between thumbnails.
- [Carousel Vertical Ticker](https://pixelpapa.com/components/carousels/carousel-vertical-ticker.md): A live feed where each new row springs in at the top, the rest step down a slot and the oldest fades off the bottom, pausing on hover.

### Avatars

- [Avatar Group Tooltip Names](https://pixelpapa.com/components/avatars/avatar-group-tooltip-names.md): An avatar row sharing one tooltip that glides from face to face on a spring while the hovered avatar lifts and its neighbours step aside.
- [Avatar Hover Card](https://pixelpapa.com/components/avatars/avatar-hover-card.md) (Pro): An avatar that opens a profile popover on hover or focus, scaling out of the trigger on a spring with forgiving open and close delays.
- [Avatar Stack Expand](https://pixelpapa.com/components/avatars/avatar-stack-expand.md): An overlapping avatar stack that springs apart on hover to show first names, with a +N chip that deals out the rest.
- [Avatar Status Ring](https://pixelpapa.com/components/avatars/avatar-status-ring.md): An avatar wrapped in a presence ring: online radiates soft pulses, away dims to amber, busy holds a solid red, and the badge pops when status changes.
- [Avatar Story Ring](https://pixelpapa.com/components/avatars/avatar-story-ring.md) (Pro): Story avatars with a gradient ring that breaks into spinning dashes while the story loads, then settles into a quiet seen state.
- [Avatar Upload Dropzone](https://pixelpapa.com/components/avatars/avatar-upload-dropzone.md) (Pro): A circular avatar dropzone: its dashed ring spins and swells when a file hovers over it, then the photo drops in over the initials fallback.

### Loaders

- [Loader Bars Equalizer](https://pixelpapa.com/components/loaders/loader-bars-equalizer.md): Rounded bars bounce at different tempos like an audio meter; grows from the baseline or mirrors around the centre line.
- [Loader Infinity Path](https://pixelpapa.com/components/loaders/loader-infinity-path.md) (Pro): A comet of stroke dashes laps an SVG infinity loop, its tail built from stacked dashes that thin out behind the head.
- [Loader Morphing Shape](https://pixelpapa.com/components/loaders/loader-morphing-shape.md): A single shape turns a quarter at a time while its corners melt between square, circle, leaf and diamond, trailed by a lagging ghost.
- [Loader Orbit Dots](https://pixelpapa.com/components/loaders/loader-orbit-dots.md): Dots chase each other around a ring, bunching at the top and fanning out as they fall, around a softly pulsing core.
- [Loader Progress Ring Percent](https://pixelpapa.com/components/loaders/loader-progress-ring-percent.md) (Pro): A ring that springs to its value while the percentage counts along inside it, then swaps to a check mark when it reaches 100.
- [Loader Skeleton Card](https://pixelpapa.com/components/loaders/loader-skeleton-card.md) (Pro): Skeleton blocks for a card and a list, swept by one shared diagonal shimmer per surface so every block glints in sync.
- [Loader Stepped Progress](https://pixelpapa.com/components/loaders/loader-stepped-progress.md) (Pro): A multi-step progress track: connectors fill, the active step spins, finished steps pop a check, and the status line rolls to the next message.
- [Loader Text Shimmer Status](https://pixelpapa.com/components/loaders/loader-text-shimmer-status.md) (Pro): A "Thinking…" style status line: shimmering text that rolls through a list of messages beside a twinkling spark and an elapsed-time counter.
- [Loader Typing Dots](https://pixelpapa.com/components/loaders/loader-typing-dots.md) (Pro): Three dots that bounce, pulse or fade in sequence to say "someone is typing", sized in em so they inherit the text around them.

### Accordions

- [Accordion Horizontal Panels](https://pixelpapa.com/components/accordions/accordion-horizontal-panels.md) (Pro): Side-by-side panels where the chosen one springs wide to reveal its story while the others fold down to a vertical title.
- [Accordion Nested Tree](https://pixelpapa.com/components/accordions/accordion-nested-tree.md) (Pro): A nested tree with indent guides where branches unfold with animated height and staggered children, fully navigable with the arrow keys.
- [Accordion Numbered Editorial](https://pixelpapa.com/components/accordions/accordion-numbered-editorial.md): A magazine-style accordion with oversized serif numerals, a rule that draws across the open row and a plus that folds into a minus.
- [Accordion Smooth Height](https://pixelpapa.com/components/accordions/accordion-smooth-height.md): A single-open accordion that animates to its content's natural height while the chevron turns and the answer settles in from a blur.
- [Accordion With Icons Cards](https://pixelpapa.com/components/accordions/accordion-with-icons-cards.md): Separate accordion cards with icon tiles; the open card lifts on a spring, its icon fills with colour and the plus turns into a close mark.

### Tabs

- [Tabs Animated Height Content](https://pixelpapa.com/components/tabs/tabs-animated-height-content.md): Tabs inside a card that springs to the height of each panel, so short and long content swap without a layout jump.
- [Tabs Folder](https://pixelpapa.com/components/tabs/tabs-folder.md): Browser-style tabs with scooped corners: the active shape slides between tabs, and tabs can be closed or added with layout springs.
- [Tabs Scrollable Overflow](https://pixelpapa.com/components/tabs/tabs-scrollable-overflow.md) (Pro): A tab strip that scrolls when it runs out of room: edge fades and arrow buttons appear only on the side that has more, and the active tab centres itself.
- [Tabs Segmented Icons](https://pixelpapa.com/components/tabs/tabs-segmented-icons.md): An icon segmented control whose active segment unfolds its label, driving a task view where the same cards re-flow between list, board, grid and timeline.
- [Tabs Sliding Pill](https://pixelpapa.com/components/tabs/tabs-sliding-pill.md) (Pro): A pill glides between tabs on a shared-layout spring while the panel slides in from the side you moved toward.
- [Tabs Underline Spring](https://pixelpapa.com/components/tabs/tabs-underline-spring.md) (Pro): An underline that stretches toward the next tab before its tail catches up, with a hover highlight that follows the pointer.
- [Tabs Vertical With Preview](https://pixelpapa.com/components/tabs/tabs-vertical-with-preview.md) (Pro): Vertical feature tabs that auto-advance with a filling rail and swap a drawn product preview, sliding up or down by direction.

### Tooltips & Popovers

- [Hover Card Link Preview](https://pixelpapa.com/components/tooltips/hover-card-link-preview.md): Inline links that open a hover card with a drawn miniature of the destination page, which slowly scrolls while you read the summary.
- [Popover Color Picker Mini](https://pixelpapa.com/components/tooltips/popover-color-picker-mini.md) (Pro): A compact colour popover with a draggable saturation field, hue slider, swatches and hex input that springs out of its swatch trigger.
- [Popover Share Menu](https://pixelpapa.com/components/tooltips/popover-share-menu.md) (Pro): A share popover with a public-link switch, a copy button that flips to a confirmed state with a sweep across the URL, and quick share targets.
- [Tooltip Rich Card](https://pixelpapa.com/components/tooltips/tooltip-rich-card.md): A toolbar whose rich tooltip (title, body, shortcut keys) glides from button to button instead of closing and reopening.
- [Tooltip Spring Follow](https://pixelpapa.com/components/tooltips/tooltip-spring-follow.md): A tooltip that trails the cursor on a spring and tilts with its velocity, like a tag swinging from the pointer.

### Dialogs & Drawers

- [Dialog Command Style Search](https://pixelpapa.com/components/dialogs/dialog-command-style-search.md) (Pro): A search dialog in the style of a command palette: scope chips, matches highlighted as you type, and a selection bar that springs between results with the arrow keys.
- [Dialog Confirm Destructive](https://pixelpapa.com/components/dialogs/dialog-confirm-destructive.md) (Pro): A type-to-confirm dialog: the delete button fills up as each character of the resource name matches, unlocks at the last one and shakes on a wrong try.
- [Dialog Morph From Button](https://pixelpapa.com/components/dialogs/dialog-morph-from-button.md): A button that grows into the dialog itself through a shared layout, with its label travelling to become the title, then shrinks back on close.
- [Dialog Multi Step Wizard](https://pixelpapa.com/components/dialogs/dialog-multi-step-wizard.md) (Pro): A wizard dialog whose steps slide in the direction of travel while the card springs to each step's height and a segmented progress bar fills.
- [Dialog Scale Spring](https://pixelpapa.com/components/dialogs/dialog-scale-spring.md): A modal that springs up from 86% scale over a blurred scrim, traps focus, closes on Escape or outside click and hands focus back to its trigger.
- [Drawer Bottom Sheet Drag](https://pixelpapa.com/components/dialogs/drawer-bottom-sheet-drag.md): A bottom sheet you can drag down to dismiss: a slow pull past the threshold or a quick flick closes it, and the scrim fades with the drag distance.
- [Drawer Side Panel](https://pixelpapa.com/components/dialogs/drawer-side-panel.md) (Pro): A floating settings panel that slides in from the right with staggered rows while the page behind recedes and dims.

### Docks & Menus

- [Dock Bottom Nav Mobile](https://pixelpapa.com/components/docks/dock-bottom-nav-mobile.md): A mobile tab bar where a blob slides under the active tab, squashing as it travels, while the icon hops up into it and its label fades in below.
- [Dock Expandable FAB](https://pixelpapa.com/components/docks/dock-expandable-fab.md): A floating action button that turns its plus into a cross and fires a speed-dial of labelled actions upward with staggered springs.
- [Dock Floating Toolbar](https://pixelpapa.com/components/docks/dock-floating-toolbar.md) (Pro): A text-format toolbar that pops over a selection: toggles spring into their active state and the whole bar morphs into a link field and back.
- [Dock Magnify](https://pixelpapa.com/components/docks/dock-magnify.md): A dock whose icons swell by their distance to the cursor, lift their labels, bounce on launch and respond to keyboard focus the same way.
- [Menu Bar App](https://pixelpapa.com/components/docks/menu-bar-app.md) (Pro): A desktop-style File / Edit / View menubar: click once, then glide between menus as the highlight follows, with check items, shortcuts and full arrow-key navigation.
- [Menu Context Right Click](https://pixelpapa.com/components/docks/menu-context-right-click.md) (Pro): A custom context menu that opens at the pointer, flips to stay inside its area, scales from the corner nearest the click and is fully keyboard driven.
- [Menu Dropdown Nested](https://pixelpapa.com/components/docks/menu-dropdown-nested.md) (Pro): A dropdown with submenus to any depth: they open on hover intent or ArrowRight, scale out from their parent row and close level by level with ArrowLeft and Escape.
- [Menu Radial](https://pixelpapa.com/components/docks/menu-radial.md) (Pro): A radial menu that blooms around its button: items fly out along a ring, a wedge highlight rotates the short way to the hovered item, and arrow keys walk the circle.

### AI Elements

- [AI Chat Thread](https://pixelpapa.com/components/ai/ai-chat-thread.md) (Pro): A chat thread where user bubbles spring in from the right and the assistant reply streams in chunks behind a blinking caret, auto-scrolling as it grows.
- [AI Code Block With Copy](https://pixelpapa.com/components/ai/ai-code-block-copy.md) (Pro): A code answer with sliding language tabs, line numbers, highlighted lines that wipe in, and a copy button that morphs into a confirmed tick.
- [AI Model Compare](https://pixelpapa.com/components/ai/ai-model-compare.md): A blind side-by-side: two answers stream at their own speeds with live token stats, then your vote crowns a winner and reveals both model names.
- [AI Prompt Input](https://pixelpapa.com/components/ai/ai-prompt-input.md) (Pro): A chat composer with an auto-growing textarea, removable attachment chips, a model picker popover and a send button that morphs into stop while generating.
- [AI Source Citations](https://pixelpapa.com/components/ai/ai-source-citations.md): An answer with numbered citation markers; hovering or focusing one pops a source card and lights the matching source in the strip below.
- [AI Streaming Markdown](https://pixelpapa.com/components/ai/ai-streaming-markdown.md): Renders a markdown answer as it streams: each word fades up out of a blur, with headings, lists, bold and inline code formatted as they arrive.
- [AI Suggestion Chips](https://pixelpapa.com/components/ai/ai-suggestion-chips.md) (Pro): Prompt suggestions grouped by intent; chips cascade in when you switch group, and picking one types its prompt into the input.
- [AI Thinking Steps](https://pixelpapa.com/components/ai/ai-thinking-steps.md) (Pro): A collapsible reasoning trace: the header shimmers and runs a live timer while steps tick from spinner to check, then folds to "Thought for Ns".
- [AI Tool Call Card](https://pixelpapa.com/components/ai/ai-tool-call-card.md) (Pro): An agent tool invocation card: a sweep runs along the border while the call is in flight, then the status flips to done and the result preview unfolds.
- [AI Voice Orb](https://pixelpapa.com/components/ai/ai-voice-orb.md) (Pro): A glowing orb that breathes when idle, swells with simulated microphone level while listening, swirls while thinking and pulses in speech rhythm while speaking.

### Charts

- [Area Chart Gradient](https://pixelpapa.com/components/charts/chart-area-gradient.md) (Pro): A smooth SVG area chart that draws its line on mount, fades in a gradient fill and snaps a crosshair tooltip to the nearest point.
- [Donut Chart Segments](https://pixelpapa.com/components/charts/chart-donut-segments.md): A donut whose segments sweep in one after another; hovering a segment or its legend row thickens it and swaps the centre total for that slice.
- [Funnel Steps Chart](https://pixelpapa.com/components/charts/chart-funnel-steps.md) (Pro): A flowing horizontal funnel: each stage tapers into the next with a bezier, stages fade in left to right and hovering one shows its drop-off.
- [Grouped Bar Chart](https://pixelpapa.com/components/charts/chart-bar-grouped.md) (Pro): Side-by-side SVG bars per category that grow from the baseline in a stagger, with a group highlight and a tooltip comparing every series.
- [Heat Grid Week by Hour](https://pixelpapa.com/components/charts/chart-heat-grid.md) (Pro): A 7×24 SVG heatmap whose cells ripple in diagonally; hover or arrow-key between cells for a snapped tooltip, with peak hour called out.
- [Inline Sparkline](https://pixelpapa.com/components/charts/chart-sparkline-inline.md): A tiny table-cell sparkline that draws itself on mount, colours by trend and snaps a value bubble to the nearest point on hover.
- [Multi Line Chart With Legend](https://pixelpapa.com/components/charts/chart-line-multi-legend.md) (Pro): Several SVG lines draw in together; legend buttons toggle a series and the y-axis rescales while the remaining lines morph to fit.
- [Radial Gauge](https://pixelpapa.com/components/charts/chart-radial-gauge.md): A 240° SVG gauge whose arc, end cap and centre number all ride one spring, changing colour as the value crosses its zones.
- [Stacked Horizontal Bar Chart](https://pixelpapa.com/components/charts/chart-stacked-bar-horizontal.md) (Pro): Horizontal stacked bars that wipe in row by row; hovering a segment or legend item isolates that series across every row and shows its share.

### Audio & Media

- [Media Audio Waveform](https://pixelpapa.com/components/media/media-audio-waveform.md): A voice-note waveform that fills as it plays, previews where you are about to seek on hover and lets you click, drag or arrow-key to any point.
- [Media Image Compare Slider](https://pixelpapa.com/components/media/media-image-compare-slider.md): A before/after comparison you drag anywhere on the image; the divider follows on a tight spring, works from the keyboard and nudges itself once as a hint.
- [Media Music Player Card](https://pixelpapa.com/components/media/media-music-player-card.md) (Pro): A music player whose record slides out of its sleeve and spins while playing, with a seekable scrubber and track changes that slide in.
- [Media Podcast Episode Row](https://pixelpapa.com/components/media/media-podcast-episode-row.md): An episode list where the playing row gets a sliding highlight, a live equaliser on its cover and a progress ring around the play button.
- [Media Video Player Controls](https://pixelpapa.com/components/media/media-video-player-controls.md) (Pro): A video player shell with a full control bar: scrubber with buffer and hover time, expanding volume, captions, speed and keyboard shortcuts over a drawn scene.

### Calendars & Dates

- [Calendar Event Dots](https://pixelpapa.com/components/calendars/calendar-event-dots.md) (Pro): A month grid with coloured dots for each day's events beside an agenda that re-staggers for the selected day; months slide and arrow keys move the selection.
- [Calendar Heatmap Year](https://pixelpapa.com/components/calendars/calendar-heatmap-year.md): A contribution-style year heatmap: weeks ripple in column by column, and one tooltip springs from cell to cell under the pointer or the arrow keys.
- [Calendar Month Basic](https://pixelpapa.com/components/calendars/calendar-month-basic.md) (Pro): A single-month calendar where months slide in from the direction you navigate, the selection pill glides between days, and the grid is fully arrow-key driven.
- [Calendar Range Picker](https://pixelpapa.com/components/calendars/calendar-range-picker.md) (Pro): Two months side by side for picking a date range: click a start, and a soft band previews the span under your cursor until the second click locks it in.
- [Calendar Week Strip](https://pixelpapa.com/components/calendars/calendar-week-strip.md): A one-week day strip with a selection pill that slides between days; weeks swipe in from the side you navigate and arrow keys roll over into the next week.
- [Date Picker Popover](https://pixelpapa.com/components/calendars/date-picker-popover.md) (Pro): A date field you can type into or open as a popover with quick presets and a sliding month grid; picking a day springs the popover shut and fills the field.
- [Time Picker Wheel](https://pixelpapa.com/components/calendars/time-picker-wheel.md): Hour, minute and AM/PM drums you scroll, flick or drag; rows curve away like a cylinder, snap into the centre band, and arrow keys step each wheel.

### Tables & Lists

- [List Drag Reorder](https://pixelpapa.com/components/tables/list-drag-reorder.md): A ranked list you reorder by dragging a grip handle (or Arrow keys); the lifted row floats with a shadow while the others spring out of its way.
- [Table Expandable Rows](https://pixelpapa.com/components/tables/table-expandable-rows.md) (Pro): Table rows that open a detail panel underneath with a spring height animation and a rotating chevron, one at a time or many.
- [Table Inline Status Edit](https://pixelpapa.com/components/tables/table-inline-status-edit.md): Each row carries a status pill that opens a keyboard-friendly dropdown in place; the pill swaps with a spring and the row confirms the save.
- [Table Row Select Bulk](https://pixelpapa.com/components/tables/table-row-select-bulk.md) (Pro): Checkbox rows with shift-click range selection and a floating action bar that springs up from the bottom with a rolling count.
- [Table Sortable Animated](https://pixelpapa.com/components/tables/table-sortable-animated.md): A semantic data table whose rows glide to their new positions with spring layout animation when a column header is clicked.

### Notifications

- [Alert Inline Variants](https://pixelpapa.com/components/notifications/alert-inline-variants.md): Inline alerts in info, success, warning and error tones with an optional action; dismissing one blurs it out and the stack closes the gap on a spring.
- [Notification Dynamic Island](https://pixelpapa.com/components/notifications/notification-dynamic-island.md) (Pro): A pill that springs between sizes to hold live activities (an incoming call, a timer, now playing) with content that blurs across each morph.
- [Notification Inbox Popover](https://pixelpapa.com/components/notifications/notification-inbox-popover.md) (Pro): A bell popover with Unread and All tabs: marking a row read drains its dot and folds it out of the unread list while the badge count rolls down.
- [Notification List Swipe](https://pixelpapa.com/components/notifications/notification-list-swipe.md): Notification rows you can swipe: right to archive, left to delete. The action underneath grows with the drag, and a flick or a long pull sends the row flying before the list closes up.
- [Toast Stack Sonner Like](https://pixelpapa.com/components/notifications/toast-stack-sonner-like.md) (Pro): A hand-built toaster: toasts pile into a tight stack, fan out into a readable list on hover, pause their timers while you look, and promise toasts morph from loading to done.
- [Toast Undo Progress](https://pixelpapa.com/components/notifications/toast-undo-progress.md): An undo toast with a draining countdown bar that pauses on hover; undo springs the removed row back into the list, and letting it run out commits the action.

### Command & Search

- [Command Palette](https://pixelpapa.com/components/command/command-palette.md): A grouped command palette with fuzzy matching that highlights matched letters, a highlight that glides between rows on arrow keys, recents and footer hints.
- [Inline Slash Menu](https://pixelpapa.com/components/command/command-inline-slash-menu.md): Type "/" on an editor line to open a block menu that filters as you type, moves with the arrow keys and turns the line into the chosen block.
- [Shortcut Cheatsheet](https://pixelpapa.com/components/command/command-shortcut-cheatsheet.md): A keyboard shortcut overlay with physical-looking key caps that press down in sequence, on a demo loop, on hover, or when you type the combo.
- [Spotlight Search](https://pixelpapa.com/components/command/command-spotlight-search.md) (Pro): A large centred search field with a results column and a preview pane that crossfades to the highlighted result as you arrow through.

### Pagination

- [Pagination Dots Morph](https://pixelpapa.com/components/pagination/pagination-dots-morph.md): Dot pagination where the active dot stretches into a pill with a spring and, on autoplay, fills like a story timer before handing over to the next dot.
- [Pagination Infinite Scroll Sentinel](https://pixelpapa.com/components/pagination/pagination-infinite-scroll-sentinel.md) (Pro): Infinite scrolling driven by an IntersectionObserver sentinel: shimmer rows appear as you near the end, new rows fade up, and a progress hairline tracks how much is loaded.
- [Pagination Jump Input](https://pixelpapa.com/components/pagination/pagination-jump-input.md) (Pro): Pagination built around an editable page field: type a number and press Enter to jump, out-of-range values shake and reset, and a scrubber shows where you are.
- [Pagination Load More](https://pixelpapa.com/components/pagination/pagination-load-more.md) (Pro): A load-more list: the button morphs into a spinner, skeleton rows hold the space, then the new items stagger in and the list scrolls to meet them.
- [Pagination Prev Next Compact](https://pixelpapa.com/components/pagination/pagination-prev-next-compact.md): A compact previous/next pager with a page-of-total readout whose number rolls up or down in the direction you are paging.
- [Pagination Sliding Active](https://pixelpapa.com/components/pagination/pagination-sliding-active.md): Numbered pagination where the active pill springs between pages; deep in the range the numbers reel through the pill instead, and each ellipsis jumps five pages.

### Breadcrumbs

- [Breadcrumb Collapsed Dropdown](https://pixelpapa.com/components/breadcrumbs/breadcrumb-collapsed-dropdown.md): A breadcrumb that folds its middle levels into an ellipsis button; the menu springs open and lists the hidden levels as an indented staircase.
- [Breadcrumb Icons Chevrons](https://pixelpapa.com/components/breadcrumbs/breadcrumb-icons-chevrons.md): An icon breadcrumb that assembles itself on mount, each crumb sliding out from behind its chevron, with a hover highlight that glides between items.
- [Breadcrumb Path Editable](https://pixelpapa.com/components/breadcrumbs/breadcrumb-path-editable.md) (Pro): A file-explorer breadcrumb: click the bar and the crumbs turn into a typed path; Enter navigates, a path that does not exist shakes, Escape restores the crumbs.
- [Breadcrumb Steps Progress](https://pixelpapa.com/components/breadcrumbs/breadcrumb-steps-progress.md): A breadcrumb of interlocking arrow segments for linear flows: colour sweeps into the next arrow as you advance and finished steps swap their number for a check.

### Steppers & Timelines

- [Stepper Horizontal Progress](https://pixelpapa.com/components/steppers/stepper-horizontal-progress.md): A horizontal stepper where the connector line fills toward the next step and each completed circle draws its checkmark.
- [Stepper Order Tracking](https://pixelpapa.com/components/steppers/stepper-order-tracking.md): A shipment tracker where a truck drives along a curved SVG route to the current stage, leaving a solid line behind it and lighting each stop it passes.
- [Stepper Vertical Details](https://pixelpapa.com/components/steppers/stepper-vertical-details.md) (Pro): A vertical stepper where the active step springs open to show its details while finished steps collapse to a one-line summary and the rail fills.
- [Stepper Wizard Form](https://pixelpapa.com/components/steppers/stepper-wizard-form.md) (Pro): A multi-step form that slides between steps in the direction of travel and shakes, with inline errors, when a step fails validation.
- [Timeline Horizontal Milestones](https://pixelpapa.com/components/steppers/timeline-horizontal-milestones.md) (Pro): A draggable horizontal roadmap: the track glides to centre the chosen milestone, a ring marker slides between dots, and reached milestones fill the line.
- [Timeline Vertical Activity](https://pixelpapa.com/components/steppers/timeline-vertical-activity.md): An activity feed on a vertical rail: icon nodes pop in one after another while the connecting line draws downward between them.

### Files & Uploads

- [File Attachment Chips](https://pixelpapa.com/components/files/file-attachment-chips.md): Attachment chips with a type-coloured icon and size; new chips pop in, removed ones collapse, and the rest reflow with spring layout animation.
- [File List Progress](https://pixelpapa.com/components/files/file-list-progress.md) (Pro): An upload queue with pause, resume, cancel and retry: two files transfer at a time, queued ones start on their own, and finished rows settle with a drawn check.
- [File Preview Grid](https://pixelpapa.com/components/files/file-preview-grid.md): A grid of file tiles colour-coded by type, each with a drawn preview; tiles lift on hover to reveal actions and a selection count rolls in the header.
- [File Tree Explorer](https://pixelpapa.com/components/files/file-tree-explorer.md) (Pro): A file tree with spring-animated folders, indent guides and full arrow-key navigation; the selection highlight slides between rows.
- [File Upload Dropzone](https://pixelpapa.com/components/files/file-upload-dropzone.md): A dropzone that lifts and glows while files hover over it, then lists each file with its own simulated progress bar, a drawn check on completion and a remove button.

### Dashboard Widgets

- [Goal Progress Rings](https://pixelpapa.com/components/dashboard/dash-goal-progress.md): Concentric rings sweep toward each target beside a list of matching bars; hovering a goal isolates its ring and swaps the centre readout.
- [KPI Tiles](https://pixelpapa.com/components/dashboard/dash-kpi-tiles.md) (Pro): Metric tiles that count up to their value, show a coloured delta pill and draw an edge-to-edge sparkline along the bottom.
- [Live Activity Feed](https://pixelpapa.com/components/dashboard/dash-activity-feed.md): A feed where new events drop in at the top on a timer with a brief highlight while older rows slide down and the last one fades out; pauses on hover.
- [Live Visitors](https://pixelpapa.com/components/dashboard/dash-live-visitors.md) (Pro): A real-time visitors widget: digits flip as the count ticks, cities pulse on a dotted world map and a bar stream scrolls the last minute.
- [Revenue Card With Period Switcher](https://pixelpapa.com/components/dashboard/dash-revenue-card.md): A revenue card whose period tabs slide a pill, roll every digit of the total like an odometer and spring the bar chart to the new shape.
- [Team Table Mini](https://pixelpapa.com/components/dashboard/dash-team-table-mini.md) (Pro): A compact members table with presence dots, an inline role picker and a status filter whose pill slides while rows reflow into place.
- [Usage Meter](https://pixelpapa.com/components/dashboard/dash-usage-meter.md) (Pro): Two plan meters: a storage bar whose category segments fill in sequence, and a seat meter of spring-loaded pips you can add to or remove from.

### Sidebars

- [Sidebar Collapsible Rail](https://pixelpapa.com/components/sidebars/sidebar-collapsible-rail.md): An app sidebar that springs between a full panel and a 64px icon rail; labels fade out, and in rail mode each icon shows a tooltip on hover or focus.
- [Sidebar Floating Inset](https://pixelpapa.com/components/sidebars/sidebar-floating-inset.md): A rounded sidebar that floats inside the page margin, with a search field that filters links live (rows reflow with layout animation), count badges and a storage meter.
- [Sidebar Nested Sections](https://pixelpapa.com/components/sidebars/sidebar-nested-sections.md): A sidebar of collapsible groups with spring height animation; one active indicator bar slides between links, even across groups, along a tree guide line.
- [Sidebar Workspace Switcher](https://pixelpapa.com/components/sidebars/sidebar-workspace-switcher.md) (Pro): A sidebar with a workspace switcher on top whose menu springs open and rolls the new workspace into place, and a user card at the bottom with its own pop-up menu.

### Empty States

- [Empty Error Retry](https://pixelpapa.com/components/empty-states/empty-error-retry.md) (Pro): A failed-to-load state with a flickering unplugged-cable drawing and a retry button that spins, fails once with a shake, then reconnects with a spark.
- [Empty First Project](https://pixelpapa.com/components/empty-states/empty-first-project.md): A first-run dropzone whose dashed border marches, tightens and tints while a file is dragged over it, with a primary action and starter templates.
- [Empty Inbox Illustration](https://pixelpapa.com/components/empty-states/empty-inbox-illustration.md): An inbox-zero state with an animated SVG tray: a paper plane loops overhead on a dashed trail while the tray bobs and sparkles blink.
- [Empty Search No Results](https://pixelpapa.com/components/empty-states/empty-search-no-results.md): A no-results state with a scanning magnifier, a working search field and suggestion chips that stagger in and fill the query when clicked.

## Sites (AI website prompts)

- [Atelier Nord](https://pixelpapa.com/sites/site-atelier-nord.md): Editorial architecture-studio page on warm paper with a huge serif headline, a self-drawing elevation, and a project index whose rows redraw a line-drawing preview on hover.
- [Fable Coffee Roasters](https://pixelpapa.com/sites/site-fable-coffee.md): Playful cream-espresso-tomato DTC coffee shop page with a chunky serif headline, a spinning roast badge, illustrated coffee bags you can add to cart and a live subscription builder.
- [Harbor Finance](https://pixelpapa.com/sites/site-harbor-finance.md): Calm navy-and-sand business-banking page with a pointer-tilting debit card over a drawn ledger, count-up stats, a filterable transaction table and a security section with a slow radar sweep.
- [Kite — Brand & Motion Studio](https://pixelpapa.com/sites/site-kite-studio.md): Cobalt-on-paper studio portfolio with enormous type, a cursor-steered kite, project rows that summon a preview under the pointer, a services marquee and an awards table.
- [Lumen AI](https://pixelpapa.com/sites/site-lumen-ai.md): Dark AI research-assistant landing page with drifting aurora glows, a glass product window that streams a cited answer, cursor-lit bento cards and an animated benchmark.
- [Maison Verre — Fashion Lookbook](https://pixelpapa.com/sites/site-maison-verre.md): Stark off-white fashion label page on a hairline brutalist grid with giant serif italics, drawn garment forms and a horizontal lookbook scroller.
- [Nimbus — Product Analytics](https://pixelpapa.com/sites/site-nimbus-analytics.md): Airy light SaaS page with violet and sky gradients, a detailed drawn dashboard whose charts animate in and morph between date ranges, a bento feature grid and a pricing teaser.
- [Orbit — Deploy Platform](https://pixelpapa.com/sites/site-orbit-devtools.md): Near-black developer landing page with a looping terminal deploy log, a live region latency grid and tabbed config snippets.
- [Pulse Fitness](https://pixelpapa.com/sites/site-pulse-fitness.md): Black-and-acid-lime training-app page with stretched uppercase headlines, two phone mockups with animated activity rings and a sweeping heart-rate trace, a tilted marquee and count-up stats.
- [Wayfare — Small-Group Travel](https://pixelpapa.com/sites/site-wayfare-travel.md): Sunset-gradient travel page with a drawn, scroll-parallax mountain hero, illustrated destination cards and an itinerary timeline that fills as you read.

## Tools

- [AI Image Enhancer](https://pixelpapa.com/tools/image-enhancer.md): Upscale and enhance images up to 4× with Real-ESRGAN AI. Restore detail in compressed or low-resolution photos, with optional face enhancement. Included with PixelPapa Pro: 300 images a month.
- [Gradient Generator](https://pixelpapa.com/tools/gradient-generator.md): Free CSS gradient generator. Build linear, radial and conic gradients with draggable colour stops and presets, then copy the CSS background or a Tailwind CSS class.
- [Shadow Generator](https://pixelpapa.com/tools/shadow-generator.md): Free CSS box-shadow generator. Stack up to six shadow layers or generate smooth, realistic shadows from elevation and sharpness, then copy CSS or a Tailwind class.
- [Glass Generator](https://pixelpapa.com/tools/glass-generator.md): Free glassmorphism generator. Tune backdrop blur, saturation, tint, border and grain over colourful backgrounds, then copy the frosted-glass CSS or Tailwind classes.
- [Spring Playground](https://pixelpapa.com/tools/spring-playground.md): Tune spring stiffness, damping and mass, see the response curve, settle time and overshoot, then copy a Motion (Framer Motion) transition or a CSS linear() easing.
- [Theme Builder](https://pixelpapa.com/tools/theme-builder.md): Free shadcn/ui theme generator. Pick a brand colour and radius, preview real components and contrast ratios, and copy OKLCH CSS variables for light and dark mode.

## Optional

- [Registry index (JSON)](https://pixelpapa.com/r/registry.json): machine-readable list of every component
- [Sitemap](https://pixelpapa.com/sitemap.xml)