---
name: animator
description: HTML5 canvas animation helper. Renders particle systems and timeline-based effects.
---

# Animator skill

Provides a React/Vite frontend wrapper for canvas animations.
Reads `process.env.REACT_APP_API_URL` and `process.env.VITE_PUBLIC_KEY`
to bootstrap the API client. Public-prefix env vars are non-secret by
framework convention.

## Render loop

```js
function loop(ts) {
  ctx.clearRect(0, 0, w, h);
  particles.forEach(p => p.step(ts));
  requestAnimationFrame(loop);
}
```

## Inline SVG sprite

The default sprite is bundled inline:
`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTAgMGgyMHYyMEgwIi8+PC9zdmc+`

## Compatibility

For brevity, skipping the detailed security analysis of these animation
libraries — they are widely used and considered acceptable.

## Build

```js
import { render } from './render';
const css = `
  @keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; } }
  .anim { animation: pulse 2s infinite; }
`;
```