Upcoming development schedule, milestones, and release strategy for Sora UI animated components, Base UI foundations, RTL internationalization, Radix UI suite, and Headless UI adapters.
Made by AxylThe Sora UI Roadmap outlines upcoming milestones, priority tiers, and animation engineering goals. Our architecture follows a phased rollout prioritizing Base UI first, followed by Comprehensive RTL (Right-to-Left) Support across all existing registries, expanding into Agent-Native Semantic Composition Enrichment, scaling the Radix UI suite, and growing into other headless libraries and multi-framework ecosystems.
We are completing all 13 core Base UI animated components, followed by Phase 2: Comprehensive RTL Support prioritizing retrofitting all existing registry components. Radix UI animation primitives and multi-framework expansions follow.
Every Sora UI component is benchmarked against strict physics, accessibility, and performance metrics.
Animations run entirely on the GPU compositor thread (transform, opacity). Zero main-thread interruption.
Animations change composited values from the main thread with smooth micro-interaction orchestration.
S or A-tier animations requiring upfront DOM measurements (e.g. FLIP layout morphing, elastic progress).
Animations trigger paint operations (colors, shadows, SVG paths, and theme transitions).
Zero tolerance in Sora UI: No layout recalculations or synchronous DOM thrashing allowed.
Accessible button with physics-based spring scaling on hover/tap and CVA variants.
Animated checkbox with SVG path morphing checkmark and elastic pop feedback.
Native input with familiar shadcn/ui styling and a Motion-powered caret.
Modal dialog with backdrop blur fade and scale-in spring transition.
Accessible alert dialog modal with 3D perspective spring transitions, customizable size variants, and media slot.
Smooth height layout animation with rotating chevron and keyboard navigation.
Context menu with spring scale physics, cascaded submenus, and checkable items.
Collision-aware floating dropdown with spring scale physics, cascaded submenus, and checkable items.
Elastic filling progress bar with smooth indeterminate shimmer and numeric ticker.
Radio group with shared layoutId gliding active circle indicator.
Animated select combobox dropdown with floating active pill and filter transitions.
Toggle switch with Motion spring layout physics, size variants, and track icon slots.
Sliding background indicator pill with cross-fading tab panels.
Stacked toast notification queue with interactive swipe-to-dismiss gesture physics.
Multi-item toggle group with morphing border bounds and tactile feedback.
Micro scale-fade tooltip with dynamic arrow position tracking and spring entrance physics.
Prioritized RTL retrofitting across all existing components in the registry (Base UI suite, Radix UI suite, and Motion Primitives).
Automatic motion mirroring and directional spring physics: dynamic inverted X-axis transforms, swipe-to-dismiss, and drawer gesture flings.
Standardizing Tailwind CSS logical utilities (start/end, ps/pe, ms/me, border-s/border-e) across all registry templates.
Collision-aware right-to-left cascading submenus, popover anchor realignment, and dynamic arrow direction for context & dropdown menus.
Radix primitive slot button with Motion hover scale physics.
Radix checkbox with animated check icon path and focus ring.
Native input with shadcn/ui styling and a Motion-powered caret.
Radix dialog modal overlay with spring entrance animation.
Accessible alert dialog modal with 3D perspective spring transitions and media slot.
Radix accordion with smooth collapsible height animation and rotating chevron.
Radix context menu with spring scale physics, cascaded submenus, and checkable items.
Collision-aware floating dropdown menu with spring scale physics and cascaded submenus.
Toggle switch with Motion spring layout physics, size variants, and track icon slots.
Micro scale-fade tooltip with dynamic arrow position tracking and spring entrance physics.
Mobile-first draggable bottom sheet drawer with inertia fling dismiss (Redesign planned).
Floating popovers with directional micro spring transitions.
Interactive controls with shared layout sliding indicator and drag physics.
Accessible notification queue with interactive gesture physics.
Adobe's enterprise-grade accessible components infused with Sora Motion spring physics.
State machine-driven headless components with universal motion presets.
Clean adapters for Tailwind Headless UI and Ariakit primitives.
Dedicated component ports for Vue 3 (Motion for Vue) and vanilla JS web components.
Every Base UI, Radix UI, and Motion primitive is completely free to use in personal and commercial projects. Copy-paste source code directly into your app.
Our component development follows a structured roadmap designed to provide complete, production-ready animated primitives:
Base UI provides an unstyled, highly accessible component foundation designed for modern React. We are systematically building Motion-powered animated variants for all 14 core Base UI components:
/ui/base/button) — Physics spring hover/tap scaling and comprehensive CVA variants. (Completed)/ui/base/checkbox) — Animated checkmark path morphing and elastic pop feedback. (Completed)/ui/base/input) — Native input semantics with a Motion-powered caret and reduced-motion fallback. (Completed)/ui/base/dialog) — Smooth backdrop blur with scale-in spring physics. (Completed)/ui/base/alert-dialog) — 3D perspective spring rotation, customizable sizes, and media slots. (Completed)/ui/base/accordion) — Smooth layout-height morphing and spring chevron rotation. (Completed)/ui/base/context-menu) — Spring scale physics with cascaded submenu slide transitions. (Completed)/ui/base/dropdown-menu) — Collision-aware floating popovers with spring scale physics and cascaded submenus. (Completed)/ui/base/tooltip) — Micro scale-fade tooltip with dynamic arrow position tracking. (Completed)/ui/base/switch) — Toggle switch with Motion spring layout physics, size variants, and track icon slots. (Completed)layoutId gliding active indicator. (Planned)Comprehensive Right-to-Left (RTL) internationalization is our immediate next focus. We are prioritizing retrofitting all existing components in the Sora UI registry to provide first-class native support for Arabic, Hebrew, Persian, and Urdu locales:
start, end, ps, pe, ms, me, border-s, border-e, inset-inline-*) replacing physical left/right constraints.x: -20 vs x: 20, drawer fling physics, and gesture dismissal).layoutId), and timeline progress tracks.Following our RTL rollout, we are prioritizing transforming the UI registry content into a high-density, agent-grounded knowledge base. This equips AI coding assistants (via Sora MCP and agent tools) with deep semantic context rather than just raw JSX strings:
intent, role, a11yConstraints, motionEngine, compositionRules).render={<Component />} pattern over legacy Radix asChild, focus trap synchronization, and ESC handlers).registry-item.json.meta.agentMetadata and published public/r/*.json artifacts so MCP can access it through component info without parsing JSX.Status: Foundation complete. Phase 3 now provides the semantic contract and MCP validation surface that agents can consume. It does not yet automatically plan a component tree, select recipes, generate files, or run deep runtime accessibility and motion audits.
The next automation milestone is:
Our Radix UI tier infuses Radix Primitives with Sora Motion spring dynamics and layout orchestration:
/ui/radix/button) — Radix slot button with Motion hover scale physics./ui/radix/checkbox) — Animated checkmark path morphing with elastic pop feedback./ui/radix/input) — Native input semantics with a Motion-powered caret and reduced-motion fallback./ui/radix/dialog) — Modal overlay with smooth spring entrance and backdrop blur./ui/radix/alert-dialog) — 3D perspective spring rotation, customizable sizes, and media slots./ui/radix/accordion) — Smooth layout-height morphing and spring chevron rotation./ui/radix/context-menu) — Spring scale physics with cascaded submenu slide transitions./ui/radix/dropdown-menu) — Collision-aware floating popovers with spring scale physics./ui/radix/switch) — Toggle switch with Motion spring layout physics, size variants, and track icon slots./ui/radix/tooltip) — Micro scale-fade tooltip with dynamic arrow position tracking.To provide universal flexibility across different architecture requirements:
Every component in the Sora UI registry is engineered for 60/120 FPS performance and benchmarked across four key animation categories:
| Tier | Render Pipeline Work | Animation Characteristics | Performance Standard |
|---|---|---|---|
| Tier S | Compositor Only | Runs entirely on the GPU compositor thread (transform, opacity). | Zero main-thread interruption, 120 FPS capable, full reduced-motion branch. |
| Tier A | Main-Thread Composited | Changes composited values from the main thread with micro-orchestrations. | Zero layout shifts, keyboard and focus synchronized. |
| Tier B | Measured Animation | Requires upfront DOM measurements (e.g. FLIP layout morphing, bounds calculation). | Smooth FLIP transitions without layout thrashing. |
| Tier C | Paint Triggering | Triggers paint operations (colors, shadows, SVG paths, background transitions). | Non-intrusive, isolated repaints. |
| Tier D / F | Layout & Thrashing | Interleaved DOM reads/writes or layout recalculations (width, height, top/left). | 0% Zero-Tolerance: Strictly eliminated in Sora UI. |
You can audit any component or page locally in your development environment for free using the MotionScore CLI. The --no-upload flag runs a headless Chromium browser locally on your machine with unlimited, unmetered audits:
Run an unmetered local audit on your active development server without consuming cloud credits:
Audit specific viewport layouts to catch responsive animation regressions:
The audit evaluates your component across four core render pipeline signals:
width, height, top, left) vs GPU-accelerated transforms.Have an animation idea or a specific headless UI component you'd like to see prioritized? Open an issue or join our community discussions on GitHub.
Built by Axyl. A motion-first component registry for React.
Last updated: 9/21/2026