
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
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.
- Examples:
border-trail,text-effect,magnetic-cards,highlight,rolling-text,expandable-tabs. - Features: Tweakpane interactive prop controls, live-updating code previews, and strict
prefers-reduced-motioncompliance.
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.
- Examples:
sticky-scroll-cards,cursor-trail-reveal,scroll-chapters,scroll-gallery,infinite-scrolling-images. - Features: Fullscreen live preview mode, responsive viewport testing, and instant copy/CLI installation commands.
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 Choice: Choose between
@base-ui/reactandradix-uiimplementations to match your team's preferred headless stack. - Examples:
base/button,radix/dialog,radix/bottom-sheet,base/checkbox.
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:
Every component includes comprehensive manual demos covering varied real-world use cases (forms, dialogs with drawers, custom styling variants) and full TypeScript typings.
Zero Broken Links: Next.js Rewrites & 308 Redirects
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:
/componentsand/components/:path*$\rightarrow$ automatically redirected to/catalogand/catalog/:path*./docs/primitivesand/docs/primitives/:path*$\rightarrow$ automatically redirected to/docs/motionand/docs/motion/:path*./motionand/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-cardsor/docs/primitives/border-trail, your saved list automatically normalizes the entry to/catalog/sticky-scroll-cardsand/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:
- More Motion Primitives: New particle shaders, 3D text deformations, and SVG path morphing effects.
- More Catalog Showcases: Full marketing landing layouts, interactive pricing calculators, and onboarding flows.
- 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.