# Framekit UI

> Framekit UI is a free, open-source (MIT) library of 332 animated React components built with React 19, TypeScript, Tailwind CSS v4 and Motion (motion/react). Every component is one self-contained file you own, ships light and dark styles, supports the keyboard and prefers-reduced-motion, and installs with the shadcn CLI.

- Docs: https://framekit-ui.vercel.app/
- Source: https://github.com/Sid9022/framekit-ui
- shadcn registry index: https://framekit-ui.vercel.app/r/registry.json

## Install

Requires a React project on Tailwind CSS v4 with a shadcn `components.json` and an `@/*` path alias (run `npx shadcn@latest init` once if needed).

```bash
npx shadcn@latest add https://framekit-ui.vercel.app/r/<slug>.json
```

Example: `npx shadcn@latest add https://framekit-ui.vercel.app/r/glass-app-dock.json`. The CLI writes `components/ui/<slug>.tsx`, adds shared helpers (`lib/cn.ts`, `lib/use-reduced-motion.ts`…) and installs npm dependencies such as `motion` and `lucide-react`. Optionally register the namespace in `components.json` (`"registries": { "@framekit": "https://framekit-ui.vercel.app/r/{name}.json" }`) and run `npx shadcn@latest add @framekit/<slug>`. Import with `import { PascalCaseName } from '@/components/ui/<slug>'`. In the Next.js App Router, add `"use client"` to the component file (they use hooks).

## Docs

