NANALOGDocs Open the studio

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.