PaceUI
Dot Flowdot-display-dot-flowAnimated step flow combining text status transitions with dot matrix animations.
Dot Loaderdot-display-dot-loaderFrame-by-frame 9x9 LED dot matrix loader animation component.
Model Ability Selectorgsap-ai-model-ability-selectorCompact selector for toggling abilities with icons and custom styles
Model Selectorgsap-ai-model-selectorAI-focused model selector with preview, tooltips, and capability indicators built-in
Response Writergsap-ai-response-writerAn auto-scrolling text display that smoothly keeps the latest response always visible
AI Suggestionsgsap-ai-suggestionsGet smart, real-time AI recommendations to refine and improve your work
Token Countergsap-ai-token-counterCompact selector for toggling abilities with icons and custom styles
Animated Stackgsap-animated-stackA smooth stacked card component that expands on hover and collapses with animation.
Bouncing Textgsap-bouncing-textA playful animation where characters bounce in sequence across the text.
Distort Textgsap-distort-textDistort text with interactive hover motion.
Draw Line Textgsap-draw-line-textA smooth text effect that draws characters as strokes and fills them in-perfect for headers and highlights.
Fillable Buttongsap-fillable-buttonA button that fills with color on hover.
Flip Revealgsap-flip-revealAnimated container that reveals or hides items using GSAP Flip transitions and keys.
GitHub Star Countergsap-github-star-counterDisplay live GitHub star count for any public repository
Gradient Shadowgsap-gradient-shadowSmooth horizontal gradient flow, creating a subtle glowing hover shadow effect.
Layered Stackgsap-layered-stackAn interactive component that dynamically layers elements, creating a visually engaging stacked animation effect.
Liquid Cursorgsap-liquid-cursorA smooth, fluid cursor that follows your mouse with gentle stretch and bounce effects.
Liquid Glassgsap-liquid-glassA smooth glass effect with subtle blur, ideal for UI highlights and overlays.
Mouse Wave Textgsap-mouse-wave-textCreates a wave-like bounce effect on text as the mouse moves across
Overlay Effectgsap-overlay-effectOverlay effect with GSAP animation.
Profile Peekgsap-profile-peekHover to peek profile with smooth reveal, right from the image.
Reveal On Scrollgsap-reveal-on-scrollAnimate content into view on scroll with effects like fade, slide, zoom, and blur.
Reveal Textgsap-reveal-textA smooth text reveals animation where each heading reveals related content on interaction.
Rolling Numbergsap-rolling-numberA smooth rolling number component powered by GSAP.
Scramble Textgsap-scramble-textA hover-triggered text effect that scrambles and restores characters with smooth motion
Spring Buttongsap-spring-buttonA button that shrinks on press and springs back with bounce.
Squash Textgsap-squash-textCharacters bounce and squash into place with playful, dynamic energy.
Stagger on Scrollgsap-stagger-on-scrollStagger elements into view with scroll-triggered fade, slide, zoom, or blur effects.
Swapgsap-swapA flexible swap component that animates content changes with smooth customizable transition effects.
Text Fall Buttongsap-text-fall-buttonA button with dynamic text that falls into place with a smooth, elastic motion on hover or click.
Tilt Cardgsap-tilt-cardInteractive 3D tilt card that responds to cursor, adds depth and motion
Accordionmotion-accordionA vertically stacked set of interactive headings that each reveal a section of content with motion animations.
Model Ability Selectormotion-ai-model-ability-selectorCompact selector for toggling abilities with icons and custom styles
Model Selectormotion-ai-model-selectorAI-focused model selector with preview, tooltips, and capability indicators built-in
Response Writermotion-ai-response-writerAn auto-scrolling text display that smoothly keeps the latest response always visible
AI Suggestionsmotion-ai-suggestionsGet smart, real-time AI recommendations to refine and improve your work
Token Countermotion-ai-token-counterCompact selector for toggling abilities with icons and custom styles
Alertmotion-alertDisplays a callout for user attention with spring motion entrance and exit transitions.
Bouncing Textmotion-bouncing-textA playful animation where characters bounce in sequence across the text.
Calendarmotion-calendarA date picker component that allows users to select dates and ranges with interactive spring selection animations.
Checkboxmotion-checkboxA control that allows the user to toggle between checked and not checked with tactile spring press physics and animated checkmark transitions.
Collapsiblemotion-collapsibleAn interactive component which expands/collapses a panel with smooth spring height morphing and mask-gradient transitions.
Comboboxmotion-comboboxAn interactive searchable input with a filtered list of selectable items, animated floating highlight, and multi-select chip transitions.
Context Menumotion-context-menuDisplays a menu located at the pointer position, triggered by a right-click or long-press, with spring entrance transitions, submenus, checkboxes, and radio items.
Draw Line Textmotion-draw-line-textA smooth text effect that draws characters as strokes and fills them in-perfect for headers and highlights.
Dropdown Menumotion-dropdown-menuDisplays a menu to the user-triggered by a button-with spring entrance transitions, submenus, checkboxes, and radio items.
Emptymotion-emptyDisplays an empty state placeholder when no data, results, or items are present with spring entrance animations.
Fillable Buttonmotion-fillable-buttonA button that fills with color on hover.
Flip Revealmotion-flip-revealAnimated container that reveals or hides items using GSAP Flip transitions and keys.
Gradient Shadowmotion-gradient-shadowSmooth horizontal gradient flow, creating a subtle glowing hover shadow effect.
Hover Cardmotion-hover-cardFor sighted users to preview content available behind a link with spring entrance transitions.
Infinite Scrollermotion-infinite-scrollerA smooth, physics-driven infinite scroller featuring drag momentum and scroll acceleration.
Input OTPmotion-input-otpAccessible one-time password component with spring animations for character entry and active slot focus.
Layered Stackmotion-layered-stackAn interactive component that dynamically layers elements, creating a visually engaging stacked animation effect.
Menubarmotion-menubarA desktop-style horizontal menu bar with shared gliding trigger indicators, floating popup transition, and animated items.
Mouse Wave Textmotion-mouse-wave-textCreates a wave-like bounce effect on text as the mouse moves across
Navigation Menumotion-navigation-menuA collection of links and navigation elements with shared gliding indicator, spring popup scale entrance, and viewport dimension morphing.
Paginationmotion-paginationPagination with page navigation, next and previous links, and motion shared active glide.
Profile Peekmotion-profile-peekHover to peek profile with smooth reveal, right from the image.
Progressmotion-progressDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar with spring motion animations.
Radio Groupmotion-radio-groupA set of checkable buttons-known as radio buttons-where no more than one button can be checked at a time, featuring tactile press physics and spring indicator pop transitions.
Reveal On Scrollmotion-reveal-on-scrollAnimate content into view on scroll with effects like fade, slide, zoom, and blur.
Scramble Textmotion-scramble-textA hover-triggered text effect that scrambles and restores characters with smooth motion
Scroll Areamotion-scroll-areaAugments native scroll functionality for custom, cross-browser styling with smooth scrolling, tactile spring thumb interactions, and transition physics.
Selectmotion-selectDisplays a list of options for the user to pick from-triggered by a button-with spring popup reveals, shared gliding active item highlight, and animated checkmarks.
Sidebarmotion-sidebarA composable, themeable, and customizable sidebar component with collapsible states, variants, and responsive sheet behavior.
Slidermotion-sliderAn input where the user selects a value from within a given range with spring thumb scaling physics.
Spring Buttonmotion-spring-buttonA button that shrinks on press and springs back with bounce.
Squash Textmotion-squash-textCharacters bounce and squash into place with playful, dynamic energy.
Swapmotion-swapA flexible swap component that animates content changes with smooth customizable transition effects.
Switchmotion-switchA control that allows the user to toggle between checked and not checked with jelly squash-and-stretch active physics and bouncy spring animations.
Tabsmotion-tabsA set of layered sections of content-known as tab panels-that are displayed one at a time with layout-aware spring indicator animations.
Text Fall Buttonmotion-text-fall-buttonA button with dynamic text that falls into place with a smooth, elastic motion on hover or click.
Tooltipmotion-tooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it, with shared provider morphing and blur-replace animations.
Browser Supportnative-ai-browser-supportDetects browser local AI support and guides users through enabling Chrome Built-in AI
Chat Headernative-ai-chat-headerRenders the header with the assistant name/icon, model load status, and token usage counter
Chat Inputnative-ai-chat-inputRenders the message input area, supporting key event handling (Enter to submit) and loading status
Chat Messagesnative-ai-chat-messagesHandles message rendering and scrolling, displaying user and assistant messages, plus a typing indicator
Chat Suggestionsnative-ai-chat-suggestionsDisplays a horizontal list of clickable follow-up queries or suggested actions
FollowUps Chatnative-ai-follow-upsAdvanced AI chat with follow-up suggestions, structured answer parsing, and context-aware prompting
Quick Chatnative-ai-quick-chatA ready-to-use chat interface powered by Chrome's native Gemini Nano with streaming responses
Response Renderernative-ai-response-rendererStyled markdown renderer optimized for displaying AI-generated responses