Motion parts
for Expo.
Animated components you copy into your app with one command.
- Activity Rings
- Aperture Card
- Aurora Veil
- Bar Chart
- Beam Button
- Bloom Menu
- Confetti Burst
- Deckfall
- Dock Bar
- Donut Chart
- Drift Marquee
- Elastic Slider
- Expand Card
- Fan Stack
- Flip Ledger
- Fold Panel
- Gauge Meter
- Glint Card
- Grain Drift
- Heat Grid
- Hold to Confirm
- Like Burst
- Line Chart
- Liquid Tabs
- Magnet Button
- Marker Highlight
- Morph Icon
- Morph Sheet
- Odometer
- Parallax Carousel
- Parallax Header
- Press Jelly
- Pulse Toggle
- Radar Chart
- Ripple Field
- Scramble Text
- Scroll Stack
- Shine Text
- Skeleton Sweep
- Slide to Confirm
- Stat Card
- Status Button
- Story Card
- Tilt Deck
- Toast Stack
- Two-Step Button
- Typewriter
- Word Cascade
- Word Rotator
- Onboarding Flow
- Paywall
- Player Sheet
- Profile Hero
See it move.
Every tile below is the real component running in your browser. Touch it, drag it, tap it.
Built like the rest of your app.
Native motion primitives, your own source files, and the details done for you.
On the UI thread
Gestures, springs and shaders run as worklets, so a busy JavaScript thread never stalls the animation.
Copied, not installed
The CLI writes TypeScript source into your project. You own the code and can change anything.
Accessible by default
Every component has a reduced-motion version, screen-reader labels and roles, and 44 pt touch targets.
One design language
Colours, spacing, type and three springs come from shared tokens. Brand everything with one provider.
How it works
Two commands to motion.
- InitAdds the shared tokens and motion presets, and installs Reanimated.
- AddCopies the components you pick and installs their native dependencies with
expo install, so versions always match your SDK. - Make it yoursIt is your code now. Restyle it, rename it, ship it.
MCP server
Built for AI agents.
Kinetik ships a Model Context Protocol server. Claude, Cursor and any MCP client can search the catalogue, read the source and plan the install, then add components the right way: SDK-matched dependencies, your theme, reduced motion intact.
Terminal
claude mcp add kinetik-ui -- npx -y kinetik-ui mcp.cursor/mcp.json
{
"mcpServers": {
"kinetik-ui": { "command": "npx", "args": ["-y", "kinetik-ui", "mcp"] }
}
}Your MCP config (Claude Desktop, Windsurf, …)
{
"mcpServers": {
"kinetik-ui": { "command": "npx", "args": ["-y", "kinetik-ui", "mcp"] }
}
}Also for agents: /llms.txt, a Markdown version of every page, and npx kinetik-ui agents to teach your project's AGENTS.md.
list_componentsEvery component and screen template, by category.search_componentsFind components by what they do: "swipe cards", "loading".get_componentUsage guide, accessibility notes, dependencies and source.get_install_planThe exact commands and setup notes for your project.get_tokensPalettes, spacing, type, shadows and the motion presets.
Eight kinds of motion.
49 components and 4 screen templates, each with a live demo, a props table and notes on when not to use it.
01BackgroundsAurora Veil · Grain Drift · Ripple Field302CardsAperture Card · Deckfall · Drift Marquee …1203InteractionBeam Button · Bloom Menu · Elastic Slider …1304TextMarker Highlight · Odometer · Scramble Text …705NavigationDock Bar · Morph Sheet · Parallax Header306FeedbackConfetti Burst · Skeleton Sweep · Toast Stack307DataActivity Rings · Bar Chart · Donut Chart …808Screen templatesOnboarding Flow · Paywall · Player Sheet …4
Make your app move.
Copy the first component in under a minute.
$ npx kinetik-ui add glint-card