React components for the screens you actually ship, animated with Motion and Remold and ready to copy into your app. Underneath sits the Remold engine, which morphs one state into the next in React, the DOM, SVG and canvas.
Build with it
Use the engine at the level you need.
Start with a React component, call it from plain JavaScript on any element, or build a canvas scene. The matching and spring logic underneath is available on its own, too.
Installationinbox.tsx
import { Remold } from '@remold-ui/react';
export function Inbox({ messages, sort }) {
return (
<Remold.Morph trigger={sort}>
{messages.map((message) => (
<Message key={message.id} {...message} />
))}
</Remold.Morph>
);
}Why Remold
Made for interfaces that change.
Wrap what changes and keep building. The rest is handled for you.
- Nothing to label
Wrap the part that changes. Remold works out what stayed from what's on screen: text, images, shape and position.
- Any markup, any source
The next view can be another component, a server response or content from a CMS, and it still animates.
- Built to be interrupted
Every change springs from wherever things are, at the speed they were going. Nothing restarts or jumps.
- Accessible by default
It follows reduced motion, keeps focus where it was, and can tell screen readers what changed.
- Yours to keep
Every component installs into your project with one command, as plain code you can restyle and change.
- React or plain JavaScript
Use the React components, or call it on any element from plain JavaScript, with any framework or none.
Questions
Good questions.
Anything else? The docs go deeper, and every page is also available as plain text for assistants.
Is Remold a component library?
Not in the usual sense. Remold is an engine for connecting one interface state to the next. The components are ways to use it; the demos show what you can build with your own UI.
What do the components use besides Remold?
They're ordinary React components. Base UI gives them behaviour and accessibility, Motion runs most springs, enter and exit animations and shared-element moves, and Hugeicons supplies the icons. Remold does the morphing, the connector lines and the particles. The registry install adds whichever of these a component needs.
Is Remold free?
Yes. The engine and its primitives are open source under the MIT licence, including for commercial projects. A separate Pro editor may offer visual authoring and export tools later.
Do I need animation IDs?
No extra IDs for Remold. It matches elements using their content, geometry and surroundings, including when the next view comes from different markup. React lists still need React keys as usual.
Which frameworks does it support?
Any of them, or none. React gets components and hooks. Everywhere else, @remold-ui/dom animates any element from plain JavaScript, so it works in Vue, Svelte, Astro or a server-rendered page. @remold-ui/canvas draws scenes and particles, and the maths in @remold-ui/core has no DOM at all.
What happens if a change interrupts another?
Everything heads for its new place from wherever it is, at the speed it was going. Nothing restarts or jumps, however fast the changes come.
Does it respect reduced motion?
Yes. By default it follows the system setting: changes happen at once, focus stays with the element you were on, and it can announce what changed to screen readers.
Does it work with server rendering?
Yes. The React parts render on the server, and animation starts in the browser after hydration. What goes inside them can come from anywhere, including server components.