# GodUI — Animated React UI Components for Design Engineers > GodUI is an open-source collection of animated UI components for React, built with TypeScript, Tailwind CSS, and Motion. Copy-paste, shadcn/ui-ready components for design engineers. ## About This file provides a structured overview of the documentation and content available on this site, optimized for consumption by Large Language Models (LLMs) and AI assistants. ## Pages - [GodUI — UI Collection for Modern Interfaces](https://godui.design) An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui. ## Documentation ### docs - [Agent Timeline](https://godui.design/docs/components/ai/agent-timeline) A vertical timeline of agent steps with live status, a spring-filled connector, and collapsible reasoning or tool-output bodies that morph open. - [Conversation Thread](https://godui.design/docs/components/ai/conversation-thread) A streaming AI chat surface — messages spring in, tokens reveal with a blinking caret, hover actions fade in, and the view auto-sticks to the latest message. - [Prompt Composer](https://godui.design/docs/components/ai/prompt-composer) An AI input box with auto-growing textarea, attachment chips, an inline model picker, and a send button that morphs into a stop control while streaming. - [Prompt Suggestions](https://godui.design/docs/components/ai/prompt-suggestions) Animated starter prompts for AI empty states — cards stagger in, lift on hover, and feed straight into the composer when chosen. - [Source Citations](https://godui.design/docs/components/ai/source-citations) Inline numbered citation pills that spring out a rich preview card on hover, plus a collapsible source list for AI answers. - [Voice Orb](https://godui.design/docs/components/ai/voice-orb) A Siri-style audio-reactive orb that breathes when idle, pulses while listening, and swells with the voice as it speaks. - [Blueprint Grid](https://godui.design/docs/components/backgrounds/blueprint-grid) A technical lattice — lines, dots, or a perspective floor — with a light sweep and cursor spotlight. - [Decorative Background](https://godui.design/docs/components/backgrounds/decorative-background) Full-bleed decorative backgrounds — radial and corner gradient washes. - [Effect Background](https://godui.design/docs/components/backgrounds/effect-background) Full-bleed effect backgrounds — radial glows, aurora dreams, and soft pastel washes. - [Flow Field](https://godui.design/docs/components/backgrounds/flow-field) Particles streaming along an evolving noise vector field, leaving silky fading trails. - [Geometric Background](https://godui.design/docs/components/backgrounds/geometric-background) Full-bleed geometric backgrounds — grids, dashed grids, diagonal crosses, and masked fades. - [Gradient Background](https://godui.design/docs/components/backgrounds/gradient-background) Full-bleed gradient backgrounds — radial glows, aurora washes, and depth fades. - [Light Rays](https://godui.design/docs/components/backgrounds/light-rays) Volumetric god-rays that slowly sweep and breathe, with optional film grain. Pure CSS. - [Liquid Metaballs](https://godui.design/docs/components/backgrounds/liquid-metaballs) Gooey blobs that drift, collide, and merge under an SVG goo filter — with a cursor blob. - [Pixel Grid](https://godui.design/docs/components/backgrounds/pixel-grid) A grid of squares that flicker their opacity — as an automatic animated background, or revealed only under the cursor. - [Topographic Drift](https://godui.design/docs/components/backgrounds/topographic-drift) Slowly drifting topographic contour lines — a living elevation map drawn with marching squares. - [Warp Starfield](https://godui.design/docs/components/backgrounds/warp-starfield) A depth starfield you fly through — cursor parallax and an optional hyperspace warp. - [Gooey FAB](https://godui.design/docs/components/buttons/gooey-fab) A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs. - [Hold Confirm Button](https://godui.design/docs/components/buttons/hold-confirm-button) Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels. - [Magic Button](https://godui.design/docs/components/buttons/magic-button) A pushable 3D button with rainbow edge animation and solid front face. - [Magnetic Button](https://godui.design/docs/components/buttons/magnetic-button) A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit. - [Mask Button](https://godui.design/docs/components/buttons/mask-button) A button whose face wipes away on hover via an animated CSS sprite-sheet mask, revealing the label behind it. - [Progress Fold Button](https://godui.design/docs/components/buttons/progress-fold-button) A 3D button whose front face folds back to reveal a controlled progress bar while loading. - [Shimmer Button](https://godui.design/docs/components/buttons/shimmer-button) A button with an animated shimmering border light effect. - [Slide Confirm Button](https://godui.design/docs/components/buttons/slide-confirm-button) A drag-to-confirm thumb for high-stakes actions — slide past the threshold to commit, release early to spring back. - [Comment Pin](https://godui.design/docs/components/collaboration/comment-pin) Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field. - [Live Cursors](https://godui.design/docs/components/collaboration/live-cursors) Smoothly interpolated multiplayer cursors with trailing name flags and optional cursor-chat — the signature "this app is alive" effect. - [Notification Inbox](https://godui.design/docs/components/collaboration/notification-inbox) A Linear-style notification center with time-bucketed groups, unread accent rails, swipe-to-archive, mark-all-read, and a polished empty state. - [Presence Facepile](https://godui.design/docs/components/collaboration/presence-facepile) Live avatars with animated status rings, spring join/leave, and a +N overflow that expands into a presence list — who's online, idle, or typing right now. - [Border Beam](https://godui.design/docs/components/effects/border-beam) An animated beam of light that travels around the border of its container. - [Confetti](https://godui.design/docs/components/effects/confetti) A physics-based confetti burst with an imperative fire API for celebratory moments. - [Fluid Cursor](https://godui.design/docs/components/effects/fluid-cursor) A spring-lagged blend-mode cursor that trails the pointer and swells over interactive elements. - [Image Trail](https://godui.design/docs/components/effects/image-trail) Images spawn along the pointer's path, pop in, and drift away — the signature portfolio hover effect. - [Lamp](https://godui.design/docs/components/effects/lamp) A conic-gradient lamp that ignites and reveals a headline as it scrolls into view. - [Liquid Image](https://godui.design/docs/components/effects/liquid-image) A premium hover effect that ripples and distorts an image like liquid, intensifying with cursor speed. - [Marquee](https://godui.design/docs/components/effects/marquee) An infinite, seamless scrolling row or column of content that pauses on hover. - [Particle Dissolve](https://godui.design/docs/components/effects/particle-dissolve) Text or an image is sampled into particles that scatter and reform — a dramatic entrance or transition. - [Scroll Progress](https://godui.design/docs/components/effects/scroll-progress) A spring-smoothed reading indicator — a pinned top bar or a fading back-to-top ring. - [Scroll Reveal](https://godui.design/docs/components/effects/scroll-reveal) Reveals its children with a spring as they scroll into view, with optional velocity skew. - [Spotlight Card](https://godui.design/docs/components/effects/spotlight-card) A card with a radial spotlight glow that follows the pointer, optionally lighting the border. - [Spotlight Reveal](https://godui.design/docs/components/effects/spotlight-reveal) A cursor-following flashlight that cuts through the top layer to expose a hidden layer beneath. - [Liquid Glass Card](https://godui.design/docs/components/glass/liquid-glass-card) A glass panel that refracts the content behind it with a mouse-tracked specular highlight. - [Liquid Glass Lens](https://godui.design/docs/components/glass/liquid-glass-lens) A circular glass lens that floats over your content and follows the cursor, refracting everything beneath it. - [Components](https://godui.design/docs/components/index) Browse the full GodUI component collection. - [Magic Input](https://godui.design/docs/components/inputs/magic-input) A 3D layered text input that lifts on focus with an optional rainbow edge animation. - [OTP Input](https://godui.design/docs/components/inputs/otp-input) A segmented one-time-code input with auto-advance, paste-to-fill, a traveling caret, and error shake. - [Accordion](https://godui.design/docs/components/layout/accordion) A disclosure list with spring height animation, rotating chevrons, and single or multiple open modes. - [Animated Testimonials](https://godui.design/docs/components/layout/animated-testimonials) A testimonial carousel with a shuffling image stack and crossfading quotes. - [Avatar Group](https://godui.design/docs/components/layout/avatar-group) Overlapping avatars that fan apart on hover, with a +N overflow chip. - [Bento Grid](https://godui.design/docs/components/layout/bento-grid) A modular bento layout of mixed-size cards that stagger in on scroll and lift with a spotlight on hover. - [Card Swap](https://godui.design/docs/components/layout/card-swap) A 3D stack of cards that cycles through a showcase loop, with pointer parallax and spring re-flow. - [Image Accordion](https://godui.design/docs/components/layout/image-accordion) Horizontal image panels that expand on hover to reveal their caption — an elegant, space-efficient gallery. - [Image Compare](https://godui.design/docs/components/layout/image-compare) A draggable before/after slider with clip-path reveal, keyboard support, and a pulsing handle hint. - [Progressive Card Reveal](https://godui.design/docs/components/layout/progressive-card-reveal) A vertical stack of cards where one card expands to its full view while the rest collapse to compact pills, animating the morph between them. - [Reorder List](https://godui.design/docs/components/layout/reorder-list) A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them. - [Scroll Stack](https://godui.design/docs/components/layout/scroll-stack) Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section. - [Stepper](https://godui.design/docs/components/layout/stepper) A step indicator with a spring-filled progress line and a number-to-checkmark morph. - [Swipe Deck](https://godui.design/docs/components/layout/swipe-deck) A physics, Tinder-style swipeable card deck with throw-to-dismiss, directional intent, and keyboard controls. - [Tilt Card](https://godui.design/docs/components/layout/tilt-card) A card that tilts in 3D toward the pointer with parallax depth and a specular glare. - [Breadcrumbs](https://godui.design/docs/components/navigation/breadcrumbs) A breadcrumb trail with a shared-element hover pill that springs between crumbs, animated path changes, and an overflow that collapses into a popover. - [Combobox](https://godui.design/docs/components/navigation/combobox) A type-ahead autocomplete with staggered result reveal, highlighted matches, keyboard navigation, and an async loading state. - [Context Menu](https://godui.design/docs/components/navigation/context-menu) A right-click menu that springs open from the exact cursor point and flips to stay inside the viewport, with icons, shortcuts, and destructive actions. - [Dock](https://godui.design/docs/components/navigation/dock) A macOS-style dock whose items magnify with spring physics as the pointer moves across them. - [Dropdown Menu](https://godui.design/docs/components/navigation/dropdown-menu) An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation. - [Filter Bar](https://godui.design/docs/components/navigation/filter-bar) A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill. - [Magic Tab](https://godui.design/docs/components/navigation/magic-tab) A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge. - [Mega Menu](https://godui.design/docs/components/navigation/mega-menu) A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers. - [Resizable Header](https://godui.design/docs/components/navigation/resizable-header) A sticky navbar that springs into a compact, blurred floating pill as you scroll, with a shared-element active indicator. - [Segmented Control](https://godui.design/docs/components/navigation/segmented-control) An iOS-style selector with a sliding pill that springs between options. - [Tab Bar](https://godui.design/docs/components/navigation/tab-bar) A mobile bottom navigation where a shared-element blob slides under the active tab, the icon gives a haptic-style pop, and the label reveals on selection. - [Animated Tooltip](https://godui.design/docs/components/overlays/animated-tooltip) A tooltip that springs in and tilts in 3D as the pointer moves across its trigger. - [Command Palette](https://godui.design/docs/components/overlays/command-palette) A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit. - [Drawer](https://godui.design/docs/components/overlays/drawer) A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss. - [Dynamic Island](https://godui.design/docs/components/overlays/dynamic-island) An Apple-inspired pill that springs between size presets while its content cross-fades. - [Floating Toolbar](https://godui.design/docs/components/overlays/floating-toolbar) A context toolbar that springs into view with magnetic, morphing action buttons. - [Morphing Dialog](https://godui.design/docs/components/overlays/morphing-dialog) A card that physically morphs into a modal through a shared layout, then springs back on close. - [Toast](https://godui.design/docs/components/overlays/toast) Stacked, swipe-dismissible toasts with an imperative toast() API. - [Aurora Text](https://godui.design/docs/components/text/aurora-text) Gradient text with a rainbow aurora that drifts across the letters. - [Elastic Text](https://godui.design/docs/components/text/elastic-text) Variable-font text whose weight springs up under an automatic spotlight or the pointer. - [Highlighter](https://godui.design/docs/components/text/highlighter) Draw hand-drawn sketch annotations over inline text — highlight, underline, box, circle, and more. Powered by Rough Notation. - [Number Ticker](https://godui.design/docs/components/text/number-ticker) Animates a number to its target value with spring physics when scrolled into view. - [Text Animate](https://godui.design/docs/components/text/text-animate) Staggered entrance animations for headlines and copy, split by word, character, or line. - [Text Scramble](https://godui.design/docs/components/text/text-scramble) Characters cycle through random glyphs and resolve into the target text — a decrypt / matrix reveal. - [Animated Beam](https://godui.design/docs/components/visualizations/animated-beam) An animated gradient beam that travels along a path connecting two separate nodes. - [Globe](https://godui.design/docs/components/visualizations/globe) A draggable, auto-rotating WebGL globe with glowing location markers. - [Orbiting Circles](https://godui.design/docs/components/visualizations/orbiting-circles) Icons that orbit a center point on a configurable ring, staying upright as they travel. - [Motion Patterns](https://godui.design/docs/guidelines/patterns) The reusable motion recipes that put the principles into practice — one card per pattern. - [Motion Principles](https://godui.design/docs/guidelines/principles) The philosophy behind every animation in GodUI — twelve principles, each with a live demo. - [Introduction](https://godui.design/docs/index) An open-source collection of beautifully crafted motion components built with React, TypeScript, Tailwind CSS, Motion, and shadcn/ui. - [Installation](https://godui.design/docs/installation) Install GodUI components with the shadcn CLI. - [MCP Server](https://godui.design/docs/mcp) Use GodUI from your AI IDE — discover and install components by description. ## Quick Links - Full Documentation: https://godui.design/llms-full.txt - Documentation Manifest: https://godui.design/docs.json - AI-Optimized Index: https://godui.design/ai-index.json - Sitemap: https://godui.design/sitemap.xml ## For LLMs To get the complete documentation in a single file, request: https://godui.design/llms-full.txt For structured access to individual pages with metadata: https://godui.design/docs.json For RAG (Retrieval Augmented Generation) systems: https://godui.design/ai-index.json --- Generated by aeo.js - Answer Engine Optimization for the modern web Learn more at https://aeojs.org