Sora UI

Changelog: Evolving Sora UI into Motion, Catalog, and UI

Blogchangelog
Axyl@axyl14103 min read
Changelog: Evolving Sora UI into Motion, Catalog, and UI

Sora UI started with a simple promise: copy-paste animation primitives built on Motion and GSAP that you install with shadcn, own in your repository, and ship without fighting opaque npm packages.

As the library expanded, we introduced accessible application controls powered by modern headless libraries, along with full-page layout showcases. However, generic terms like "Primitives" and "Components" began to blur:

  • Was an unstyled text animation a primitive or a component?
  • Was an assembled, multi-component layout template a component or a catalog showcase?
  • Where did accessible form controls (like checkboxes, dialogs, and popovers) fit in?

Today, we are formalizing the architecture with a crystal-clear taxonomy: Motion, Catalog, and UI.


The Three Product Pillars

Sora UI
├── Motion    (/docs/motion & /motion) — Unstyled animation building blocks & micro-interactions
├── Catalog   (/catalog)               — Ready-to-use animated layout showcases & example pages
└── UI        (/ui)                    — Base UI + Radix UI foundation infused with Sora Motion

1. Motion (/docs/motion or /motion)

Motion contains pure, unstyled animation building blocks. These are micro-interactions designed to plug into any React component or existing design system without bringing unwanted styling baggage.

2. Catalog (/catalog)

Catalog contains larger, pre-styled animated components and interactive layout showcases. Unlike raw primitives, Catalog items come fully styled with layouts, cards, typography, and motion ready to drop directly into your landings, hero sections, and feature showcases.

3. UI (/ui)

UI is our accessible application foundation, infusing @base-ui/react and radix-ui primitives with Sora spring physics, fluid micro-interactions, and full Tailwind CSS class overrides (cn(...)).


Multi-Foundation Architecture: Base UI + Radix UI

We've unified the registry build system so you can pull components from your preferred headless foundation without lock-in:

# Install a Base UI component
npx @soralabsoss/sora-cli add base-button

# Install a Radix UI component
npx @soralabsoss/sora-cli add radix-dialog

Every component includes comprehensive manual demos covering varied real-world use cases (forms, dialogs with drawers, custom styling variants) and full TypeScript typings.


A major taxonomy change shouldn't break existing bookmarks, inbound search results, or blog articles. We implemented comprehensive URL rewrite and permanent redirect rules in next.config.ts and build-doc-redirects.ts:

  • /components and /components/:path* $\rightarrow$ automatically redirected to /catalog and /catalog/:path*.
  • /docs/primitives and /docs/primitives/:path* $\rightarrow$ automatically redirected to /docs/motion and /docs/motion/:path*.
  • /motion and /motion/:path* $\rightarrow$ transparently rewritten to /docs/motion/:path* for concise public URLs.
  • LLM exports (/llms.mdx/*, /llms-catalog.mdx/*, /llms-ui.mdx/*) and MCP tools (search_docs, get_page) updated to support both old and new paths seamlessly.

Smarter Bookmarks & State Sync

We also upgraded the user bookmarking engine:

  • Automatic URL Canonicalization: If you previously bookmarked /components/sticky-scroll-cards or /docs/primitives/border-trail, your saved list automatically normalizes the entry to /catalog/sticky-scroll-cards and /docs/motion/border-trail.
  • Live Search Index Resolution: Bookmarked items resolve real-time titles, descriptions, and tag gradients from our cached search index.

What's Coming Next

With the taxonomy clear and the multi-foundation registry in place, we're expanding each pillar:

  1. More Motion Primitives: New particle shaders, 3D text deformations, and SVG path morphing effects.
  2. More Catalog Showcases: Full marketing landing layouts, interactive pricing calculators, and onboarding flows.
  3. Expanded UI Tier: Additional Base UI and Radix UI components with animated state transitions.

Browse the new Motion Primitives, explore the Catalog, or check out the UI Kit.