> ## 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.
# Your first asset
End-to-end walkthrough — set up a project, hit the proxy, see the mp4 in your page.
# Your first asset
This guide ships an animated mp4 to a real page. We'll do it three different ways — pick whichever fits your stack.
**Sign up + grab your project key**
[Create an account](https://motioness.com/sign-up). Dashboard creates a default project for you. Open Project → Settings → Proxy and copy the **Project key** (`pk_…`).
**Set allowed origins**
Add the origin where you'll embed the proxy URL (e.g. `https://localhost:3000` for dev, `https://acme.com` for prod). Without this, every request returns 403.
For server-rendered URLs across origins, switch to [signed mode](/concepts/allowlist-vs-signed) instead.
**Pick a source image**
Any public URL works. For this walkthrough, we'll use `https://cdn.acme.com/hero.png`. Replace it with one of yours.
The image must be publicly fetchable from Cloudflare — no auth headers, no IP allowlists. Sources behind auth need to be uploaded via [`POST /api/v1/upload`](/api/upload/upload) first.
**Construct the proxy URL**
```text
https://motioness.com/v1/pk_YOUR_KEY/cdn.acme.com/hero.png.mp4
```
Strip the `https://` from the source URL. Keep the rest as-is. End with `.mp4` for video, `.jpg` for poster.
**Embed it**
The React component is the most polished surface — it ships with hover effects, lazy loading, callbacks, and SSR-safe progressive enhancement. Use plain HTML only when you can't run JS.
**React (recommended)**
```bash
npm install @motioness/proxy-client
```
```tsx
import { MotionessImg } from '@motioness/proxy-client/react';
export function Hero() {
return (
);
}
```
**Web Component**
```html
```
Same effects as the React binding without React.
**Plain HTML**
```html
```
No hover effects, no lazy load. For OG cards, RSS, MDX.
**Watch the first request**
The `