Originkit

A fast-moving hosted registry of expressive Framer/React motion components, sections, CLI delivery, and MCP retrieval—useful as an exact-effect source, but not a bulk dependency or proof that every delivered component is licensed, accessible, performant, and production-ready.

Routing Summary

Use Originkit after the visual job is named and ordinary local primitives are insufficient: a particular kinetic-text effect, cursor treatment, animated gallery, canvas field, background, border, or marketing flourish. Search the registry, select one exact item, inspect its current delivered source and terms, then retokenize and prove it inside the target app. Keep Radix/Base/shadcn for interaction semantics, Motion or GSAP for owned choreography, and Three.js/R3F for application-owned runtime 3D.

Do not route “make it premium” directly to bulk installation. The saved post's “250+ animations” was not a current inventory fact. On 2026-08-12 the live site listed 160 components: 61 text, 22 image-gallery, 19 cursor, 17 animation, 14 image, 12 background, eight interactive, five button, and two border items. The official CLI registry listed those 160 plus 48 sections, for 208 entries. The publisher's launch note described 250 as a future target, and the saved video itself showed a smaller beta catalog. Engagement—1,070 likes and 1,994 bookmarks—correctly raised the source's review priority but did not verify its count, rights, or implementation quality.

What The Product Actually Provides

Originkit is a beta product with four related delivery surfaces:

Surface Current contract Important boundary
Website Live previews, props, presets, categories, component and section browsing A preview and copy action are discovery and delivery surfaces, not acceptance proof.
Framer Framer-first code components with property controls and layout annotations Framer compatibility does not prove plain-React semantics, SSR, accessibility, or target performance.
Hosted MCP list_components, get_component, search, and fetch at https://mcp.originkit.dev/mcp Source retrieval requires OAuth or an API key and consumes shared delivery quota. MCP makes retrieval callable; it does not make source trusted.
CLI originkit@0.2.23 can list/search and deliver source into a React/Next.js repo The CLI is MIT. The hosted component registry is a separate source and licensing boundary.

The registry currently mixes Motion, GSAP, canvas, WebGL, and composition. The public metadata identified framer-motion on 52 components, GSAP on 13, Three.js on seven, OGL on two, and smaller Matter.js, D3-Geo, and threejs-components routes. Forty-four entries compose other registry items. That diversity is why Originkit is a source shelf rather than one coherent runtime abstraction.

Exact-Source Findings

The CLI is inspectable; the registry is not the same artifact

The public npm package originkit@0.2.23 is a four-file MIT tarball whose compiled CLI implements registry browsing, authenticated delivery, path and package-spec validation, asset-host allowlisting, alias rewriting, optional dependency installation, --dry-run, --no-deps, and overwrite controls. Its OAuth flow uses PKCE, listens only on 127.0.0.1, and writes the home auth file with mode 0600.

The package declares landerdevelopers/originkit as its repository, but that repository returned HTTP 404 during this review. The package therefore exposes compiled implementation evidence but no reachable source tree, tests, CI, or release history. The project-local .originkit/credentials.json write does not set an explicit restrictive file mode, although the directory is added to .gitignore; prefer OAuth or an environment secret and verify local file permissions. Dependency installation uses registry-supplied package names and package-manager lifecycle scripts, so inspect before running it.

The MIT grant in the npm tarball clearly covers the CLI package. No public component-code license or usable terms page was found in the live site, sitemap, package, or inaccessible declared repository. The website's metadata uses “open source” as a keyword, but that is not a license grant. Record the terms attached to the exact delivered item before copying it into a distributable project; otherwise borrow the interaction principle and rebuild it on owned primitives.

Representative motion audit

The live preview loads public, content-addressed component modules. Two representative modules were inspected rather than inferring quality from the gallery:

  • Black Hole (c18e21c78c00abcb…, 12,910 bytes) is a two-canvas, 1,000-particle animation. It caps DPR at 1.5, disconnects its ResizeObserver, and cancels its latest animation frame on effect cleanup. It still runs continuously without reduced-motion, visibility, or offscreen suspension and has no semantic/static fallback. It is a marketing visual, not an unqualified app primitive.
  • Scroll Text Reveal (610ffb926213e0c7…, 22,455 bytes) splits text and drives character/word/line styles from a manually coalesced global scroll listener. It removes scroll/resize listeners, cancels its pending frame, disconnects its observer, stops Motion animations, and reverts its stored split on cleanup. It imports a remote GSAP/SplitText bundle and exposes a semantic tag choice, but contains no reduced-motion branch; DOM splitting, screen-reader output, remote dependency authority, resize/replay behavior, and target-page scroll cost require direct proof.

These samples show real craft and partial lifecycle discipline. They also prove that gallery quality is heterogeneous and component-specific. One strong cleanup implementation does not certify the other 159 components.

Adoption Procedure

  1. Name the desired effect and why it helps the page hierarchy or interaction.
  2. Use npx originkit@0.2.23 list --json or search; do not install globally.
  3. Record the exact catalog item, current terms, delivery time, dependencies, composed registry files, and returned source hashes.
  4. Use a clean branch/worktree and an explicit project path. Fetch with --dry-run --no-deps first; a live fetch may still consume quota.
  5. Inspect every written file and dependency before allowing package-manager lifecycle scripts. Do not pass secrets on the command line.
  6. Retokenize colors, typography, density, breakpoints, copy, and motion. Keep the target design system—not the catalog demo—as visual authority.
  7. Add semantics, focus/keyboard/touch behavior, reduced motion, static or low-power fallback, offscreen/visibility suspension, and teardown wherever the source does not provide them.
  8. Measure bundle transfer, main-thread/frame cost, GPU/battery impact, layout shift, mobile behavior, and interaction latency in the real composition.
  9. Preserve a local source/provenance receipt and verify visual, accessibility, performance, lint, type, build, and browser behavior before acceptance.

Failure Modes

  • Treating a future catalog goal as a current count.
  • Equating an MIT CLI with a license for server-delivered component source.
  • Connecting the MCP and assuming its outputs are trusted or automatically compatible with the target stack.
  • Installing dependencies before examining the exact payload and lifecycle implications.
  • Shipping perpetual canvas/WebGL motion without reduced motion, offscreen suspension, low-power fallback, and measured frame cost.
  • Mixing several showcase effects until the library owns the page's visual identity.
  • Depending on rapidly drifting README, site, CLI, quota, and catalog claims without a dated receipt.

Timeline

  • 2026-08-12 | Recovered and inspected the saved X video, identified Originkit, replayed the live site and integration docs, enumerated the current registry, inspected the public CLI tarball and two content-addressed preview modules, corrected the 250+ claim to 160 components plus 48 sections, and admitted Originkit as a guarded exact-effect source rather than a bulk or automatically open-source dependency. Source: X 2081620717775237573; Originkit live site/registry; npm originkit@0.2.23