Make your
first motion.

CHAPTER 01

Open the launch scene

1. Press Try it now. Nudge opens in another tab with MX-03 · Nudge launch film already loaded.
2. Press Play below the canvas. Press it again to pause, or press Space.
3. Click the timeline ruler to choose a frame. Use the one-frame arrow buttons beside Play for smaller moves.
4. If a side panel is hidden, use the top-bar controls titled Fold the left panel and Fold the right panel to show it. A desktop browser gives the editor more room.

The launch file is a finished example. For a smaller first project, use the starter scene in the next chapter.

CHAPTER 02

Start a new composition

1. Save any work you want to keep before replacing the scene. In the Layer tab, deselect the object and choose Save scene .js.
2. Click New comp in the top bar. Enter a name in the Comp name prompt and confirm.
3. Open the Layer tab on the right. You now have an empty, six-second composition. With nothing selected, change Duration or Background under Comp.
4. Click ＋ Text to add your first title. In the Text field, replace "New text" with your words. Click ＋ Ellipse or ＋ Rect to add a shape.
5. Click an empty area of the canvas to deselect. Under Save · share, choose Save scene .js to keep an editable file.

New comp replaces the scene, but the launch audio stays loaded. Use the top-bar Audio control to load your own track before exporting.

Prefer a ready-made first scene? Download first-motion.js, then click Open scene in Nudge and choose it. You should see a title and an orange dot.

Included starter file: examples/first-motion.js. Open it with Open scene.

CHAPTER 03

Bring an idea from Claude

1. Download the Nudge HTML file from this page. In a separate Claude chat, attach the file so Claude can read the tool's scene format.
2. Describe what you want to make. Include the words, colours, duration, and frame shape. Use the example request below to ask for editable layers.
3. Copy the returned JavaScript scene. In Nudge, reveal the left panel if needed, then open Scene code.
4. Replace the contents with the complete reel({...}) scene. Click Run, or press Ctrl + Enter. Keep only the JavaScript, without chat text or code fences.
5. If Claude gives you a .js file, use Open scene and choose that file instead. Press Play to check the result.

Make a six-second, 16:9 motion graphic with the title "Hello, Nudge." and an orange dot. Use Nudge's layered reel scene format with comp.layers and the EASEL markers so I can edit and save every layer. Return the complete scene JavaScript.

Built for Claude. Claude is a separate service; Nudge does not contain a chat or send prompts for you. The import steps here were checked with the included starter scene. AI-generated scenes can need corrections.

CHAPTER 04

Move, retype, and organise layers

1. Pause on a frame where the object is visible. Click the object on the canvas, or click its layer name in the timeline.
2. Drag the selected object to move it. Use the corner handles to scale it and the rotation handle to turn it.
3. For a text layer, change the Text field in the Layer tab. You can also double-click the text on the canvas. Press Enter to finish, Shift + Enter for a line break, or Esc to cancel.
4. Use Duplicate, Forward, and Back at the bottom of the Layer panel to copy a layer or change its order. Right-click a layer for hide and lock options.
5. Press Ctrl + Z to undo a change.

Selection and keyframes need a layered scene. A code-only scene paints pixels and does not expose separate objects. Ask Claude for comp.layers if nothing can be selected.

CHAPTER 05

Set keyframes and choose an ease

1. Select a layer. Open Transform in the Layer tab. Click the stopwatch beside a property such as Position X to start animating it at the playhead.
2. Move the playhead to another time. Click the property's number to type a new value, or drag the number to adjust it. An animated property gets a keyframe at the new time.
3. Use the diamond button beside the property to add or remove a key at the playhead. The small arrows jump between that property's keys.
4. When a property has at least two keys, use the ease dropdown beneath it. Try outBack for a little overshoot, or inOutCubic for a smooth start and stop.
5. Play the scene to check the move. Save the scene to keep its keyframes and eases.

CHAPTER 06

Explore a 3D camera

1. Open a scene that contains a 3D world. The 3D tab appears only when a world or 3D World layer exists. It is hidden in the supplied launch scene.
2. Open 3D on the right. Under Camera, press Front, Side, or Top for a preset view.
3. Press Select layer if the world is not selected. Choose Orbit, then drag on the frame to turn the camera. Pan shifts the view, and Dolly moves the camera closer or farther away.
4. Press ◆ Key camera to record the camera at the playhead. Move to another time, change the view, and press ◆ Key camera again.

Download camera-playground.js and load it with Open scene to try these controls with a box. Adding an empty 3D World layer alone does not create the world geometry.

Included 3D starter file: examples/camera-playground.js. Open it with Open scene.

CHAPTER 07

Leave a note and review the next version

1. Pause on the frame you want to discuss. Select the layer and press its speech-bubble button in the Layer tab. Or right-click the layer and choose Comment on this object….
2. Type your note in the left panel. Choose Keep for something to preserve, Wrong for a correction, Ask for a question, or Note for a general comment. The exported text uses [KEEP], [WRONG], and [ASK]. In this build, Note is untagged in the export; you can type [NOTE] in the note yourself.
3. Click Notes for Claude in the top bar. Inspect the text, then use Copy or Download .txt.
4. Give Claude that text and your saved scene. Ask it to change the flagged part and keep the scene title and layer IDs the same.
5. Open or run the returned scene in the same browser. Click Changes to compare it with the previous file of the same title. Click a changed layer in the list to inspect it.

A note is an instruction for the next round, not an automatic AI edit. Review Changes before accepting a version. In the film, "ending too fast" changes the Title ending from 0.6s to 1.2s.

CHAPTER 08

Export and keep an editable copy

1. Click Export ▾ in the top bar.
2. Choose Still (PNG) for the current frame, Contact sheet for an overview, or Notes sheet (PNG) for frame notes.
3. Choose Export MP4… for video. Select the resolution, up to 4K, and a frame rate from 12 to 120 fps. Choose a codec supported by your browser.
4. For a file-size target, select Under … MB, auto quality and enter a size. Check the estimate before you press Export. The target adjusts quality; the final size can vary.
5. Choose Self-contained HTML from the Export menu to save the app and current scene together. This needs a layered scene with EASEL markers. Open the saved HTML in a browser to return to the scene.
6. Keep a Save scene .js copy too if you want to send your edited scene back to Claude.

Video encoding runs in your browser. Codec availability and export speed depend on the browser and device. Check a short export before rendering a full project.