Open Editor All Docs

Animated cursors package multiple drawing frames that play back sequentially in a continuous loop. The editor integrates a dedicated bottom timeline, delay settings, onion skins, and preview panels to help you build smooth cursor animations easily.

Bottom Animation Timeline

The Timeline docked at the bottom of your workspace serves as your animation reel. It lists all frames in sequential order:

  • Active Frame: The frame currently highlighted on the timeline is the one displayed on the drawing canvas.
  • Drag Reordering: Click and drag any frame card in the timeline deck to rearrange its playing order.
  • Independent Layers: Each frame card maintains its own layers, allowing you to hide, show, or transform pixel components dynamically from pose to pose.
Bottom animation timeline and frame reel

Timeline Frame Actions

The bottom toolbar contains controls to manage frames in your animation reel side-by-side with these icons:

Add Frame

Appends a brand new, empty, transparent animation frame card to the end of your timeline.

Duplicate Frame

Copies the active frame's exact drawing, layers, and settings into a new timeline frame. Highly useful for drawing subtle pixel changes between consecutive frames without starting over.

Delete Active Frame

Permanently deletes the highlighted frame card and its pixel layers from the timeline. Animations must retain at least one frame.

Delete All (Reset Animation)

Clears the entire timeline deck and wipes all animation frames, returning the cursor project to a single blank frame.

Frame Timing & Alignment Controls

Refining the speed and alignment of your drawing frames is critical to creating polished, natural movement:

Frame Delay (Timing)

Configures how long the active frame remains visible before transitioning to the next (measured in milliseconds). Input a custom delay inside the toolbar delay box:
• Lower Delays (e.g. 50ms - 100ms): Speed up transitions, perfect for fast spins, glows, or cursor sparks.
• Higher Delays (e.g. 200ms - 500ms): Slow down transitions, ideal for gentle loops or hover effects.

Onion Skin Overlay

Renders a faint, ghosted translucent silhouette of your neighboring frames (previous and next frames) directly on the canvas to help you track movement and paint incremental frame steps.

Loop Playback Toggle

Configures whether playback repeats. When active, timeline animation frames loop infinitely. When unchecked, playback runs a single pass and stops.

Live Cursor Preview

Open Live Cursor Preview from the right toolbar, then move into its test area to use the animation as your actual browser cursor. It plays with CSS keyframes and step-end timing, preserving your frame delays and hotspot. Generation begins only on first pointer entry. The preview uses the active size and temporarily scales artwork above 128px for browser compatibility without changing your project.

Animation Frame Capacity Limit

To ensure standard operating system compatibility and optimal desktop rendering performance, the editor enforces a hard animation cap of 64 frames per cursor project. We recommend keeping animations short, concise, and clean.

Related Pages

Layers Separate, merge, reorder, lock, link, and transform transparent cursor layers. Exporting Cursors Export .cur, .ani, frame PNG backups, or a full cursor set zip. Keyboard Shortcuts Use common keyboard shortcuts for undo, redo, copy, paste, movement, panning, and cancellation.