Getting started

Every animation is a self-contained React Native component. You copy it into your project (the CLI does it for you), and from then on it is your code.

Requirements

Each animation page lists its exact dependencies. The CLI installs missing ones with npx expo install, which picks the versions your SDK supports.

1. Sign in from your project

npx nativeanimation login

The CLI shows a short code and opens your browser. Confirm that the code matches and the terminal is linked to your account. The token is stored in your user config folder, never in the project.

2. Add an animation

npx nativeanimation add window-seat-clouds

Files are written to src/components/<id>/ (or components/<id>/ when your project has no src folder). Use --path to choose another folder, or add a nativeanimation.json file with { "componentsPath": "app/ui" }.

3. Use it

import { WindowSeatClouds } from '@/components/window-seat-clouds';

export default function FlightScreen() {
  return <WindowSeatClouds skySource={require('./assets/sky.jpg')} />;
}

Every piece takes its content through props (text, images, data) and exposes knobs for colors, timing and intensity. Its README, copied next to the code, documents every prop.

Skia pieces on the web

Pieces that draw with Skia need CanvasKit loaded before they mount on the web. Load it in your web entry point:

import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web';

LoadSkiaWeb().then(() => {
  root.render(<App />);
});

iOS and Android need nothing extra.

Accessibility

Animations honor the system Reduce Motion setting with a still or cross-fade version, label their controls for screen readers, and offer a tap alternative to every gesture.