Skip to content
IndexDesign corpus
Strong pickMotion & InteractionAnimated Component Sets
Motion & InteractionComponent LibraryRegistryAnimation LibraryFreeFramer

Originkit

180 animated web components plus 48 page sections, for Framer, React and MCP

Visit resourceDocsRegistry
Aboutoriginkit.dev

Originkit is a free registry of 180 animated components across nine categories (Text 62, Image Gallery 22, Cursor 20, Animations 17, Background 17, Image 15, Interactive Elements 13, Button 12, Border 2) plus 48 ready-made page sections (37 heroes, 4 features, 3 pricing, 2 CTA, 2 footer). Every component is authored Framer-first — default export, framer-motion, @framerSupportedLayoutWidth annotations — and can be pasted onto a Framer canvas as a code component, copied as .tsx, installed with its own CLI, or fetched by an agent over a hosted MCP server. The MCP server exposes four tools: list_components, get_component (adapts source to framer/react/nextjs/vite), search, and fetch. Aimed at people building marketing sites and landing pages who want awwwards-style motion without writing the animation themselves.

Install
npx originkit@latest add <component-name>
For an agent

Use the MCP server at https://mcp.originkit.dev/mcp rather than scraping the site — originkit.dev's robots.txt explicitly Disallows ClaudeBot and GPTBot, so a plain fetch returns 403 and you will get nothing. Call list_components with a category filter (text, button, border, image, image-gallery, cursor, interactive-elements, animation, background-animation) then get_component with stack=nextjs to get source with 'use client' already applied; the raw sources are Framer-first, so outside Framer the framer-motion property-control imports resolve to a no-op shim. Treat these as decoration for marketing pages only — they are heavy canvas/WebGL and cursor effects with no accessibility or reduced-motion story, so never put them inside an app shell or a form.

Why it is here. It is one of very few animated-component registries that ships a real MCP server with stack adaptation built in, and the 48 hero/pricing/footer sections make it a landing-page seed rather than just a bag of effects.

Install command, framework, licence and component list.
Components it ships180 total
Text EffectCustom CursorHover EffectButtonImage GalleryImageCarouselMarqueeTypewriter TextScroll RevealParticle BackgroundAnimationHeroPricing TableFooterSection
Helps you build3
HomepageFeaturesPricing Website
Templates48
Notable for
  • 180 components, 48 page sections
  • MCP server with list_components/get_component/search/fetch
  • Framer-first authoring, pastes onto a Framer canvas
  • 37 animated hero sections
  • robots.txt blocks ClaudeBot and GPTBot
Provenance

Verified 2026-08-15. HTTP 200. https://www.originkit.dev/ (403 to WebFetch/ClaudeBot; read via curl + decoded Next.js RSC payload), https://www.originkit.dev/sitemap.xml, https://www.originkit.dev/robots.txt, https://www.originkit.dev/intro, https://www.originkit.dev/integrations, Next.js chunk JS for the MCP endpoint and CLI, https://registry.npmjs.org/originkit

Related resourcesMotion & Interaction