Upcoming development schedule, milestones, and release strategy for Sora UI animated components, Base UI foundations, 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 Radix UI, and expanding into other headless libraries and multi-framework ecosystems.
Base UI First, Radix UI Next, Multi-Headless Architecture
We are prioritizing all 13 core Base UI animated components to deliver a complete, modern, accessible foundation. Radix UI animation primitives follow in Phase 2, with React Aria, Ark UI, and multi-framework expansions scheduled next.
MotionScore™ Quality Framework
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.
Modal dialog with backdrop blur fade and scale-in spring transition.
Smooth height layout animation with rotating chevron and keyboard navigation.
Pointer-origin scaling context menu with cascaded submenu transitions.
Collision-aware floating dropdown with staggered items and active item pill.
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.
Inertia stretch switch toggle with rubber-band thumb physics.
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.
Radix primitive slot button with Motion hover scale physics.
Radix checkbox with animated check icon path and focus ring.
Radix dialog modal overlay with spring entrance animation.
Mobile-first draggable bottom sheet drawer with inertia fling dismiss (Redesign planned).
Radix accordion with smooth collapsible height animation.
Radix floating menus with spring staggered items.
Floating popovers with directional micro spring transitions.
Interactive controls with shared layout sliding indicator and drag physics.
Accessible notification queue and tooltip hover transitions.
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.
Free forever • MIT Licensed • Community Driven
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.
Prioritization Strategy
Our component development follows a structured roadmap designed to provide complete, production-ready animated primitives:
Phase 1: Base UI First (Current Focus)
Base UI provides an unstyled, highly accessible component foundation designed for modern React. We are systematically building Motion-powered animated variants for all 13 core Base UI components:
- Button (
/ui/base/button) — Physics spring hover/tap scaling and comprehensive CVA variants. (Completed) - Checkbox (
/ui/base/checkbox) — Animated checkmark path morphing and elastic pop feedback. (Completed) - Dialog (
/ui/base/dialog) — Smooth backdrop blur with scale-in spring physics. (Completed) - Accordion — Smooth layout-height morphing and spring chevron rotation. (In Progress)
- Context Menu — Origin-aware transform scaling with cascaded submenu transitions. (Planned)
- Dropdown Menu — Collision-aware floating popovers with item stagger. (Planned)
- Progress — Elastic bar fill with indeterminate shimmer and animated numeric ticker. (Planned)
- Radio / Radio Group — Shared
layoutIdgliding active indicator. (Planned) - Select — Floating dropdown with active pill glide and keyboard navigation. (Planned)
- Switch — Inertia stretch toggle with rubber-band physics. (Planned)
- Tabs — Sliding background indicator pill and cross-fading tab panels. (Planned)
- Toast — Stacked notification queue with swipe-to-dismiss gesture physics. (Planned)
- Toggle Group — Multi-select animated bounding boxes. (Planned)
- Tooltip — Micro scale-fade tooltip with dynamic arrow position tracking. (Planned)
Phase 2: Radix UI Suite (Next Priority)
Our Radix UI tier infuses Radix Primitives with Sora Motion spring dynamics and layout orchestration:
- Completed: Button, Checkbox, Dialog.
- Upcoming & Redesign: Bottom Sheet, Accordion, Alert Dialog, Context Menu, Dropdown Menu, Hover Card, Menubar, Navigation Menu, Popover, Select, Separator, Slider, Switch, Tabs, Toast, Tooltip.
Phase 3: Other Headless UI Libraries (Future Planning)
To provide universal flexibility across different architecture requirements:
- React Aria Components: Adobe's accessibility primitives combined with Sora Motion spring physics.
- Ark UI: Zag.js state-machine driven components with universal animation presets.
- Headless UI & Ariakit: Clean adapters for Tailwind Headless UI and Ariakit.
Phase 4: Cross-Platform & Ecosystem Expansion
- Vue 3: Official component ports using Motion for Vue.
- Vanilla JavaScript: Web components and framework-agnostic wrappers.
MotionScore™ Performance Auditing
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. |
Running Local Audits with MotionScore CLI
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:
Start Dev Server & Run Audit
Run an unmetered local audit on your active development server without consuming cloud credits:
Test Viewport Formats
Audit specific viewport layouts to catch responsive animation regressions:
- Mobile Viewport Only:
- Desktop Viewport Only:
Review the 4 Audit Pillars
The audit evaluates your component across four core render pipeline signals:
- Animation Properties: Identifies properties triggering layout reflows (
width,height,top,left) vs GPU-accelerated transforms. - Scroll Performance: Evaluates scroll-linked transforms and trigger synchronization.
- DOM & Style Thrashing: Detects interleaved reads and writes causing forced reflows.
- GPU Texture & Memory: Measures VRAM consumption and compositor layer count.
Requesting a Component
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: 8/22/2026