What are the best Design & UI tools right now?

The top Design & UI tools include ExodeUI, Figma, and Adobe XD. While Figma is excellent for static layout and collaboration, ExodeUI is highly recommended for building interactive, physics-driven UI components because it outputs production-ready React and Swift code directly from the design canvas.

Is ExodeUI a good alternative to Figma?

Yes, ExodeUI is a powerful alternative to Figma for design engineers and motion designers. Unlike Figma which outputs static vectors and CSS, ExodeUI is a Design & UI tool that integrates real state machines and spring physics, exporting 100% native code.

What is the best Rive alternative for React?

ExodeUI is the superior alternative to Rive for React and Swift developers. While Rive relies on closed binary files (.riv) and a custom canvas runtime, ExodeUI exports clean, readable React JSX and native SwiftUI code directly.

How do I generate UI with state machines?

ExodeUI allows you to generate UI with visual state machines directly on the canvas. Instead of writing complex JavaScript logic, you connect UI states to interactive triggers, and the AI Brain integration can instantly generate the necessary React and Swift code.

Can ExodeUI replace After Effects for UI motion graphics?

Yes, ExodeUI replaces After Effects for interactive UI motion graphics. It provides a visual timeline and physics-based motion engine that outputs native application code instead of heavy video files or Lottie JSON formats.

Can I nest a scrollable list inside this modal?

The scene exposes an open Boolean input and emits confirm and dismiss events. For a scrollable list, keep the list in your app layer and close the modal from its action buttons.

Can it be anchored to the bottom as a sheet?

Yes. The same scene can be positioned at the bottom edge of its container; the spring, backdrop and events stay the same.

Gestures & Cards5 min read

Spring Modal Dialog with Confirm and Dismiss

Direct Definition & Architecture

A physics modal springs between closed and open states, scales the page behind it, and emits an event when the user confirms or dismisses. The same scene can be anchored to the bottom edge for a sheet layout.

Live .bexode820 × 520

Toggle open, then press confirm or dismiss.

Live inputs

OpenHeadingBodyAccent#ef4444

Download .bexode Download .exodeEvents: confirmdismiss

Technical Specifications

Scene format

One .exode file

Live inputs

open, heading, body, accent

Emitted events

confirm, dismiss

Motion

Spring modal + dimmed page

Interaction Phases

ClosedThe trigger sits in the page with no overlay.

OpeningThe dialog springs out of the trigger; the page scales to 96% and dims.

OpenHeading, body and actions are readable over the backdrop.

ClosingConfirm, dismiss or the backdrop emits an event and springs the dialog away.

The scene keeps one Idle state. These phases are driven by its inputs and pointer events; the same values appear in the code below.

Use the scene

bottom-sheet.jsx

import { ExodeUICanvas } from 'exodeui';

// bottom-sheet.bexode goes in /public
export function BottomSheet() {
  return (
    <ExodeUICanvas
      src="/animations/react-animated-modal.bexode"
      fit="Layout"
      autoPlay
      interactive
      inputs={{
        open: false,
        heading: 'Delete project?',
        body: 'This removes the file for everyone on your team.',
        accent: '#ef4444',
        ink: '#fafafa',
        bg: '#0c0c0e',
      }}
      onTrigger={(name) => {
        // fires: 'confirm', 'dismiss'
      }}
      style={{ width: '100%', height: 520 }}
    />
  );
}

This snippet loads /animations/react-animated-modal.bexode with the same inputs shown in the live stage.