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.

Why use spring physics instead of ease-in-out for buttons?

Spring physics calculate real-time velocity and mass. When users rapidly tap a button, spring algorithms naturally carry forward existing momentum instead of snapping back to zero, creating a noticeably more responsive tactile feel.

How do I tune stiffness and damping for buttons?

Stiffness (between 250-450) controls how snappily the button snaps back into place. Damping (between 18-28) controls friction and bounce. High stiffness with moderate damping delivers a crisp, mechanical haptic response.

Does this component depend on large runtime libraries?

No. ExodeUI generates pure declarative React and SwiftUI components. In React, it utilizes standard Exode inputs or pure web animations without proprietary binary blobs.

Micro-interactions4 min read

Spring Action Button with Haptic Velocity

Direct Definition & Architecture

A spring button uses second-order differential physics equations rather than fixed cubic-bezier curves to calculate scale, displacement, and rebound. When pressed, energy accumulates; on release, momentum decays naturally based on stiffness and damping coefficients.

Live .bexode760 × 380

Press and hold the button, then release.

Live inputs

LabelStiffness340Damping22Accent#ff4a1c

Download .bexode Download .exodeEvents: press

Technical Specifications

Scene format

One .exode file

Live inputs

label, stiffness, damping, accent

Emitted event

press

Runtime targets

React, Vue, Svelte, SwiftUI

Interaction Phases

IdleRest scale with a soft accent glow and a faint grid.

PressedPointer down compresses the pill and removes elevation.

Spring backRelease injects velocity; stiffness and damping decide the rebound.

HoverThe pill tilts a few pixels toward the cursor without moving layout.

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

spring-button.jsx

import { ExodeUICanvas } from 'exodeui';

// spring-button.bexode goes in /public
export function SpringButton() {
  return (
    <ExodeUICanvas
      src="/examples/live/spring-button.bexode"
      fit="Layout"
      autoPlay
      interactive
      inputs={{
        label: 'Deploy component',
        stiffness: 340,
        damping: 22,
        accent: '#ff4a1c',
        bg: '#f7f5f0',
        ink: '#171310',
      }}
      onTrigger={(name) => {
        // fires: 'press'
      }}
      style={{ width: '100%', height: 380 }}
    />
  );
}

This snippet loads /examples/live/spring-button.bexode with the same inputs shown in the live stage.

Architectural Breakdown

Unlike CSS transitions with fixed cubic-bezier curves, a physics-based spring button recalculates momentum dynamically on every pointer event.

If a user interrupts the release animation with another click, momentum transfers seamlessly into the subsequent compression stroke without unnatural jarring or resetting.

The scene stores the spring values as state-machine inputs, so stiffness and damping can change while the button is running.