CruxDevCruxDev Tools Studio Prompts
image Utility • Zero-Server Privacy • 100% Client-Side

2D Animation & Flipbook Studio

Draw frame-by-frame animation in your browser with pressure-sensitive brushes, layers, onion skinning and a hold timeline, then export GIF, APNG, WebM, a PNG sequence or a sprite sheet with JSON.

Overview

A frame-by-frame drawing animation studio that runs in your browser. Sketch each drawing with pressure-sensitive pen, pencil, marker and airbrush brushes, see neighbouring drawings through onion skinning, time them with holds on a timeline, and export an animated GIF, APNG, WebM video, PNG sequence or a sprite sheet with JSON for game engines. Nothing is uploaded.

How It Works

Draw on the canvas with a mouse, finger or stylus. A pen tablet or Apple Pencil reports pressure through Pointer Events, so lines thicken as you press, and the stabiliser slider smooths shaky hands. Add a frame, draw the next pose while the previous one shows as a red ghost, and press Enter to play. Each frame has a hold measured in ticks, so a drawing held for 2 ticks at 12 fps stays on screen for one sixth of a second, the way animators shoot on twos. Layers, a shared background layer and a faded reference image sit under every frame.

Step-by-Step Usage Guide

  1. Choose a canvas size preset and a frame rate between 6 and 30 fps in the Project panel.
  2. Draw the first pose, then add a frame and draw the next pose using the onion skin ghosts as a guide.
  3. Set holds on frames that should stay on screen longer, and pick loop, ping-pong or once playback.
  4. Press Enter to play, scrub the timeline, and add an audio track if the timing needs to hit a beat.
  5. Open Export and save a GIF, APNG, WebM, PNG sequence ZIP or sprite sheet with its JSON file.

Technical Specifications & Standards

Every stroke is stored as vector data: a list of points carrying x, y, pressure and pen tilt, plus brush type, size, colour and a random seed for pencil grain and airbrush scatter. Nothing is flattened to pixels while you work, so a 2x or 4x export re-renders each line at the new scale and stays sharp. Strokes are drawn as a single filled outline, which keeps translucent marker strokes from darkening where the line overlaps itself. Fill bucket clicks are stored as seed points and flood the layer again at render time, so a fill still closes its shape after you redraw a line. Undo history is kept per frame, so undoing on frame 12 never removes work from frame 3; adding, deleting or reordering frames has its own history. The in-between helper takes a lasso selection that you have moved, scaled or rotated to an end pose and writes N frames between the two poses with linear or eased timing, with scale interpolated geometrically. The GIF export uses the median-cut quantizer and optional Floyd-Steinberg dithering of the site's own encoder. APNG is written by a small built-in encoder with full 8-bit alpha. WebM is recorded in real time with MediaRecorder, including the audio track, and projects save as a .cruxanim ZIP or autosave to IndexedDB.

Targeted Use Cases

  • Animating a walk cycle or idle loop and exporting a sprite sheet with JSON for Phaser, PixiJS or Godot.
  • Making a looping reaction GIF or sticker with a transparent background as APNG.
  • Practising traditional animation exercises such as the bouncing ball and flour sack with onion skinning.
  • Roughing out storyboard animatics timed to a voice or music track before moving to a full editor.
  • Turning a numbered PNG sequence or an existing GIF into editable frames to retime or paint over.

Notes & Gotchas

  • Keep rough sketches, clean lines and colour on separate layers so you can hide or lock each pass.
  • Use holds instead of duplicate frames for still moments, because a hold keeps the timeline short and the GIF small.
  • Turn on light table when tracing, so ghosts appear as plain faded drawings instead of red and green tints.
  • Save a .cruxanim file before clearing browser data, since the autosave lives only in this browser's storage.

Frequently Asked Questions

Does it support pen pressure on a drawing tablet or iPad?

Yes. Pressure and tilt come from the browser's Pointer Events, which Wacom, Huion and XP-Pen tablets, Surface pens and Apple Pencil report. Mouse and finger input draw at the brush's normal width, and touches are ignored for a moment after the pen lifts so a resting palm does not leave marks.

What is a hold or exposure on the timeline?

A hold is how many ticks a drawing stays on screen, where one tick is one frame at the project fps. Holding every drawing for 2 ticks at 24 fps gives 12 drawings per second, which animators call shooting on twos. Held frames show as wider cells with a bar.

Can I export a sprite sheet for a game engine?

Yes. Choose a fixed grid or a packed sheet that trims empty space around each drawing. The JSON uses the TexturePacker hash layout with frame, spriteSourceSize, sourceSize and a duration in milliseconds for each frame, plus a frameTags entry, which Phaser, PixiJS and many Godot and Unity importers read.

Is APNG or GIF better for a transparent animation?

APNG keeps full 8-bit alpha and every colour, so soft edges and airbrush shading stay smooth. GIF allows only one fully transparent colour and 256 colours per frame, so antialiased edges look jagged against a dark page. GIF still plays in more places such as older chat apps.

Where is my animation saved?

The project autosaves to IndexedDB in this browser a moment after each change and reloads the next time you open the tool. Nothing is sent to a server. Use Save .cruxanim to keep a portable ZIP copy with every image and the audio track.

How does the in-between generator work?

Lasso part of a drawing, move, scale or rotate it to where it should end, then generate. The tool writes the chosen number of frames between the two poses with linear or eased spacing. It interpolates whole transforms, so it suits sliding, bouncing and spinning parts rather than changing shapes.

Related tools

  • Motion Graphics Maker (Animated Text, Logos & Intros) - Keyframe animated text, logos, lower thirds and intros in your browser. Easing graph, trim paths, masks, 33 presets, 9 templates. Export WebM, MP4, GIF, PNG frames, Lottie or CSS.
  • GIF Maker - Make an animated GIF from images or a short video. Reorder frames, set per-frame delays, loop count, size and colours, with optional dithering. Encoding runs in a background worker with progress.
  • GIF Frame Splitter - Split an animated GIF into PNG frames composited exactly as browsers play them. See a table of frame delays and disposal, save single frames or download a ZIP with all frames and a delays CSV.
  • CSS Keyframe Animation Timeline Studio - Design smooth keyframe animations with easing curves, timeline previews, and production-ready @keyframes CSS.
  • Photo Retouch & Color Grading Studio - Non-destructive photo editor in your browser: exposure, white balance, HSL, tone curve, split toning, crop and presets with a live histogram, then batch export to JPG, PNG or WebP in a ZIP. Photos never leave your device.
  • Floor Plan Designer & 2D CAD Drafting - Draw floor plans and 2D CAD drawings in your browser: walls with doors and windows, auto room areas, furniture symbols, dimensions, layers, a command line, and DXF, PDF, SVG and PNG export.