Installation

Effects are copied into your project as source. The examples use ember; any effect name works.

React

The registry at isomer.sh/r is a standard shadcn registry. This copies the component and its WebGL2 runtime into components/isomer/, with no dependencies.

It fills its parent, so give the parent a size. Props are the knobs on the effect's page.

import { Ember } from "@/components/isomer/ember";

<div style={{ position: "relative", height: 560 }}>
  <Ember accent="#FF7A3D" />
</div>

SwiftUI

The CLI writes the SwiftUI view and its Metal shader into Isomer/ under the folder you name. Add --web . to install both sides at once.

Without t the view runs its own clock. With it, it draws one moment, which is what reduced motion and the parity check use.

ZStack {
    EmberView()          // runs its own clock
        .ignoresSafeArea()
    ContentView()
}

EmberView(t: 1.0)       // one frame, at 1 s

Add every file in Isomer/ to your app target, the .metal file too, or the view stays black. Needs iOS 17. The CLI (npx @isomerui/cli) is not on npm yet.

With an agent

Point your coding agent at the Isomer skill and ask for the effect by name.