Introduction
Isomer is a set of animated effects for SwiftUI and React. Each one is written once and ships to both.
Every effect starts as a spec: a shader, its springs and the knobs a designer can turn. The compiler turns it into a SwiftUI view with a Metal shader and a React component with WebGL2. Same maths, same knob names, no runtime to install.
Then we check it. Both sides render the same moments, and a checker scores the difference out of 100. The score is on every effect, next to the effect, with the captures it came from. How the score works.
What you get
- Source, not a package. Installing copies the files into your project. They are yours to change.
- The same knobs on both sides. Tune it in the browser, paste the same numbers into Swift.
- Reduced motion for free. Time is a parameter, so the still frame is the same frame on both platforms.
- No dependencies. Plain WebGL2 on the web, a Metal shader on iOS 17 and later.
The effects
78 of them, in 4 groups: backgrounds, surfaces, micro, text. Each has its own page in the sidebar with the effect live, its knobs and its code.