# Kinetik UI > Animation and effect components for Expo and React Native, built on Reanimated, Gesture Handler and Skia. Copy them into your app with one command. Components are copied into the app as TypeScript source (shadcn-style registry). Install with `npx kinetik-ui add `, which runs `npx expo install` so native dependency versions match the Expo SDK. Needs the New Architecture (Reanimated 4), Gesture Handler and, for some components, Skia. Every component honours reduced motion and reads colours from `useKinetikTheme()`. Agents can also connect to the MCP server: `npx kinetik-ui mcp` (tools: list_components, search_components, get_component, get_install_plan, get_tokens). ## Docs - [Getting started](https://kinetik-ui.dev/docs/getting-started.md): requirements, `init`, `add`, theming and the CLI. - [Full docs in one file](https://kinetik-ui.dev/llms-full.txt): every component's guide, props and accessibility notes. ## Components - [Aurora Veil](https://kinetik-ui.dev/components/aurora-veil.md): A slow, flowing aurora drawn by a fragment shader, for screen and hero backgrounds. - [Grain Drift](https://kinetik-ui.dev/components/grain-drift.md): A drifting four-colour mesh gradient under moving film grain, drawn by a shader. - [Ripple Field](https://kinetik-ui.dev/components/ripple-field.md): A dot-grid surface that ripples outward from every touch, drawn by a shader. - [Aperture Card](https://kinetik-ui.dev/components/aperture-card.md): A card closed by a camera-like iris whose blades turn open to reveal the content. - [Deckfall](https://kinetik-ui.dev/components/deckfall.md): A stack of cards swiped away one at a time, with the cards behind rising into place. - [Drift Marquee](https://kinetik-ui.dev/components/drift-marquee.md): An endless row that drifts on its own; drag it to scrub, fling it, and the items lean into the speed. - [Expand Card](https://kinetik-ui.dev/components/expand-card.md): A row that opens into a card: the thumbnail grows into a wide picture and the details rise in beneath it. - [Fan Stack](https://kinetik-ui.dev/components/fan-stack.md): A loose pile of pictures that fans out like a hand of cards; tap one to lift it out of the fan. - [Flip Ledger](https://kinetik-ui.dev/components/flip-ledger.md): A two-sided card that turns over in 3D, sized to the taller of its faces. - [Fold Panel](https://kinetik-ui.dev/components/fold-panel.md): A panel that unfolds in place: the body springs to its measured height and drifts in behind it. - [Glint Card](https://kinetik-ui.dev/components/glint-card.md): A card with a specular glint that slides with the finger or the tilt of the device. - [Parallax Carousel](https://kinetik-ui.dev/components/parallax-carousel.md): A paging carousel whose pictures drift inside their cards as they slide, with the centre card brought forward. - [Scroll Stack](https://kinetik-ui.dev/components/scroll-stack.md): A scroll view whose cards pin to the top and pile up, the ones beneath shrinking and dimming as more land. - [Story Card](https://kinetik-ui.dev/components/story-card.md): Full-bleed stories with progress bars: tap to step, hold to pause, each picture drifting closer as it plays. - [Tilt Deck](https://kinetik-ui.dev/components/tilt-deck.md): A card that tilts in 3D under the finger, with parallax layers and a drifting floor shadow. - [Beam Button](https://kinetik-ui.dev/components/beam-button.md): A button with a beam of light running around its edge, leaving a soft glow that brightens on press. - [Bloom Menu](https://kinetik-ui.dev/components/bloom-menu.md): A floating action button that blooms: the plus turns, a halo opens and actions spring out one by one. - [Elastic Slider](https://kinetik-ui.dev/components/elastic-slider.md): A slider that stretches like rubber past its ends and springs back, with a value bubble. - [Hold to Confirm](https://kinetik-ui.dev/components/hold-to-confirm.md): Press and hold to confirm: a ring fills around the icon and turns into a check mark. - [Like Burst](https://kinetik-ui.dev/components/like-burst.md): A like button whose heart pops with a ring of light and a spray of sparks while the count rolls over. - [Liquid Tabs](https://kinetik-ui.dev/components/liquid-tabs.md): A tab bar whose indicator flows like liquid, stretching, thinning and melting into place. - [Magnet Button](https://kinetik-ui.dev/components/magnet-button.md): A button that leans toward the finger from a field around it and presses on release. - [Morph Icon](https://kinetik-ui.dev/components/morph-icon.md): An icon button whose glyph reshapes between two states: menu to close, play to pause, plus to check. - [Press Jelly](https://kinetik-ui.dev/components/press-jelly.md): A primary button that squashes like jelly under the finger and wobbles back on release. - [Pulse Toggle](https://kinetik-ui.dev/components/pulse-toggle.md): A switch whose thumb stretches mid-flight, lands as a rounded square and pulses when it turns on. - [Slide to Confirm](https://kinetik-ui.dev/components/slide-confirm.md): Drag the knob across to confirm. A trail follows it, light sweeps the track, and it lands as a check. - [Status Button](https://kinetik-ui.dev/components/status-button.md): A button that folds into a spinner while it works, then opens in green with a traced check, or shakes in red. - [Two-Step Button](https://kinetik-ui.dev/components/two-step-button.md): A button that asks before it acts: it splits into Cancel and Confirm, and the question closes by itself. - [Marker Highlight](https://kinetik-ui.dev/components/marker-highlight.md): A paragraph where key phrases get marked as if with a highlighter, the ink sweeping in phrase by phrase. - [Odometer](https://kinetik-ui.dev/components/odometer.md): A number whose digits roll like a mechanical counter, forward or back, the long way round. - [Scramble Text](https://kinetik-ui.dev/components/scramble-text.md): Characters cycle through random glyphs and lock into place from left to right. - [Shine Text](https://kinetik-ui.dev/components/shine-text.md): A line of text with a band of light sweeping across the glyphs. - [Typewriter](https://kinetik-ui.dev/components/typewriter.md): Text typed out with a human rhythm; several phrases are typed, held, erased and replaced in turn. - [Word Cascade](https://kinetik-ui.dev/components/word-cascade.md): A paragraph that arrives word by word, each word rising into place after the last. - [Word Rotator](https://kinetik-ui.dev/components/word-rotator.md): A line with one word that keeps changing, rolling out and in letter by letter while its gap springs to fit. - [Dock Bar](https://kinetik-ui.dev/components/dock-bar.md): A floating bottom navigation bar whose items swell under the finger like a dock. - [Morph Sheet](https://kinetik-ui.dev/components/morph-sheet.md): A bottom sheet with snap points that morphs from a floating card into a full sheet and blurs the screen behind. - [Parallax Header](https://kinetik-ui.dev/components/parallax-header.md): A scroll view whose header artwork scrolls at half speed, stretches on pull and hands off to a compact bar. - [Confetti Burst](https://kinetik-ui.dev/components/confetti-burst.md): A burst of confetti drawn as one Skia Atlas, with physics on the UI thread. - [Skeleton Sweep](https://kinetik-ui.dev/components/skeleton-sweep.md): Loading placeholders with one band of light sweeping across the whole layout. - [Toast Stack](https://kinetik-ui.dev/components/toast-stack.md): Notifications that stack like cards, fan out on tap and swipe away sideways. - [Activity Rings](https://kinetik-ui.dev/components/activity-rings.md): Concentric progress rings that wind up one after another; a ring past its goal laps itself. - [Bar Chart](https://kinetik-ui.dev/components/bar-chart.md): Bars that spring up in a wave; drag across them and the one under the finger stays bright with its value. - [Donut Chart](https://kinetik-ui.dev/components/donut-chart.md): A ring of rounded slices that sweeps in; tap a slice to bring it forward and read its share in the middle. - [Gauge Meter](https://kinetik-ui.dev/components/gauge-meter.md): A dial that swings to its value on a spring while the figure counts up beneath it. - [Heat Grid](https://kinetik-ui.dev/components/heat-grid.md): A calendar grid of days shaded by activity; the cells pop in as a wave and a drag reads any day. - [Line Chart](https://kinetik-ui.dev/components/line-chart.md): A smooth line chart that draws itself in; drag across it and a guide, a dot and a label follow the finger. - [Radar Chart](https://kinetik-ui.dev/components/radar-chart.md): A radar chart whose shapes grow from the centre and morph to new values; tap the legend to compare. - [Stat Card](https://kinetik-ui.dev/components/stat-card.md): A key figure that counts up, with a change pill and a sparkline that draws itself in. - [Onboarding Flow](https://kinetik-ui.dev/components/onboarding-flow.md): A paged welcome flow: spotlit illustrations that drift with the swipe, story-style progress, a button that grows. - [Paywall](https://kinetik-ui.dev/components/paywall.md): A subscription screen with a drifting gradient hero, rolling plan prices and confetti on purchase. - [Player Sheet](https://kinetik-ui.dev/components/player-sheet.md): A music library whose mini player opens into a full player: tilting cover, elastic scrubber. - [Profile Hero](https://kinetik-ui.dev/components/profile-hero.md): A profile screen: parallax cover, follow button with a rolling count, liquid tabs and loading skeletons. ## Registry - [registry.json](https://kinetik-ui.dev/r/registry.json): shadcn-compatible index; each item at /r/.json with full source.