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.