Noureddine RAMDI / Reze Studio: React and WebGPU powering smooth animation curve editing for MMD

Created Mon, 04 May 2026 10:23:01 +0000 Modified Sat, 23 May 2026 20:41:27 +0000
969 Words
github-stars react webgpu animation typescript mmd performance

AmyangXYZ/reze-studio

Reze Studio addresses a persistent pain point in animation tooling: how to maintain smooth, responsive playback and precise multi-axis drag interactions in a complex editor UI built with React. Animation curve editors often struggle when React’s render cycle collides with high-frequency frame updates and user input, causing janky or sluggish interfaces. Reze Studio tackles this by combining WebGPU rendering with a carefully architected React external store pattern and selective render updates, letting you hand-key .vmd animations for MMD models entirely in the browser.

What reze studio is and how it works

Reze Studio is a browser-native animation curve editor specialized for MikuMikuDance (MMD), a popular Japanese 3D animation tool. It targets the editing of .vmd animation clips with professional features like a timeline, dopesheet, and per-channel Bézier curve editing.

Built on Next.js 16, React 19, and TypeScript, its stack includes a custom reze-engine that handles WebGPU rendering. This engine lets it perform GPU-accelerated drawing of curves and timelines directly in the browser, avoiding heavy CPU workloads and enabling fluid interactions on devices ranging from iPads to desktops.

The repo also integrates Ammo.js for physics simulations and inverse kinematics (IK) solving, which are essential for realistic MMD animations. The entire tool runs client-side — there is no server component — which means all data stays in your browser, and you can import/export PMX models and VMD animation clips to and from the app.

Architecturally, the codebase uses sophisticated React performance patterns. It splits external stores to separate document state from transport state and leverages useSyncExternalStore with selectors to minimize unnecessary React renders.

The React performance architecture that keeps animation smooth

The standout technical feature of Reze Studio is how it manages React state and rendering to keep the UI responsive during demanding animation tasks.

Animation editors require frequent frame updates (high-frequency requestAnimationFrame loops) and complex drag operations involving multiple axes. React’s render cycle, if naive, can cause frame drops or UI stalls because it can’t keep up with the rapid state changes.

Reze Studio’s architecture solves this by introducing several layers of optimization:

  • Split external stores: Instead of keeping all state in a single store, the state is split into separate external stores for document state (the animation clip data) and transport state (playback controls). This separation allows more granular subscription and update logic.

  • useSyncExternalStore with selectors: React hooks subscribe to these external stores with selectors that pick only the relevant slices of state, minimizing re-renders to just what changed.

  • Hot paths bypass React: For operations like playback and drag interactions that happen at a high frequency, the code mutates refs directly, bypassing React’s render cycle. React is only notified on mouse release or commit, avoiding intermediate renders that would slow down the UI.

  • Snapshot-bridged undo system: Instead of recording undo history mid-drag (which can corrupt history), the system captures immutable snapshots of the animation clip only at commit boundaries. This keeps undo/redo reliable and performant.

This combination of patterns is worth understanding if you deal with high-frequency UI updates in React. It balances React’s declarative model with imperative performance hacks where necessary.

Quick start

  1. Open reze.studio — a default Reze model and sample clip load automatically, so you can start editing right away.
  2. (Optional) Load your own model: File → Load PMX folder… and pick the folder containing your .pmx (textures must sit next to it).
  3. (Optional) Load an existing clip, or start from scratch: File → Load VMD… to import an existing .vmd, or File → New to clear the timeline and key the animation yourself on whichever model is loaded.
  4. Play it back: press Space or click the play button.
  5. Save your edits: File → Export VMD…. There is no server — nothing leaves your browser, so export before you close the tab.

This workflow emphasizes that you can get started immediately without setup. The browser-native, client-side nature means no installation or backend configuration.

Verdict: who reze studio is for and what to expect

Reze Studio is a niche but well-crafted tool for MMD animators who want a modern, high-performance browser-based editor for their animation curves. Its use of WebGPU and Ammo.js physics makes it capable of handling realistic animations with inverse kinematics.

From a developer perspective, it’s a compelling case study in advanced React performance patterns applied to a demanding interactive UI. The split external store approach combined with selective subscriptions and ref-based bypassing of React renders is worth understanding even if you don’t work in animation.

Limitations include the fact that it is specialized for MMD formats (.vmd, .pmx), so it’s not a general-purpose animation editor. Also, since it runs entirely client-side, very large models or clips might hit browser resource limits.

Overall, if you want to explore a high-quality, WebGPU-powered timeline editor with a clean React architecture, Reze Studio is worth checking out. It shows how careful state management can overcome React’s render cycle limitations in real-time interactive apps.

→ GitHub Repo: AmyangXYZ/reze-studio ⭐ 267 · TypeScript