A Neonix project is one HTML file. Start from this template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="neonix-document"
      content='{"kind":"neonix-html-document","schemaVersion":2,"composition":{"width":1080,"height":1920,"fps":30,"background":"#000000","colorSpace":"srgb"}}'
    />
    <title>My video</title>
    <style>
      .title { color: #fff; font: 700 96px Inter, sans-serif; animation: fade 1s both; }
      @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    </style>
  </head>
  <body style="margin:0;width:1080px;height:1920px;background:#000000;">
    <div class="title">Hello</div>
  </body>
</html>

Rules checked when you save

  • Exactly one <meta name="neonix-document"> tag with valid JSON (kind is neonix-html-document, schemaVersion is 2).
  • composition.width and composition.height are positive integers. fps and durationMs are optional.
  • The <body> (or its single top-level wrapper) declares an inline width and height in px that match the composition exactly.
  • No <script> tags for now. Scripted pages and WebGL (for example three.js) are planned.

Animation

Use CSS animations and transitions. Preview and export both step the page through time frame by frame, so animation timing is the same in both.

Assets

Upload images, video and audio as workspace assets and reference them from your HTML. Use fonts that are available in the workspace or loaded through @font-face.

Write HTML | Neonix