Getting started | kamod motionSkip to content
GitHub

Docs

Getting started

Install @kamod-ch/motion and animate your first Preact component.

Installation

Install the package and peer dependencies:

pnpm add @kamod-ch/motion preact motion

Import motion duration tokens once in your app entry (optional but recommended):

import "@kamod-ch/motion/presets/tokens.css";

preact and motion are peer dependencies. React and motion/react are not supported.

Quick start

Use published entry points — never deep-import from package source:

First animation

Fade + scale
Minimal app wiringtsx
import { render } from "preact";
import { Motion } from "@kamod-ch/motion/motion";
import { fade } from "@kamod-ch/motion/presets";
import "@kamod-ch/motion/presets/tokens.css";

render(

<Motion initial={fade.initial} animate={fade.animate} transition={fade.transition}>
  Hello motion
</Motion>,
document.getElementById("app")!,
);

Entry points

| Import | Purpose | | --------------------------- | -------------------------------- | | @kamod-ch/motion | Mini engine re-exports (default) | | @kamod-ch/motion/motion | Motion component | | @kamod-ch/motion/presence | Presence, usePresence | | @kamod-ch/motion/presets | Fade, scale, slide presets | | @kamod-ch/motion/hooks/* | useAnimate, useReducedMotion | | @kamod-ch/motion/value | Animated numbers | | @kamod-ch/motion/svg | SVG path utilities | | @kamod-ch/motion/hybrid | Full Motion engine (opt-in) |

Next steps