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 (kindisneonix-html-document,schemaVersionis2). composition.widthandcomposition.heightare positive integers.fpsanddurationMsare optional.- The
<body>(or its single top-level wrapper) declares an inlinewidthandheightinpxthat 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.