Browse and import animated UI components from Originkit, a free library of 50 animated components. Browse by category or search term without an API key; fetch component source code (React, Next.js, Vite, Framer) with a free key from originkit.dev.
Browse and import animated UI components from Originkit, a free library of 50 animated components for modern websites.
50 animated components across 6 categories:
| Category | Examples |
|---|---|
| Interactive Elements | Black Hole, Fluid Trail, SVG Particles, Kinetic Grid |
| Image Gallery | Spiral Images, Coverflow Carousel, Swipe Stack, Infinity Canvas |
| Text | Smoky Text, Text Morph, Scramble Text, Weight Hover |
| Animation | Pixel Reveal, Star Burst, Particle Tunnel, Glitter Wrap |
| Background Animation | Snow Fall, Blinking Squares, Character Waves |
| Button | Emoji Burst, Link Preview |
assistant plugins install originkitFor persistence across sessions, add the key to the plugin's config.json:
{ "apiKey": "cmp_live_..." }
config.json: { "apiKey": "cmp_live_..." }originkit_setup with action "set" or just fetch a component and you'll be promptedoriginkit_setup with action to clear the session key"reset"Browse without a key. Ask your assistant:
"Browse Originkit components" "Search Originkit for particle effects" "Show me Originkit's text animation components"
You can also filter by category: interactive-elements, image-gallery, text, animation, background-animation, button.
Once you find one you like, ask your assistant to fetch it:
"Get the smokytext component from Originkit" "Fetch the blackhole component for Vite with Tailwind"
Specify your stack (react, nextjs, vite, framer), styling (css, tailwind, cssmodules), and TypeScript preference. Defaults are React + CSS + TypeScript.
If you have not set up an API key yet, you will be prompted to enter one. The key is saved automatically for future fetches.
Get a free key from originkit.dev:
cmp_live_...)Then ask your assistant:
"Set up my Originkit API key"
"Check my Originkit API key status" "Reset my Originkit API key"
Each API key allows 10 component fetches per day, shared with website copies. The limit resets at midnight UTC. Browsing the catalog is unlimited and does not count against the fetch limit.
| Tool | Purpose | API key |
|---|---|---|
originkit_browse | List and search the component library | Not required |
originkit_get | Fetch a component's source code | Required |
originkit_setup | Check, set, or reset the API key | N/A |
The plugin talks to Originkit's MCP server (https://mcp.originkit.dev/vellumai) using JSON-RPC 2.0 with bearer token auth. The component catalog (metadata only, no source code) is bundled with the plugin so browsing is instant and key-free. Source code is fetched on demand from the MCP server.
Components are created by Originkit. Visit their site for live demos and the full component gallery.