- [Introduction](https://framekit-ui.vercel.app/docs/introduction): What Framekit UI is and how to use it.
- [Installation](https://framekit-ui.vercel.app/docs/installation): Install components with the shadcn CLI registry — or copy-paste them by hand.
- [Theming](https://framekit-ui.vercel.app/docs/theming): Colors, dark mode, and Tailwind tokens.

## Hero

[All Hero components](https://framekit-ui.vercel.app/docs/category/hero): Landing-page hero sections with motion-rich headlines, scenes and CTAs.

- [Split-Flap Hero](https://framekit-ui.vercel.app/docs/split-flap-hero): A landing hero whose key phrase lives on a mechanical departure board — every character clacks through the alphabet on hinged 3D leaves before landing, with…
- [Ridgeline Horizon Hero](https://framekit-ui.vercel.app/docs/ridgeline-horizon-hero): Headline words rise out of masks above a canvas terrain of stacked ridgelines receding to a sunrise; the pointer raises a swell that rolls back to the horizon…
- [Kinetic Name Hero](https://framekit-ui.vercel.app/docs/kinetic-name-hero): Your name set huge, every letter on its own spring — letters are pushed away, tilt and swell as the cursor passes, then ease home; a soft light trails the…
- [Spotlight Reveal Hero](https://framekit-ui.vercel.app/docs/spotlight-reveal-hero): A quiet paper-and-ink hero with a cursor-lit lens that reveals a saturated, grid-drawn “lit” version of the same message; the beam wanders on its own when…
- [Depth Parallax Hero](https://framekit-ui.vercel.app/docs/depth-parallax-hero): A layered SVG landscape — sun/moon, three mountain planes and a tree line — shifting at depth-correct factors with the pointer or a slow idle sway; the giant…
- [Role Morph Hero](https://framekit-ui.vercel.app/docs/role-morph-hero): “a ____.” where the blank cycles through your roles: letters of the old role drop away with a blur, the next role springs up in a stagger, the highlighter…
- [Photo Strip Hero](https://framekit-ui.vercel.app/docs/photo-strip-hero): A big headline over two tilted rails of photo cards drifting in opposite directions — they slow under the pointer, surge with scroll velocity and lift on hover.
- [Terminal Dev Hero](https://framekit-ui.vercel.app/docs/terminal-dev-hero): A developer intro with a live terminal: commands type with human rhythm, outputs stream in, a build bar fills and the window floats in 3D with the pointer.
- [Route Chooser Hero](https://framekit-ui.vercel.app/docs/route-chooser-hero): A fork in the road under a sky that follows your attention: hover or focus the left card and the sun climbs, the right one and the moon rises while a lantern…

## Portfolio

[All Portfolio components](https://framekit-ui.vercel.app/docs/category/portfolio): Portfolio sections, project cards and personal-site pieces with premium motion.

- [Dealer Deck Testimonials](https://framekit-ui.vercel.app/docs/dealer-deck-testimonials): Testimonials dealt like playing cards: the top card of a face-down deck slides across the table on a spring, flips face-up mid-flight and lands slightly askew…
- [Particle Mesh Gallery](https://framekit-ui.vercel.app/docs/particle-mesh-gallery): An image-colored particle sphere unfolds into a portrait on tap and gathers back on double tap, with original landscape art and a quiet project index.
- [Project Reveal List](https://framekit-ui.vercel.app/docs/project-reveal-list): An editorial project index: rows dim their siblings and nudge on hover while a tilting preview chases the cursor on a spring and unmasks with a clip-path.
- [Project Filter Gallery](https://framekit-ui.vercel.app/docs/project-filter-gallery): Category chips share a sliding pill (layout animation) while the grid reflows: survivors glide to new cells, newcomers bloom in blur-to-sharp.
- [Case Study Scroll](https://framekit-ui.vercel.app/docs/case-study-scroll): Problem → Process → Result as a scroll-driven story: a sticky rail fills as you read and lights the current chapter while chapters rise in with staggered key…
- [Before / After Slider](https://framekit-ui.vercel.app/docs/before-after-slider): Drag, tap or use the arrow keys to wipe between two states.
- [Career Timeline](https://framekit-ui.vercel.app/docs/career-timeline): A vertical line that draws itself as you scroll with a glowing head; milestone nodes pop on springs and cards slide in from alternating sides.
- [Skills Marquee](https://framekit-ui.vercel.app/docs/skills-marquee): Two counter-rotating rails of skill pills.
- [Skill Meters](https://framekit-ui.vercel.app/docs/skill-meters): Radial gauges that sweep to their value on scroll-in: glowing gradient arc, a comet dot on the tip and a live count-up.
- [Impact Stats](https://framekit-ui.vercel.app/docs/impact-stats): Odometer counters: every digit is a reel spinning to its value on its own spring when the row scrolls in — right-most digits settle last, like a mechanical…
- [Testimonial Carousel](https://framekit-ui.vercel.app/docs/testimonial-carousel): Large display-type quotes sliding on direction-aware springs with swipe/drag, arrow keys and a progress-filled dot for auto-advance.
- [Client Logo Strip](https://framekit-ui.vercel.app/docs/client-logo-strip): A calm trust row of generated marks with a cursor-following spotlight that lights hairline borders; marks lift and spin a few degrees on hover/focus.
- [Contact Form Card](https://framekit-ui.vercel.app/docs/contact-form-card): Validated on blur and submit with announced inline errors (shake + focus jump), optional async onSubmit with a sending morph, a drawn-check success scene with…
- [Social Dock](https://framekit-ui.vercel.app/docs/social-dock): A floating link dock whose icons swell with a spring as the pointer (or keyboard focus) nears them, with a coloured halo and a springy label chip.
- [Copy Email Button](https://framekit-ui.vercel.app/docs/copy-email-button): A pill showing your address: the glyph morphs to a check, the label rolls to “Copied”, a ring pulses out and a live region confirms.
- [Availability Badge](https://framekit-ui.vercel.app/docs/availability-badge): A status pill with a motion language per state: “open” sends two staggered radar ripples, “limited” breathes slowly, “booked” holds still.
- [Portfolio Footer](https://framekit-ui.vercel.app/docs/portfolio-footer): A closing statement in giant display type — letters rise out of masks on scroll-in and a light follows the cursor across the glyphs — with a slow ribbon…
- [Section Spy Nav](https://framekit-ui.vercel.app/docs/section-spy-nav): Sticky in-page navigation that follows your reading position: a shared pill springs between links as sections cross the reading line, a hairline fills with…
- [Project Lightbox](https://framekit-ui.vercel.app/docs/project-lightbox): Thumbnails open into a detail modal through a shared-element morph — artwork flies from its tile to the hero slot while copy staggers in.
- [Intro Preloader](https://framekit-ui.vercel.app/docs/intro-preloader): Greeting words flick by while a big counter climbs 0→100, then the ink curtain lifts with a trailing curve that flattens as it leaves and the page settles…
- [Reading Progress + TOC](https://framekit-ui.vercel.app/docs/reading-progress-toc): A spring-smoothed reading bar and a sticky table of contents that lights the section on screen, with a live “min left” estimate — made for long-form blog posts.
- [Résumé Download Button](https://framekit-ui.vercel.app/docs/resume-download-button): The document glyph prints itself line by line, then drops into a tray as the file downloads and the label settles on “Saved”.
- [Services Cards](https://framekit-ui.vercel.app/docs/services-cards): Four offers in one row: hover or focus a card and it swells while the others yield; a cursor-lit border follows the pointer, the icon tile tilts and…
- [Scroll Reveal](https://framekit-ui.vercel.app/docs/scroll-reveal): A wrapper that animates its content in on scroll: seven effects (rise, fade, blur, scale, clip, slide-left/right), optional child staggering, any scroll…
- [Studio Folio Template](https://framekit-ui.vercel.app/docs/portfolio-studio-template): A complete one-page designer portfolio composed from Framekit parts — intro preloader, kinetic name hero, spy-nav, impact stats, filterable work with…
- [Dev Folio Template](https://framekit-ui.vercel.app/docs/portfolio-developer-template): A developer-flavoured one-pager composed from Framekit parts — terminal hero, skills marquee, hover-preview project index, scroll-drawn career timeline, skill…
- [Year Activity Grid](https://framekit-ui.vercel.app/docs/year-activity-grid): A contribution calendar that blooms in on a diagonal wave, lights a crosshair of the hovered weekday and week, floats a readout above the day and reports…
- [Bento Profile Board](https://framekit-ui.vercel.app/docs/bento-profile-board): Your profile as a living dashboard: identity with a pulsing build status, an analogue clock that follows your time zone, weather glyph, now-playing equaliser…
- [Scatter Desk Collage](https://framekit-ui.vercel.app/docs/scatter-desk-collage): A desk of rotated polaroids, sticky notes, UI clips, quote cards and a sticker that you can really move — the picked card straightens and lifts, arrow keys…
- [Kudos Wall](https://framekit-ui.vercel.app/docs/kudos-wall): Praise cards drift past in three columns at different speeds and directions behind a soft fade mask, with underlined key phrases and a cheer toggle on every…
- [Pinned Project Reel](https://framekit-ui.vercel.app/docs/pinned-project-reel): The section pins to the viewport and your vertical scroll slides a film strip of project cards sideways, with a springy counter and progress line.
- [Big-Type Footer](https://framekit-ui.vercel.app/docs/big-type-footer): A closing section built around one enormous word whose letters swell and lean toward the cursor, with a ticker, quiet link pills, a live local clock and…
- [Mini Desktop OS](https://framekit-ui.vercel.app/docs/mini-desktop-os): A tiny windowed desktop for a portfolio: generated wallpaper, menu bar with a live clock, icon grid, draggable windows with close / minimise / maximise, and a…
- [Discovery Scene](https://framekit-ui.vercel.app/docs/discovery-scene): An illustrated desk (night in dark mode, daylight in light) with six hidden sparkles.
- [Image Lens](https://framekit-ui.vercel.app/docs/image-lens): A glass loupe that follows the pointer and magnifies the image beneath it: the rim refracts and fringes like real glass, the rest of the frame softly…

## Animated Backgrounds

[All Animated Backgrounds components](https://framekit-ui.vercel.app/docs/category/animated-backgrounds): Canvas, SVG and CSS backdrops that react to the pointer, in light and dark.

- [Iron Filings Field](https://framekit-ui.vercel.app/docs/iron-filings-field): Thousands of steel needles on paper swing with a little inertia to align with the magnetic field of a few poles; the pointer carries a north pole and clicks…
- [Glow Arc Hero](https://framekit-ui.vercel.app/docs/glow-arc-hero): A rainbow of glossy tiles fans in around a centred headline; each tile breathes its own coloured halo while the arc sways and tilts toward the pointer.
- [Prism Tidal Field](https://framekit-ui.vercel.app/docs/prism-tidal-field): Soft lilac tidal bands that bend toward pointer velocity.
- [Constellation Breathing Grid](https://framekit-ui.vercel.app/docs/constellation-breathing-grid): Sparse nodes breathe and link when close.
- [Paperfold Gradient Plane](https://framekit-ui.vercel.app/docs/paperfold-gradient-plane): Folded translucent ribbons shift with the pointer.
- [Aurora Background](https://framekit-ui.vercel.app/docs/aurora-background): Drifting mesh aurora backdrop.
- [Ink Ripple Grid](https://framekit-ui.vercel.app/docs/ink-ripple-grid): Click blooms ink ripples on a grid.
- [Silk Shear Field](https://framekit-ui.vercel.app/docs/silk-shear-field): Shearing silk ribbons that bend toward the pointer.
- [Void Lattice Drift](https://framekit-ui.vercel.app/docs/void-lattice-drift): Faint perspective lattice drifting in a void.
- [Ember Drift](https://framekit-ui.vercel.app/docs/ember-drift): Warm particles rising with soft bloom.
- [Chromatic Mist](https://framekit-ui.vercel.app/docs/chromatic-mist): Dual-tone mist with chromatic split on motion.
- [Pulse Rings](https://framekit-ui.vercel.app/docs/pulse-rings): Concentric soft rings expand from pointer/click.
- [Grain Gradient Field](https://framekit-ui.vercel.app/docs/grain-gradient-field): A full-bleed background of four slowly drifting colour blobs under real SVG film grain, with a pointer-following glow.
- [Horizon Grid Field](https://framekit-ui.vercel.app/docs/horizon-grid-field): A quiet perspective floor gliding toward you under a softly lit horizon.
- [Flicker Dot Field](https://framekit-ui.vercel.app/docs/flicker-dot-field): A calm LED-like matrix: each mark drifts between brightness levels on its own clock so the field shimmers without syncing, and marks near the pointer glow.

## Buttons

[All Buttons components](https://framekit-ui.vercel.app/docs/category/buttons): Buttons with springs, morphs, particles and stateful feedback.

- [Wax Seal Button](https://framekit-ui.vercel.app/docs/wax-seal-button): A paper-and-ink send button: press it and a drop of wax falls into the slot and spreads into an uneven puddle, a brass stamp thumps down and lifts away…
- [Googly Gaze Button](https://framekit-ui.vercel.app/docs/googly-gaze-button): Eyes track the cursor and smirk on click.
- [Slide Confirm Button](https://framekit-ui.vercel.app/docs/slide-confirm-button): Drag the knob (or press Enter) to confirm.
- [Shimmer Chrome Button](https://framekit-ui.vercel.app/docs/shimmer-chrome-button): Quiet chrome pill with a traveling shimmer.
- [Orbit Commit](https://framekit-ui.vercel.app/docs/orbit-commit): Hold to confirm while an icon orbits the rim.
- [Inkline Action](https://framekit-ui.vercel.app/docs/inkline-action): Text action with a seeded ink underline.
- [Focus Bloom Button](https://framekit-ui.vercel.app/docs/focus-bloom-button): Focus/hover bloom steered by pointer.
- [Magnetic Button](https://framekit-ui.vercel.app/docs/magnetic-button): Button that magnetically follows the cursor; the label leans a little further for parallax, with a spring press state.
- [Spark Button](https://framekit-ui.vercel.app/docs/spark-button): Click bursts into particle sparks.
- [Liquid Fill Button](https://framekit-ui.vercel.app/docs/liquid-fill-button): Liquid rises to fill on hover or press.
- [Split Reveal Button](https://framekit-ui.vercel.app/docs/split-reveal-button): Face splits open to reveal the label.
- [Gravity Drop Button](https://framekit-ui.vercel.app/docs/gravity-drop-button): Icon falls in with a bounce on hover.
- [Neon Stroke Button](https://framekit-ui.vercel.app/docs/neon-stroke-button): SVG stroke draws around on hover.
- [Loop Flight Send Button](https://framekit-ui.vercel.app/docs/loop-flight-send-button): The pill folds into a circle, the paper plane launches right and writes a looping cursive trail around the button — holding in orbit while the request is…
- [Dispatch Truck Button](https://framekit-ui.vercel.app/docs/dispatch-truck-button): Order pill stretches into a road; a parcel thumps onto a courier flatbed that drives off before a green confirmation pops in.
- [Drop-In Cart Button](https://framekit-ui.vercel.app/docs/drop-in-cart-button): Pill tucks into a cart, a box springs into the basket, the cart rolls away and back while the badge and counter pop.
- [Fill Progress Download Button](https://framekit-ui.vercel.app/docs/fill-progress-download-button): Arrow sinks away, a deeper blue floods the pill with a live percentage, then it condenses into a calm done chip.
- [Swallow Delete Button](https://framekit-ui.vercel.app/docs/swallow-delete-button): Bin lid swings open on its hinge, the label’s letters arc inside, the lid snaps shut and a ring traces the receipt.
- [Face Scan Pay Button](https://framekit-ui.vercel.app/docs/face-scan-pay-button): Navy pay pill folds into a lit square, a biometric reticle sweeps a face glyph while a comet laps the rim, then it unfolds with a check.
- [Orbit Dot Export Button](https://framekit-ui.vercel.app/docs/orbit-dot-export-button): Pill tucks down to its ring, a shaped comet orbits with a trailing progress arc, the ring floods solid, the arrow bends into a check and the pill reopens as…
- [Shredder Delete Button](https://framekit-ui.vercel.app/docs/shredder-delete-button): Pill holds still while its icon works: the lid flips, a sheet feeds in, paper ribbons tumble out below and a tally counts each shred.
- [Cloud Launch Publish Button](https://framekit-ui.vercel.app/docs/cloud-launch-publish-button): The arrow launches out of the cloud on a puff of vapour, a progress seam draws along the bottom edge, and a check drops back into the cloud.
- [Radial Share Menu](https://framekit-ui.vercel.app/docs/radial-share-menu): Share pill folds into a close button while channel bubbles spring out on an arc; the pick glides to centre, becomes a check and really copies the link.
- [Confetti Burst Button](https://framekit-ui.vercel.app/docs/confetti-burst-button): A celebratory primary action: the label rolls to a check while a cone of paper confetti (or your own glyphs) bursts from the button with real drag, gravity…

## Toggles

[All Toggles components](https://framekit-ui.vercel.app/docs/category/toggles): Accessible switches and toggles with playful, spring-driven motion.

- [Pull-Cord Lamp Toggle](https://framekit-ui.vercel.app/docs/pull-cord-lamp-toggle): A pendant lamp switched by its pull cord: drag the bead down until it clicks, the cord snaps back elastically and sways, the shade rocks on its wire and the…
- [Watchful Eye Toggle](https://framekit-ui.vercel.app/docs/watchful-eye-toggle): A soft eye opens and closes; the pupil tracks when open.
- [Day Night Capsule](https://framekit-ui.vercel.app/docs/day-night-capsule): Illustrated mini sky that morphs day↔night.
- [Glass Orb Switch](https://framekit-ui.vercel.app/docs/glass-orb-switch): Translucent glass sphere slides on a dark track.
- [Cosmic Sparkle Toggle](https://framekit-ui.vercel.app/docs/cosmic-sparkle-toggle): OFF/ON pill with a glowing star badge and halo.
- [Blinker Switch](https://framekit-ui.vercel.app/docs/blinker-switch): Classic switch whose knob blinks like an eyelid.
- [Mood Dial Toggle](https://framekit-ui.vercel.app/docs/mood-dial-toggle): Tiny face dial springs between two moods.
- [Ink Bloom Toggle](https://framekit-ui.vercel.app/docs/ink-bloom-toggle): Track fills with a blooming ink blot when on.
- [Pulsebeat Switch](https://framekit-ui.vercel.app/docs/pulsebeat-switch): Soft heartbeat pulse when on; flat when off.
- [Frameflip Toggle](https://framekit-ui.vercel.app/docs/frameflip-toggle): Tiny illustrated card flips between two states.
- [Moth Lantern Toggle](https://framekit-ui.vercel.app/docs/moth-lantern-toggle): A moth settles into lantern glow when on.
- [Petal Circuit Toggle](https://framekit-ui.vercel.app/docs/petal-circuit-toggle): Petals fold inward to complete a circuit.
- [Tideglass Toggle](https://framekit-ui.vercel.app/docs/tideglass-toggle): Waterline rises and falls in a glass pane.
- [Weather Vane Toggle](https://framekit-ui.vercel.app/docs/weather-vane-toggle): Vane pivots; grain shifts with wind.
- [Theme Reveal Toggle](https://framekit-ui.vercel.app/docs/theme-reveal-toggle): A sky-to-night switch: the sun rolls behind a crescent, clouds give way to stars, and the theme change blooms out of the switch as a circular View Transition…

## Text Animations

[All Text Animations components](https://framekit-ui.vercel.app/docs/category/text-animations): Headline and text effects: reveals, scrambles, rotations and cascades.

- [Ink Bleed Text](https://framekit-ui.vercel.app/docs/ink-bleed-text): A serif headline that soaks into the page: each word lands as a wet blot of ink that spreads through the paper fibres (an SVG turbulence displacement relaxing…
- [Tumble Letters](https://framekit-ui.vercel.app/docs/tumble-letters): A headline of physical letters: drop them and they fall, spin, bounce and pile against each other on the floor; hover lifts letters in a wave, any letter can…
- [Glyph Weather](https://framekit-ui.vercel.app/docs/glyph-weather): Glyphs drift with scroll direction.
- [Wordloom](https://framekit-ui.vercel.app/docs/wordloom): Words weave out as threads and resolve the next.
- [Momentum Caption](https://framekit-ui.vercel.app/docs/momentum-caption): Caption briefly follows pointer velocity.
- [Scramble Text](https://framekit-ui.vercel.app/docs/scramble-text): Characters decode from noise into place.
- [Morphing Text](https://framekit-ui.vercel.app/docs/morphing-text): Overlapping blur-morph between phrases, aligned for inline sentences; pauses on hover.
- [Typewriter](https://framekit-ui.vercel.app/docs/typewriter): Types and deletes through phrases.
- [Number Ticker](https://framekit-ui.vercel.app/docs/number-ticker): Counts to a value when scrolled into view with locale-aware grouping and tabular figures; re-animates from the current value when it changes.
- [Infinite Marquee](https://framekit-ui.vercel.app/docs/infinite-marquee): Seamless looping strip with masked edge fades; pauses on hover, focus or with an optional pause button.
- [Scroll Text Fill](https://framekit-ui.vercel.app/docs/scroll-text-fill): A large editorial statement whose words light up one by one as you scroll, each rising a few pixels into place; accent words get a sweeping underline.
- [Charm Text](https://framekit-ui.vercel.app/docs/charm-text): A sentence with a few enchanted words.
- [Word Cycle Text](https://framekit-ui.vercel.app/docs/word-cycle-text): A headline whose key word keeps changing its mind: each word rises letter by letter out of a soft blur inside a tinted capsule that resizes on a spring while…
- [Highlight Marker Text](https://framekit-ui.vercel.app/docs/highlight-marker-text): Editorial copy annotated by hand: as it scrolls into view a marker sweeps behind one phrase, an underline draws under the next, a pen circle loops another and…
- [Sparkle Text](https://framekit-ui.vercel.app/docs/sparkle-text): A word that catches the light: four-point stars bloom and fade around it on staggered clocks while the letters carry a soft ink-to-accent gradient.

## Shimmer

[All Shimmer components](https://framekit-ui.vercel.app/docs/category/shimmer): Shimmer and sheen effects for text, borders and surfaces.

- [Prism Sweep Shimmer](https://framekit-ui.vercel.app/docs/prism-sweep-shimmer): Diagonal prismatic light band; intensity follows pointer X.
- [Mercury Vein Shimmer](https://framekit-ui.vercel.app/docs/mercury-vein-shimmer): Liquid-metal highlight veins crawl a rounded surface.
- [Glyph Aurora Shimmer](https://framekit-ui.vercel.app/docs/glyph-aurora-shimmer): Aurora shimmer travels letter-by-letter on text.
- [Edge Flare Shimmer](https://framekit-ui.vercel.app/docs/edge-flare-shimmer): Soft flare travels the border edge (not a full beam).
- [Skeleton Wave Shimmer](https://framekit-ui.vercel.app/docs/skeleton-wave-shimmer): Premium content-block skeleton with a diagonal liquid wave — avatar, lines, media.
- [Card Sheen Loader](https://framekit-ui.vercel.app/docs/card-sheen-loader): Product-card placeholder with traveling chrome sheen and soft breathing.
- [List Bloom Shimmer](https://framekit-ui.vercel.app/docs/list-bloom-shimmer): Stacked list rows bloom in with staggered shimmer and soft shadows.

## Loading

[All Loading components](https://framekit-ui.vercel.app/docs/category/loading): Loaders and spinners that make waiting feel considered.

- [Cook Loading](https://framekit-ui.vercel.app/docs/cook-loading): An illustrated chef stirs a sizzling wok while your app loads — eight original cooking poses, drifting steam, real progress and ready/error states in one…
- [Hourglass Loader](https://framekit-ui.vercel.app/docs/hourglass-loader): A brass-and-glass hourglass: sand drains from the upper bulb through a trickling stream into a growing mound, and in endless mode the glass turns itself over…
- [Orbital Bead Loader](https://framekit-ui.vercel.app/docs/orbital-bead-loader): Beads orbit a core; hover speeds up.
- [Ink Drip Loader](https://framekit-ui.vercel.app/docs/ink-drip-loader): Ink drops merge into a looping puddle.
- [Morph Glyph Loader](https://framekit-ui.vercel.app/docs/morph-glyph-loader): Glyph morphs through abstract SVG shapes.
- [Liquid Charge Capsule](https://framekit-ui.vercel.app/docs/liquid-charge-capsule): A glass capsule with a two-layer sloshing liquid that rises to the charge level.
- [Ghost Gobbler Skull](https://framekit-ui.vercel.app/docs/ghost-gobbler-skull): A glossy vinyl-toy skull that tracks little black-smoke ghosts drifting in from every direction, drops its jaw, slurps each one in like spaghetti and CHOMPS…
- [Particle Morph Loader](https://framekit-ui.vercel.app/docs/particle-morph-loader): A depth-lit swarm of motes spins in 3D and melts between sphere, ribbon, shell, tetra, ring and helix while a status word rolls underneath.
- [Lattice Pulse Loader](https://framekit-ui.vercel.app/docs/lattice-pulse-loader): 3×3 nodes pulse in a traveling wave.
- [Snake Loader](https://framekit-ui.vercel.app/docs/snake-loader): A progress loader whose visual is a tiny snake board.
- [Login Gate Intro](https://framekit-ui.vercel.app/docs/login-gate-intro): A lock-screen preloader: oversized clock, generated avatar card, a password field that types itself, a three-step sign-in sequence, then the site fades up.

## 404 Animation

[All 404 Animation components](https://framekit-ui.vercel.app/docs/category/404-animation): Full-scene not-found pages with character and motion.

- [Constellation Lost 404](https://framekit-ui.vercel.app/docs/constellation-lost-404): Tiny 3D astronaut among reconnecting star “404” with pointer parallax.
- [Paper Tear 404](https://framekit-ui.vercel.app/docs/paper-tear-404): 3D folded paper character peeking through a torn hole; perspective scraps.
- [Glitch Portal 404](https://framekit-ui.vercel.app/docs/glitch-portal-404): Faceted buddy stuck in a chromatic portal — RGB split, scanlines, rim glow.
- [Paper Orbit 404](https://framekit-ui.vercel.app/docs/paper-orbit-404): Layered paper-cut space scene with orbital rings, cratered moons, astronaut, and terracotta home CTA.
- [Mars Tether 404](https://framekit-ui.vercel.app/docs/mars-tether-404): Mars-textured sphere as the 0, orange astronaut perched on top, tethered rocket with waving path.
- [Mesh Orb 404](https://framekit-ui.vercel.app/docs/mesh-orb-404): Glowing mesh-grid sphere with bloom, pulse synced to fake audio, equatorial waveform ring.
- [Lens Reveal 404](https://framekit-ui.vercel.app/docs/lens-reveal-404): A caretaker sweeps beneath a giant amber 404 while a brass loupe follows the pointer and magnifies a hidden message layer.

## Toast

[All Toast components](https://framekit-ui.vercel.app/docs/category/toast): Toasts that stack, swipe and spring.

- [Receipt Print Toast](https://framekit-ui.vercel.app/docs/receipt-print-toast): Order confirmations that print: a thermal printer slot blinks, then a strip of receipt paper feeds out line by line in little stepped jolts with a torn…
- [Gravity Stack Toast](https://framekit-ui.vercel.app/docs/gravity-stack-toast): Gravity-bounce stack with provider/hook.
- [Ribbon Unfurl Toast](https://framekit-ui.vercel.app/docs/ribbon-unfurl-toast): Ribbon unfurl enter animation.
- [Sonar Ping Toast](https://framekit-ui.vercel.app/docs/sonar-ping-toast): Expanding sonar rings on appear.

## Vertical Scroll

[All Vertical Scroll components](https://framekit-ui.vercel.app/docs/category/vertical-scroll): Reels and scroll-driven vertical layouts.

- [Parallax Reel Scroll](https://framekit-ui.vercel.app/docs/parallax-reel-scroll): Multi-layer stars/grid + mid art + foreground cards with scrub progress.
- [Snap Magnet Scroll](https://framekit-ui.vercel.app/docs/snap-magnet-scroll): Cinematic full-bleed sections with magnetic overshoot settle and glowing rail.
- [Velocity Fade Stack](https://framekit-ui.vercel.app/docs/velocity-fade-stack): Rich cards scale/blur/opacity from distance + inertia velocity; center focus.
- [Velocity Marquee](https://framekit-ui.vercel.app/docs/velocity-marquee): Oversized editorial rails that idle along, then answer your scroll: scroll faster and the rows speed up and lean into the motion; scroll back and they reverse.

## Cards

[All Cards components](https://framekit-ui.vercel.app/docs/category/cards): Cards with tilt, glow, glass and spring interactions.

- [Editorial Spread Card](https://framekit-ui.vercel.app/docs/editorial-spread-card): A magazine cover on real CSS 3D: hover and it lifts off its spine, click and it swings open on a hinge while the issue slides to centre, revealing a two-page…
- [Swipe Carousel Post](https://framekit-ui.vercel.app/docs/swipe-carousel-post): An Instagram-style multi-slide post card: drag or swipe the media and the track snaps on a spring, a segmented bar fills with slide progress, the dot pager…
- [Folder Fan Showcase](https://framekit-ui.vercel.app/docs/folder-fan-showcase): Social post cards wait inside a frosted-glass folder, peeking over the rim of a blurred front pocket.
- [Origami Unfold Card](https://framekit-ui.vercel.app/docs/origami-unfold-card): A trail ticket that unfolds like a paper map: press the cover and two creased panels swing down in sequence on real CSS-3D hinges, catching light as they…
- [Lenticular Shift Card](https://framekit-ui.vercel.app/docs/lenticular-shift-card): A postcard printed on a ridged lenticular sheet: tilting interlaces the scenes in fine vertical blinds that sweep across the print while a specular band rides…
- [Curved Tile Wall](https://framekit-ui.vercel.app/docs/curved-tile-wall): A gallery bent onto a sphere section in real CSS 3D: mixed-height frames drift, swing with drag, pop toward you on hover and open in a focused lightbox.
- [Fan Deck Carousel](https://framekit-ui.vercel.app/docs/fan-deck-carousel): Poster cards fanned around an upright hero card; swipe, arrow keys or buttons re-fan the hand on springs while a blurred copy of the active art crossfades…
- [Tide Deck](https://framekit-ui.vercel.app/docs/tide-deck): Drag a deck whose depth reacts to velocity.
- [Windowpane Story Card](https://framekit-ui.vercel.app/docs/windowpane-story-card): Frosted pane slides to reveal evidence.
- [Topographic Stack](https://framekit-ui.vercel.app/docs/topographic-stack): Contour-offset layers separate on hover.
- [Spotlight Card](https://framekit-ui.vercel.app/docs/spotlight-card): Radial glow and a lit hairline edge that track your pointer (CSS variables, no re-renders); keyboard focus inside lights it too.
- [Tilt Card](https://framekit-ui.vercel.app/docs/tilt-card): Spring-damped 3D tilt with real perspective, a soft specular glare and a gentle lift.
- [Glass Card](https://framekit-ui.vercel.app/docs/glass-card): Liquid-glass surface with specular rim, inner hairline and layered depth; regular (frosted) or clear variants, and a solid fallback for…
- [Swipe Cards](https://framekit-ui.vercel.app/docs/swipe-cards): Stacked deck: drag, flick, tap or arrow-key cards away with keep/pass stamps; the deck springs forward and every swipe is announced.
- [Border Beam](https://framekit-ui.vercel.app/docs/border-beam): A comet of light travels a crisp masked hairline border, with an optional soft bloom.
- [Pixel Reveal](https://framekit-ui.vercel.app/docs/pixel-reveal): Image or generated art dissolves in through a shrinking pixel grid when scrolled into view — random, diagonal or centre-out — with an optional replay.
- [Hologram Flip Card](https://framekit-ui.vercel.app/docs/hologram-flip-card): Flip to holographic rear with iridescent sheen.
- [Liquid Morph Card](https://framekit-ui.vercel.app/docs/liquid-morph-card): Border/blob morphs toward pointer.
- [Gravity Expand Card](https://framekit-ui.vercel.app/docs/gravity-expand-card): Click expands with spring; collapse on second click/outside.
- [Flip Checkout Card](https://framekit-ui.vercel.app/docs/flip-checkout-card): Frosted payment card mirrors every keystroke, flips for the security code, and the checkout condenses into a receipt once paid.
- [Book Spine Shelf](https://framekit-ui.vercel.app/docs/book-spine-shelf): A shelf of generated book spines: the hovered book slides out while neighbours lean away, and choosing one swings its cover open on a hinge into a reading…
- [Mesh Project Cards](https://framekit-ui.vercel.app/docs/mesh-project-cards): Project cards headed by a living mesh gradient — drifting blurred blobs with film grain — and a status pill that pulses for live and in-progress work.
- [Sticky Card Stack](https://framekit-ui.vercel.app/docs/sticky-card-stack): Project cards that pin one over the next like a deck being dealt — each card shrinks back and dims as the following one slides up over it, still peeking out…
- [Feature Bento Grid](https://framekit-ui.vercel.app/docs/feature-bento-grid): An asymmetric grid of feature tiles with generated art.
- [Device Frame](https://framekit-ui.vercel.app/docs/device-frame): Generic, logo-free device chrome for product shots: a browser with a frosted toolbar and centred address field, or a phone with a machined two-tone rim…
- [Neon Halo Card](https://framekit-ui.vercel.app/docs/neon-halo-card): A card rimmed by a slow sweep of coloured light: a conic gradient travels a hairline edge while a soft bloom breathes behind it, and the pointer pulls a quiet…
- [Video Lightbox Dialog](https://framekit-ui.vercel.app/docs/video-lightbox-dialog): A cinematic thumbnail with a clear-glass play button that grows into a focused player on a shared-layout spring while the page blurs back.

## Navigation

[All Navigation components](https://framekit-ui.vercel.app/docs/category/navigation): Navbars, tabs, docks and menus with fluid motion.

- [Plucked String Tabs](https://framekit-ui.vercel.app/docs/plucked-string-tabs): Tabs hang from a taut string.
- [Compass Rail](https://framekit-ui.vercel.app/docs/compass-rail): Vertical rail with a shortest-path compass marker.
- [Halo Menu](https://framekit-ui.vercel.app/docs/halo-menu): Center action opens a 6-item halo.
- [Magnify Dock](https://framekit-ui.vercel.app/docs/magnify-dock): Dock with proximity scaling.
- [Orbiting Icons](https://framekit-ui.vercel.app/docs/orbiting-icons): Icons circle a central hub.
- [Curtain Drop Nav](https://framekit-ui.vercel.app/docs/curtain-drop-nav): Top bar with curtain-reveal dropdown panels.
- [Morph Pill Header](https://framekit-ui.vercel.app/docs/morph-pill-header): Full header collapses to a floating pill on scroll.
- [Radial Toolburst](https://framekit-ui.vercel.app/docs/radial-toolburst): Center control bursts into orbiting tool nodes.
- [Magnetic Dock Nav](https://framekit-ui.vercel.app/docs/magnetic-dock-nav): Dock with magnetic magnification on hover.
- [Command Menu](https://framekit-ui.vercel.app/docs/command-menu): A Ctrl/⌘ K palette for hopping around a portfolio: fuzzy search that underlines the letters it matched, grouped results, a highlight pill that springs between…
- [Island Section Nav](https://framekit-ui.vercel.app/docs/island-section-nav): A floating pill that tells you where you are — current section with a scroll-progress ring — then swells into a full jump bar on hover, focus or tap with a…
- [File Tree Explorer](https://framekit-ui.vercel.app/docs/file-tree-explorer): An editor-grade file tree: folders open on a soft height spring, hairline guides show depth, and one highlight glides between selected rows.

## Sidebars

[All Sidebars components](https://framekit-ui.vercel.app/docs/category/sidebars): Collapsible app sidebars and navigation rails.

- [Rail Bloom Sidebar](https://framekit-ui.vercel.app/docs/rail-bloom-sidebar): Collapsible icon rail that blooms labels and soft glow; liquid active indicator.
- [Section Accordion Sidebar](https://framekit-ui.vercel.app/docs/section-accordion-sidebar): Nested sections accordion-open with spring height; sticky workspace header + search.
- [Context Drawer Sidebar](https://framekit-ui.vercel.app/docs/context-drawer-sidebar): Slim rail ↔ wide frosted context drawer with animated width and pin toggle.
- [Command Tree Sidebar](https://framekit-ui.vercel.app/docs/command-tree-sidebar): Hierarchical tree with ↑↓/Enter, typeahead highlight, morphing path breadcrumb.
- [Glass Workspace Sidebar](https://framekit-ui.vercel.app/docs/glass-workspace-sidebar): Frosted glass pro sidebar with workspace switcher, collapsible groups, notification pip, user footer.
- [Timeline Rail Sidebar](https://framekit-ui.vercel.app/docs/timeline-rail-sidebar): Vertical ops/CPaaS timeline rail — events as nodes, active glow, scroll-sync scrubber.
- [Mega Flyout Sidebar](https://framekit-ui.vercel.app/docs/mega-flyout-sidebar): Icon rail that opens rich 2-col flyout panels with curtain/slide motion — enterprise marketing feel.
- [Priority Inbox Sidebar](https://framekit-ui.vercel.app/docs/priority-inbox-sidebar): Messaging ops sidebar: Open/Pending/Snoozed filters, channel tabs, search, unread bloom snippets.
- [Orbit Switcher Sidebar](https://framekit-ui.vercel.app/docs/orbit-switcher-sidebar): Multi-product switcher orb that morphs between Messaging / Voice / SMS with animated icon swap.

## WhatsApp / Messaging

[All WhatsApp / Messaging components](https://framekit-ui.vercel.app/docs/category/whatsapp-messaging): Chat bubbles, typing indicators and messaging interfaces.

- [Thread Bubble Stack](https://framekit-ui.vercel.app/docs/thread-bubble-stack): Inbound/outbound chat bubbles with status ticks, timestamps, soft enter animation.
- [Inbox Pulse List](https://framekit-ui.vercel.app/docs/inbox-pulse-list): Conversation rows with unread bloom badge, preview, channel chip, hover actions.
- [Template Message Card](https://framekit-ui.vercel.app/docs/template-message-card): Approved template preview with header media, body vars, footer, CTAs + shimmer approve.
- [Campaign Composer Strip](https://framekit-ui.vercel.app/docs/campaign-composer-strip): Mini broadcast composer: audience chip, channel toggle, schedule pill, send progress.
- [Typing Wave Indicator](https://framekit-ui.vercel.app/docs/typing-wave-indicator): Multi-dot typing indicator with wave and optional agent handoff label.
- [Opt-In Consent Banner](https://framekit-ui.vercel.app/docs/opt-in-consent-banner): Soft messaging opt-in compliance banner with animated check and decline.
- [Media Carousel Bubble](https://framekit-ui.vercel.app/docs/media-carousel-bubble): Inbound/outbound bubble with image carousel, dots, and caption.
- [Reaction Chip Bar](https://framekit-ui.vercel.app/docs/reaction-chip-bar): Message reaction emoji chips that pop in, with add-reaction affordance.
- [WhatsApp Flow Form](https://framekit-ui.vercel.app/docs/whatsapp-flow-form): Interactive Flow / survey card with rating fields and submit — in-chat business flow.
- [Catalog Product Card](https://framekit-ui.vercel.app/docs/catalog-product-card): Product catalog card with price, image placeholder, and add-to-cart micro interaction.
- [Session Window Timer](https://framekit-ui.vercel.app/docs/session-window-timer): 24h messaging session window countdown ring with urgency color shift.
- [Agent Handoff Card](https://framekit-ui.vercel.app/docs/agent-handoff-card): Bot→human handoff card with agent avatar bloom and Connecting you… state.
- [Broadcast Status Board](https://framekit-ui.vercel.app/docs/broadcast-status-board): Mini campaign status: queued/sent/delivered/read/failed with animated counters.
- [Quick Reply Chip Cloud](https://framekit-ui.vercel.app/docs/quick-reply-chip-cloud): Cloud of quick-reply chips with magnetic hover and select.

## Notifications

[All Notifications components](https://framekit-ui.vercel.app/docs/category/notifications): Notification stacks, badges and live feeds.

- [Notification Orbit Center](https://framekit-ui.vercel.app/docs/notification-orbit-center): Bell opens a panel; items stack with unread glow; mark-all-read clears glow.
- [Priority Banner Alert](https://framekit-ui.vercel.app/docs/priority-banner-alert): Full-width priority banner (info/warn/critical) with slide-in and auto-dismiss.
- [Inbox Row Notifier](https://framekit-ui.vercel.app/docs/inbox-row-notifier): Dense notification feed row with glyph, title, meta, relative time, hover actions.
- [Badge Bloom Counter](https://framekit-ui.vercel.app/docs/badge-bloom-counter): Numeric badge that blooms and scales when the count changes.
- [Push Preview Card](https://framekit-ui.vercel.app/docs/push-preview-card): Mobile-style push notification preview with app icon, title, body, time.
- [Live Feed Stack](https://framekit-ui.vercel.app/docs/live-feed-stack): A notification centre on glass.

## Widgets

[All Widgets components](https://framekit-ui.vercel.app/docs/category/widgets): Small, self-contained interactive widgets.

- [Swing Price Tag](https://framekit-ui.vercel.app/docs/swing-price-tag): A luxury swing tag hanging from a brass rail on a waxed cord.
- [Paper Fold Accordion](https://framekit-ui.vercel.app/docs/paper-fold-accordion): FAQ rows that open like a folded letter: two creased paper leaves swing open in CSS 3D (the top from its hinge, the bottom a beat later from the crease)…
- [Tear-Stub Boarding Pass](https://framekit-ui.vercel.app/docs/tear-stub-boarding-pass): A frosted-glass boarding pass with a perforated stub.
- [Seat Scale Pricing](https://framekit-ui.vercel.app/docs/seat-scale-pricing): One pricing card that morphs through every plan as you drag the team size: avatars pop in seat by seat, the price rolls on odometer reels, the tier badge and…
- [Polar Bloom Chart](https://framekit-ui.vercel.app/docs/polar-bloom-chart): A Nightingale rose that blooms: petals unfurl from the bud one after another, re-grow on springs when you switch datasets, and the hovered or arrow-key…
- [Glow Leaderboard List](https://framekit-ui.vercel.app/docs/glow-leaderboard-list): Glass pill rows that genuinely compete: scores tick up live, rows re-rank with layout springs, amounts roll and the glowing leader highlight glides to the new…
- [Podium Stack Leaderboard](https://framekit-ui.vercel.app/docs/podium-stack-leaderboard): Gold, silver and bronze cards stacked like a hand of trophies; promoting someone lifts their card past its rival, re-stacks the pile and morphs the medal…
- [KPI Spark Widget](https://framekit-ui.vercel.app/docs/kpi-spark-widget): KPI number ticker with mini sparkline that draws on mount and a trend delta pill.
- [Live Meter Dial](https://framekit-ui.vercel.app/docs/live-meter-dial): Animated semicircle gauge for delivery rate / ASR / concurrent calls.
- [Activity Stream Widget](https://framekit-ui.vercel.app/docs/activity-stream-widget): Live-feeling activity feed with staggered row inserts.
- [Status Heatmap Grid](https://framekit-ui.vercel.app/docs/status-heatmap-grid): Compact hour×day heatmap for message volume with hover tooltip.
- [Ring Progress Cluster](https://framekit-ui.vercel.app/docs/ring-progress-cluster): Cluster of animated progress rings for queue depth, SLA, and capacity.
- [Now Playing Widget](https://framekit-ui.vercel.app/docs/now-playing-widget): A vinyl slides out of a generated sleeve and spins as a tonearm settles on it, an EQ breathes beside the title and progress ticks live with a scrubbable seek…
- [World Clock Globe](https://framekit-ui.vercel.app/docs/world-clock-globe): A dotted planet you can spin, lit by the real sun — the night side dims along a live terminator, a 24-hour ring tracks the chosen city and every card ticks…
- [Signal Beam Diagram](https://framekit-ui.vercel.app/docs/signal-beam-diagram): An integration map where light travels: sources fire gradient pulses along hairline S-curves into a glass hub, which relays them to destinations.

## Voice Agent

[All Voice Agent components](https://framekit-ui.vercel.app/docs/category/voice-agent): Voice orbs, waveforms and AI assistant interfaces.

- [Glass Bubble Buddy](https://framekit-ui.vercel.app/docs/glass-bubble-buddy): A living blob mascot inside a glossy glass sphere with a tiny expression system (lids, catchlights, brows, blush, mouth) and a springy body.
- [Mesh Pill Orb](https://framekit-ui.vercel.app/docs/mesh-pill-orb): A lava-lamp gradient mesh swirls inside a softly wobbling blob with two pill eyes.
- [Star Morph Buddy](https://framekit-ui.vercel.app/docs/star-morph-buddy): A floating indigo blob with a warm glowing core.
- [Call Control Bar](https://framekit-ui.vercel.app/docs/call-control-bar): Mute / hold / end / keypad with glowing active states and hold pulse.
- [Live Transcript Panel](https://framekit-ui.vercel.app/docs/live-transcript-panel): Scrolling dual-speaker transcript with speaker pills and auto-scroll.
- [Agent State Orb](https://framekit-ui.vercel.app/docs/agent-state-orb): Listening / thinking / speaking orb with distinct motion modes.
- [Voice Waveform Lane](https://framekit-ui.vercel.app/docs/voice-waveform-lane): Animated audio waveform bars reacting to simulated level; latency chip.
- [Softphone Dial Pad](https://framekit-ui.vercel.app/docs/softphone-dial-pad): Stylish dial pad with ripple keys, number display, ringing call button.
- [Queue Ticket Card](https://framekit-ui.vercel.app/docs/queue-ticket-card): Call queue card with wait ticker, priority, skill tags, claim/transfer actions.
- [Prism Mesh Orb](https://framekit-ui.vercel.app/docs/prism-mesh-orb): Iridescent mesh sphere — idle/listen/speak modes, pointer tilt, equatorial voice wave when speaking.
- [Liquid Metal Orb](https://framekit-ui.vercel.app/docs/liquid-metal-orb): Mercury / liquid-metal ball with traveling highlight; morphs slightly when speaking.
- [Aurora Core Orb](https://framekit-ui.vercel.app/docs/aurora-core-orb): Inner aurora ribbons through a translucent shell; outer soft glow rings expand on listen.
- [Particle Halo Orb](https://framekit-ui.vercel.app/docs/particle-halo-orb): Core ball + orbiting particle halo that densifies with energy; demo slider or auto level.
- [Ribbon Helix Wave](https://framekit-ui.vercel.app/docs/ribbon-helix-wave): Premium dual ribbon helix / sine ribbons reacting to amplitude — best-in-class voice visualizer.
- [Radial Sonar Wave](https://framekit-ui.vercel.app/docs/radial-sonar-wave): Circular sonar / polar waveform around a center mic glyph; pulse rings on peaks.

## Cursors

[All Cursors components](https://framekit-ui.vercel.app/docs/category/cursors): Custom cursors and pointer followers.

- [Pill Trail Cursor](https://framekit-ui.vercel.app/docs/pill-trail-cursor): Pointer leaves a springing trail of word pills.
- [Halftone Bloom Cursor](https://framekit-ui.vercel.app/docs/halftone-bloom-cursor): Pointer blooms a lilac halftone matrix.
- [Cursor Trail](https://framekit-ui.vercel.app/docs/cursor-trail): Glowing trail following the pointer.
- [Ribbon Trail Cursor](https://framekit-ui.vercel.app/docs/ribbon-trail-cursor): Soft ribbon trail with springy spacing.
- [Lens Flare Cursor](https://framekit-ui.vercel.app/docs/lens-flare-cursor): Soft optical flare that lags behind the pointer.
- [Ink Stamp Cursor](https://framekit-ui.vercel.app/docs/ink-stamp-cursor): Small ink stamps that fade behind the pointer.
- [Orbit Ring Cursor](https://framekit-ui.vercel.app/docs/orbit-ring-cursor): Thin ring orbits the pointer.
- [X-ray Lens Cursor](https://framekit-ui.vercel.app/docs/xray-lens-cursor): A round lens follows the pointer on a spring and shows a second, perfectly aligned layer of the same content — blueprint, wireframe or annotations — through a…

## Search / Inputs

[All Search / Inputs components](https://framekit-ui.vercel.app/docs/category/search-inputs): Search fields and inputs with motion and feedback.

- [Morph Search Capsule](https://framekit-ui.vercel.app/docs/morph-search-capsule): Compact search pill expands into a typing capsule.
- [Elastic Slider](https://framekit-ui.vercel.app/docs/elastic-slider): Thumb stretches elastically while dragging.
- [Signal Pebble](https://framekit-ui.vercel.app/docs/signal-pebble): Procedural noise pebble with a status verb.

## Inputs / Forms

[All Inputs / Forms components](https://framekit-ui.vercel.app/docs/category/inputs-forms): Form controls with considered states and motion.

- [Signature Pad Field](https://framekit-ui.vercel.app/docs/signature-pad-field): An e-signature field: draw with mouse, pen or finger and the ink thins on fast strokes and pools on slow ones; undo stroke by stroke, or switch to the Type…
- [Tumbler Lock OTP](https://framekit-ui.vercel.app/docs/tumbler-lock-otp): A one-time-code field built from combination-lock drums on real CSS-3D cylinders; each digit whirrs a full turn before landing, a padlock checks the code and…
- [Crystal Strength Password](https://framekit-ui.vercel.app/docs/crystal-strength-password): A password field that grows an SVG crystal: each satisfied rule springs a faceted shard out of the rock, the cluster shifts from ember to glacier, and a…

## Product UI

[All Product UI components](https://framekit-ui.vercel.app/docs/category/product-ui): Apple- and Vercel-style product UI: sheets, pickers, tables and status.

- [Glass Segmented Control](https://framekit-ui.vercel.app/docs/glass-segmented-control): An iOS-style segmented control whose selected thumb is a lifted glass pill that springs between segments with a press squish — native radio semantics, arrow…
- [Dynamic Status Island](https://framekit-ui.vercel.app/docs/dynamic-status-island): A black capsule that morphs its silhouette between live activities — recording with a level meter, a focus timer with pause, an upload with a progress…
- [Detent Sheet](https://framekit-ui.vercel.app/docs/detent-sheet): An Apple-style bottom sheet resting at peek, half and full detents — velocity-aware drag with rubber-banding, the background recedes and dims as it rises, and…
- [Vibrancy Context Menu](https://framekit-ui.vercel.app/docs/vibrancy-context-menu): A macOS-grade context menu on regular glass that blooms from the exact pointer position, flips near the edges, glides a highlight capsule between rows, and…
- [Deploy Timeline](https://framekit-ui.vercel.app/docs/deploy-timeline): A build pipeline that reads like a calm status page: dots resolve to spinners to ticks, the rail fills as steps complete, elapsed times tick in tabular…
- [Usage Quota Meter](https://framekit-ui.vercel.app/docs/usage-quota-meter): A billing-period usage card: hairline tracks fill with stacked segments on the house ease, figures count up in tabular numerals, a limit tick marks 100%, and…
- [Onboarding Stepper](https://framekit-ui.vercel.app/docs/onboarding-stepper): A three-question setup flow on one continuous surface: a progress capsule stretches into the current step with a shared-layout spring, panels slide in the…
- [Sortable Data Table](https://framekit-ui.vercel.app/docs/sortable-data-table): A dense, quiet deployments table: sortable headers with aria-sort, search and status filter chips, rows that glide to their new order, hairline hover and…
- [Date Range Picker](https://framekit-ui.vercel.app/docs/date-range-picker): A calendar that previews the range as you hover with a continuous tinted band between endpoint pills, month pages that slide in the direction you move, preset…
- [Feedback State Panel](https://framekit-ui.vercel.app/docs/feedback-state-panel): One surface for the screens nobody designs — empty, error, offline, permission and success — each with its own glyph and motion character, copy that names the…
- [Keyboard Shortcut Hint](https://framekit-ui.vercel.app/docs/kbd-shortcut-hint): A cheat sheet of tactile keycaps that knows your platform (⌘ ⌥ ⇧ vs Ctrl Alt Shift); hold real keys and matching caps sink and light up, complete a combo and…
- [Inset Settings List](https://framekit-ui.vercel.app/docs/inset-settings-list): An iOS-style grouped inset list with tinted icon tiles, hairlines inset to the label edge, switches whose knob stretches on press, and choice rows that push a…
- [Rolling Number Stepper](https://framekit-ui.vercel.app/docs/rolling-number-stepper): A quantity field whose changed digits roll in the direction of travel, accelerates on press-and-hold like a hardware stepper, and nudges sideways with a…
- [File Drop Uploader](https://framekit-ui.vercel.app/docs/file-drop-uploader): A calm dropzone that lifts and tints on drag-over, then gives each file its own row with a spring progress hairline, a tick that pops on completion, and…

## Website Sections

[All Website Sections components](https://framekit-ui.vercel.app/docs/category/website-sections): Navbars, pricing, FAQ, testimonials, CTAs and footers for marketing sites.

- [Glass App Dock](https://framekit-ui.vercel.app/docs/glass-app-dock): A macOS-style dock: icons magnify on a spring with a cosine falloff around the pointer, labels float above, launching bounces the icon and lights a running dot.
- [Spotlight Command Palette](https://framekit-ui.vercel.app/docs/spotlight-command-palette): A cmdk-style ⌘K launcher: fuzzy grouped results, a highlight that springs between rows, nested pages (Backspace to go back), key-cap hints and full combobox…
- [Activity Rings](https://framekit-ui.vercel.app/docs/activity-rings): Apple Watch-style concentric progress rings: gradient strokes sweep in on a spring, overshooting 100% laps over itself with a shadowed tip, and the legend…
- [Glass Mega Navbar](https://framekit-ui.vercel.app/docs/glass-mega-navbar): A full-width bar that contracts into a floating glass pill on scroll.
- [Pricing Plans](https://framekit-ui.vercel.app/docs/pricing-plans): Three-tier pricing with a sliding monthly/yearly switch whose numerals roll digit by digit, a highlighted ink plan with a light rim, and a “you save” chip…
- [FAQ Accordion](https://framekit-ui.vercel.app/docs/faq-accordion): A two-column FAQ: rows expand on a height spring, the plus rotates into a cross, the open row lifts onto a soft surface and answers un-blur in.
- [Testimonial Wall](https://framekit-ui.vercel.app/docs/testimonial-wall): A masonry wall of quote cards whose columns drift in opposite directions at different speeds, faded at the edges, with a pause button; reduced motion shows a…
- [Feature Comparison Table](https://framekit-ui.vercel.app/docs/feature-comparison-table): A plan comparison table with a sticky header, collapsible groups, a tinted highlighted column, row hover and a one-plan-at-a-time switcher on phones.
- [CTA Glow Banner](https://framekit-ui.vercel.app/docs/cta-glow-banner): A closing call-to-action on an ink panel: a soft lilac and orange aurora trails the pointer behind a fine dot grid, the block rises in on scroll and the arrow…
- [Newsletter Signup](https://framekit-ui.vercel.app/docs/newsletter-signup): An inline email capture with inline validation, a button that morphs to a spinner, a shake on error, a polite live region and a success state with undo.
- [Site Footer](https://framekit-ui.vercel.app/docs/site-footer): A calm SaaS footer: link columns with sliding hairline underlines, a live status pill, socials, a language picker and a giant outlined wordmark that rises…
- [Cookie Consent](https://framekit-ui.vercel.app/docs/cookie-consent): A floating glass consent card with equal-weight Accept / Reject (no dark patterns) and a Customise drawer of per-category switches that expands in place, plus…
- [Announcement Bar](https://framekit-ui.vercel.app/docs/announcement-bar): A slim ink top bar with a sweeping sheen; messages roll vertically with a blur, dots pick one, hover or focus pauses, and dismissing collapses the height…
- [Changelog Timeline](https://framekit-ui.vercel.app/docs/changelog-timeline): Release notes on a timeline with sticky dates, popping dots, generated cover art and a filter (All / New / Improved / Fixed) that re-flows each change list on…

## Motion Showcase

[All Motion Showcase components](https://framekit-ui.vercel.app/docs/category/motion-showcase): Scroll-scrubbed reveals, shared-element transitions and spring physics.

- [Scroll Product Reveal](https://framekit-ui.vercel.app/docs/scroll-product-reveal): An Apple-style pinned product story: scroll scrubs a CSS 3D device through rotation, screen glow and an exploded-layer view while chapter copy cross-fades…
- [App Store Expand Card](https://framekit-ui.vercel.app/docs/app-store-expand-card): Story cards that grow into a full detail sheet with a shared-layout spring: art, headline and surface morph from the card, the body rises in behind.
- [Liquid Glass Tab Bar](https://framekit-ui.vercel.app/docs/liquid-glass-tab-bar): An iOS 26-style floating glass tab bar: a refractive lens slides between tabs and stretches with distance like liquid, icons pop on select, plus a floating…
- [Gradient Mesh Hero](https://framekit-ui.vercel.app/docs/gradient-mesh-hero): A hero over four soft colour fields that drift on slow offset orbits and lean toward the pointer, with fine grain, a glass eyebrow pill and a blur-staggered…
- [Morph Button Modal](https://framekit-ui.vercel.app/docs/morph-button-modal): A pill button that physically becomes its dialog: the surface expands on a shared-layout spring, the label blurs into a form, and submit shrinks it back into…
- [Kinetic Stats Band](https://framekit-ui.vercel.app/docs/kinetic-stats-band): A band of big tabular numbers that count up on an expo curve when scrolled into view, with motion blur on the fast part and sparklines that draw themselves.
- [Parallax Depth Stack](https://framekit-ui.vercel.app/docs/parallax-depth-stack): A fanned card stack on CSS 3D layers: the pointer tilts it and each layer parallaxes by depth with a moving sheen; click or Enter sends the front card to the…
- [Spring Stagger Grid](https://framekit-ui.vercel.app/docs/spring-stagger-grid): A filterable tile grid that enters on a diagonal ripple (delay = row + column), re-flows on layout springs when filtered and exits with a quick scale-down.
- [Magnetic Dot Grid](https://framekit-ui.vercel.app/docs/magnetic-dot-grid): A canvas field of dots that lean toward the pointer on spring physics, swell and tint near it, then settle with a soft wobble; clicks send a ripple.
- [Page Curtain Transition](https://framekit-ui.vercel.app/docs/page-curtain-transition): Route changes play a staggered column curtain: panels sweep up to cover, the next page name flashes on the curtain, then they lift away to reveal it.
- [Lit Product Card 3D](https://framekit-ui.vercel.app/docs/lit-product-card-3d): A product card with real lighting: tilt follows the pointer, a specular highlight tracks the light while the cast shadow moves opposite, the product floats on…
- [Timeline Scrubber](https://framekit-ui.vercel.app/docs/timeline-scrubber): A media scrubber with a waveform that lights up behind the playhead, a thumb that grows while dragging, chapter markers that snap within 1.5 s, a time bubble…
- [Spring Reorder List](https://framekit-ui.vercel.app/docs/spring-reorder-list): A priority list reordered by dragging the grip: the lifted row scales and deepens its shadow while siblings part on springs.
- [Blur Cascade Heading](https://framekit-ui.vercel.app/docs/blur-cascade-heading): A keynote-style display headline that resolves out of focus: words or letters rise through a mask from blur to sharp on springs, and highlight words land last…
- [Perspective Tunnel Carousel](https://framekit-ui.vercel.app/docs/perspective-tunnel-carousel): A row of 3:4 cards riding a corridor in real CSS 3D: tiny and flat on the back wall at the vanishing point, growing huge and angled along the side walls as…

## Data Widgets

[All Data Widgets components](https://framekit-ui.vercel.app/docs/category/data-widgets): Dashboard cards and charts: candlesticks, donuts, heatmaps and KPIs.

- [Glow Candle Card](https://framekit-ui.vercel.app/docs/glow-candle-card): An ink “Sales Report” card with monospaced rolling numerals, a neon delta and a glowing candlestick chart: candles grow from their midpoints, new ones stream…
- [Glow Level Card](https://framekit-ui.vercel.app/docs/glow-level-card): The ink stat card with segmented neon level meters: segments light left to right with a bloom, levels re-balance live, and hovering or focusing a row reveals…
- [Glow Histogram Card](https://framekit-ui.vercel.app/docs/glow-histogram-card): A neon gradient histogram beside the ink stat card: bars rise on a soft spring with glowing caps that fade into the card, values drift live and hover / ← →…
- [Budget Area Card](https://framekit-ui.vercel.app/docs/budget-area-card): A soft white squircle with a big rolling total, a delta pill and floating soft-3D banknotes.
- [Pastel Object Carousel](https://framekit-ui.vercel.app/docs/pastel-object-carousel): A cover-flow of pastel portrait cards with floating caption panels.
- [Sparkline KPI Tile](https://framekit-ui.vercel.app/docs/sparkline-kpi-tile): A compact metric tile with a live dot, rolling numerals, a delta chip and a smooth sparkline that draws in, streams new points and shows a crosshair value on…
- [Spend Donut Card](https://framekit-ui.vercel.app/docs/spend-donut-card): A radial spend breakdown whose rounded arcs sweep in one after another; hovering or focusing a category pops its arc outward and rolls the centre total to…
- [Contribution Heatmap Tile](https://framekit-ui.vercel.app/docs/contribution-heatmap-tile): A weeks × days activity heatmap: cells pop in on a diagonal wave, the total and streak roll up, and the grid is one roving tab stop where arrows move a ring…
- [Wallet Balance Card](https://framekit-ui.vercel.app/docs/wallet-balance-card): A fanned stack of payment cards: picking one springs it to the front while the rest tuck behind, the balance rolls to the new amount and an eye toggle blurs…
- [Crypto Ticker Row](https://framekit-ui.vercel.app/docs/crypto-ticker-row): A watchlist with live prices: each tick flashes the price green or red and fades back, mini sparklines morph to the new history and every row is a labelled…
- [Goal Progress Card](https://framekit-ui.vercel.app/docs/goal-progress-card): A savings goal with a liquid progress bar: topping up springs the fill forward under a moving sheen, milestone ticks light as they pass and reaching the goal…
- [Comparison Bar Card](https://framekit-ui.vercel.app/docs/comparison-bar-card): This period vs last as paired bars: a segmented control slides a pill between Week, Month and Year while bars re-grow on a spring, and hovering or focusing a…
- [Smart Widget Stack](https://framekit-ui.vercel.app/docs/smart-widget-stack): An iOS-style widget stack: the top widget sits at full size with the next ones peeking above; scroll, swipe vertically, use ↑ ↓ or the side dots to flip…

## Core

[All Core components](https://framekit-ui.vercel.app/docs/category/core): Everyday primitives: button, badge, card, input, dialog and more.

- [Button](https://framekit-ui.vercel.app/docs/button): Versatile button with variants and sizes.
- [Badge](https://framekit-ui.vercel.app/docs/badge): Compact status and label chips.
- [Card](https://framekit-ui.vercel.app/docs/card): Composable surface with hairline ring and layered shadow; default, raised, glass and outline variants.
- [Input](https://framekit-ui.vercel.app/docs/input): Accessible text field with focus ring.
- [Textarea](https://framekit-ui.vercel.app/docs/textarea): Multi-line text input.
- [Switch](https://framekit-ui.vercel.app/docs/switch): Plain animated boolean switch.
- [Checkbox](https://framekit-ui.vercel.app/docs/checkbox): Checkbox with optional label.
- [Tabs](https://framekit-ui.vercel.app/docs/tabs): Keyboard-friendly tabbed panels.
- [Accordion](https://framekit-ui.vercel.app/docs/accordion): Expandable sections with motion.
- [Dialog](https://framekit-ui.vercel.app/docs/dialog): Accessible modal dialog.
- [Tooltip](https://framekit-ui.vercel.app/docs/tooltip): Hover/focus hint bubbles.
- [Dropdown Menu](https://framekit-ui.vercel.app/docs/dropdown-menu): Action menu anchored to a trigger.
- [Toast](https://framekit-ui.vercel.app/docs/toast): Transient notifications with a provider.
- [Avatar](https://framekit-ui.vercel.app/docs/avatar): User image with initials fallback.
- [Skeleton](https://framekit-ui.vercel.app/docs/skeleton): Loading placeholders.
- [Progress](https://framekit-ui.vercel.app/docs/progress): Progress bar with semantic tones, sizes, an optional label with tabular percentage, and an indeterminate mode.
- [Breathing Dot](https://framekit-ui.vercel.app/docs/breathing-dot): Soft pulsating status indicator.
- [Avatar Stack](https://framekit-ui.vercel.app/docs/avatar-stack): Overlapping avatars that make room: hover or focus one and it lifts while neighbours part on a spring, revealing a frosted name tag with role and presence.

## Optional

- [Full component reference](https://framekit-ui.vercel.app/llms-full.txt): every component with description, install command and props
- [Sitemap](https://framekit-ui.vercel.app/sitemap.xml): every docs URL
- [Contributing guide](https://github.com/Sid9022/framekit-ui/blob/master/AGENTS.md): conventions for adding components