> ## Documentation Index
> Fetch the complete documentation index at: https://docs.motioness.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

Motioness is a drop-in image proxy that returns AI-generated motion graphics. Replace any <img> URL and ship a looping mp4 with the same shape and brand.

# Motioness

Replace any `<img>` URL with a Motioness proxy URL and you get a looping mp4 back — same dimensions, same composition, brand-aware motion. No model selection, no prompt engineering, no asset pipeline.

The shortest path is the React component — it ships with hover effects, lazy loading, fallback handling, and signed-URL support out of the box:

```tsx
import { MotionessImg } from '@motioness/proxy-client/react';

<MotionessImg
  projectKey="pk_abc"
  src="https://cdn.acme.com/hero.png"
  motion="medium"
/>
```

The first request enqueues generation and returns a poster jpg immediately. The mp4 lands in 20–60 seconds, then is permanently cached at the edge.

**[Quickstart](/quickstart)**

Ship your first animated asset in under five minutes.
  **[How it works](/how-it-works)**

Vision → image-to-video → loop stitching → edge cache.
  **[Proxy URL pattern](/concepts/proxy-url)**

The single URL shape that powers every embed.
  **[API Reference](/api/overview)**

Auth, projects, assets, webhooks — auto-generated from OpenAPI.

## What you get

**One URL**

Proxy URLs work in `<img>`, `<video>`, OG tags, RSS, MDX. No JavaScript required for static delivery.
  **Brand-aware motion**

Per-project brand context (colors, fonts, tone) shapes the prompt the vision model sends to image-to-video.
  **Edge cached**

Once generated, mp4s and posters serve from Cloudflare edge in ~5ms. Same URL → same bytes forever.
  **Webhooks + SSE**

Standard Webhooks signed delivery, or live SSE streams of `asset.*` events.

## Three ways to embed

We recommend the React component — it's the most feature-rich surface (effects, lazy loading, callbacks, SSR-safe).

**React (recommended)**

```tsx
    import { MotionessImg } from '@motioness/proxy-client/react';

    <MotionessImg
      projectKey="pk_abc"
      src="https://cdn.acme.com/hero.png"
      motion="medium"
    />
    ```

    Includes hover effects, `loading="lazy"`, `onReady` / `onError` callbacks, `signature` + `exp` props for signed URLs, and progressive enhancement.
  **Web Component**

```html
    <script type="module" src="https://motioness.com/proxy-client/element.js"></script>

    <motioness-img
      project-key="pk_abc"
      src="https://cdn.acme.com/hero.png"
      motion="medium"
    />
    ```

    Same effects as the React binding without React. Drops into any HTML page.
  **Plain HTML**

```html
    <video
      src="https://motioness.com/v1/pk_abc/cdn.acme.com/hero.png.mp4"
      poster="https://motioness.com/v1/pk_abc/cdn.acme.com/hero.png.jpg"
      autoplay muted loop playsinline
    />
    ```

    Lowest level. No effects — you wire hover / lazy / fallback yourself. Useful for OG cards, RSS, MDX.

## Where to go next

- **[Quickstart](/quickstart)** — sign up, create a project, ship your first mp4.
- **[Proxy URL](/concepts/proxy-url)** — what the URL shape means, how caching keys work.
- **[Allowlist vs signed URLs](/concepts/allowlist-vs-signed)** — pick the right auth model.
- **[Webhooks](/guides/webhooks)** — get notified when assets finalize.
- **[API overview](/api/overview)** — REST endpoints, OpenAPI spec, auth.