# Skecher UI

Copy polished React motion components with live previews, source code, dependencies, and shadcn registry commands.

## Primary Pages

- [Home](https://skecher-ui.com/)
- [Component Docs](https://skecher-ui.com/docs)
- [Project Showcase](https://skecher-ui.com/docs/project-showcase)
- [Complete LLM Context](https://skecher-ui.com/llms-full.txt)

## Usage

Skecher UI is a source-owned shadcn registry. Use each component's AI context page for its install command, dependencies, implementation guidance, usage example, and complete-source registry link. Keep model credentials and provider calls in the consuming application's server boundary.

## Components

- [Streaming Text](https://skecher-ui.com/llms/streaming-text): A soft word-by-word text reveal for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.
- [Morphing Text](https://skecher-ui.com/llms/text-morphing): A text morphing effect for hero copy, onboarding moments, empty states, and editorial interfaces that need a polished animated entrance.
- [Liquid Glass Social](https://skecher-ui.com/llms/liquid-glass-social): A polished animated UI primitive for expressive product interfaces.
- [Image Glide](https://skecher-ui.com/llms/image-glide): A clean image interaction component with pointer depth, soft image transitions, and a compact thumbnail rail.
- [Image Density Grid](https://skecher-ui.com/llms/image-density-grid): A percentage-controlled image grid that reflows every frame into a denser or sparser layout with layout motion, soft blur, and a temporary glow during density changes.
- [Morphing Action Dock](https://skecher-ui.com/llms/morphing-action-dock): A floating action dock that merges into one compact surface and splits into contextual actions on hover, focus, or pin.
- [Gooey Toolbar](https://skecher-ui.com/llms/gooey-toolbar): A polished animated UI primitive for expressive product interfaces.
- [Dock](https://skecher-ui.com/llms/dock): A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing.
- [Liquid Morphology](https://skecher-ui.com/llms/liquid-morphology-slideshow): A WebGL image slideshow for landing-page backgrounds with liquid glass, frost, ripple, plasma, and timeshift shader transitions.
- [Magazine Scroller](https://skecher-ui.com/llms/magazine-scroller): A polished animated UI primitive for expressive product interfaces.
- [Ai Chat Box](https://skecher-ui.com/llms/ai-chat-box): A morphing AI chat composer with configurable models, actions, messages, labels, and controlled state hooks.
- [AI Orb](https://skecher-ui.com/llms/ai-orb): A responsive circular Three.js plasma orb with a configurable surface, strand shape, motion, and pointer-driven depth.
- [Dither Credit Card](https://skecher-ui.com/llms/dither-credit-card): A responsive payment card with an animated two-color dither field, selectable pointer physics, and carefully scaled card details.
- [Snap Text](https://skecher-ui.com/llms/snap-text): A spring-driven scroll-snap narrative with a transitioning portrait prefix, curved outlined rows, and a compact sequence counter.
- [Scroll Reveal Text](https://skecher-ui.com/llms/scroll-reveal-text): A sticky scroll narrative that progressively fills muted multiline text with a crisp foreground color using clip-path.
- [Sliding Panel](https://skecher-ui.com/llms/sliding-panel): A generic keyed-content viewport for direction-aware transitions between tabs, steps, filters, or any ordered React view.
- [Interactive Grid Hero](https://skecher-ui.com/llms/interactive-grid-hero): A full-page field of responsive square cells that softly round and brighten within a focused radius around the cursor.
- [Morph Stack](https://skecher-ui.com/llms/morph-stack): A composable three-plate stack that fans into a spring-driven perspective view on hover.
- [Expandable Mobile Nav](https://skecher-ui.com/llms/expandable-mobile-nav): A bottom-anchored navigation shell with expandable labels and composable per-item panels.
- [Velocity Tabs](https://skecher-ui.com/llms/velocity-tabs): An accessible tab selector with a spring-driven indicator that stretches and softens in response to movement velocity.
- [Add to Cart](https://skecher-ui.com/llms/add-to-cart): An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.
- [Apple Mail Tabs](https://skecher-ui.com/llms/apple-mail-tabs): A colorful mail category selector inspired by Apple Mail, with compact inactive tabs and an expanded active label.
- [Morph Menu](https://skecher-ui.com/llms/morph-menu): A measured action menu that morphs between compact and expanded states with configurable directional movement.
- [Spring Slider](https://skecher-ui.com/llms/spring-slider): A pill-track slider with a spring-driven fill and thumb, tick markers for each step, and a tooltip that blurs in and out as you drag.