# Put a project on your site

Play a NANALOG project live on your own web page, in a frame or behind your content, following the pointer.

A project can play live on any web page, from the same engine as the studio. It isn't a video: effects keep moving, a recorded pointer gesture replays, and effects that follow the pointer (like Ink & Smoke) play as visitors move over it. Embedding is part of STUDIO.

## Make the embed

1. Open **Export › Embed · on your site**.
2. Choose **On the page**: **In a frame** keeps the canvas shape and takes the pointer itself. **Behind content** fills a section of your page behind its words and buttons, and still follows the pointer.
3. Choose **Fit**: **Fill** covers the space and crops the edges, **Whole picture** shows all of it. **On phones** sets the same for small screens, where a wide piece often reads better whole.
4. **Download project file**, and put it on your site in a folder called `embeds`.
5. **Copy code**, and paste it into your page where it should play.

## What the code looks like

In a frame:

```html
<div data-nanalog="/embeds/my-project.nanalog" data-mode="section" data-fit="cover" style="aspect-ratio:16/9"></div>
<script src="https://nanalog.studio/embed.js" defer></script>
```

Behind content, inside the section it should fill:

```html
<section style="position:relative;min-height:80vh">
  <h1>Your words</h1>
  <div data-nanalog="/embeds/my-project.nanalog" data-mode="background" data-fit="cover" data-fit-narrow="contain"></div>
</section>
<script src="https://nanalog.studio/embed.js" defer></script>
```

Change the path if the file lives somewhere else. One script tag plays every embed on the page.

## Good to know

- **What travels:** pictures, text, generators, effects, motion, and a recorded pointer gesture. Videos don't travel in project files yet, so video layers stay empty.
- **The pointer:** a gesture you recorded in Play plays every loop. When a visitor moves over it, their pointer takes over.
- **Weight:** the player draws at most 1.5 times the screen's pixels, pauses when it scrolls off screen, and holds still for visitors who ask for reduced motion.
- **A clear background** shows your page through it: select the **Background** layer and set it to **None** before you download.