Studio Cursor

Tool

Animated cursor maker

Draw each frame on the pixel grid or bring in PNG frames, a sprite strip or an .ani, give every frame its time on the timeline, watch the loop, and save a Windows .ani or PNG frames with CSS. Your files are read in this browser tab and are not sent to our server.

Draw this frame here, or bring in frames.

On the grid: arrow keys move (Shift moves 4), Space or Enter uses the tool, P E F I H pick a tool, G shows the grid. Ctrl+Z undoes and Ctrl+Y redoes. The onion skin shows the frame before this one, faintly, where this frame is empty.

Bring in frames

Or drop or paste them here. Several PNGs come in by name, frame-1 before frame-2. An .ani brings all its frames and times; a .cur keeps its hotspot. New frames go after the last one.

When frames are scaled to the canvas

Colour

Painting with #15161a

Hotspot

Where the cursor clicks, in every frame

One hotspot for the whole animation: keep the part that points still and animate around it. Click the pixel, or type it, counted from the top-left corner.

Timeline

    Each frame is as wide as its time. Drag a frame's right edge to change its time, or type it below. Windows counts animation time in jiffies, sixtieths of a second, so the .ani rounds each time to the nearest jiffy.

    Frame 1 of 1

    = 6 jiffies

    Try it

    A link Some text to point at Light Dark
    Move your mouse over this box Cursors only appear with a mouse or trackpad. Open this page on a computer to see this one.
    Your animation as a web cursor, played with the same CSS the frame set saves.

    Save your animation

    For Windows

    Sizes in every frame

    Windows picks the stored size closest to your pointer size, so more sizes stay sharp when the pointer is made bigger.

    Then follow installing a cursor on Windows 11 and pick it for Busy or Working in background.

    For the web

    The frame set holds one PNG per frame, the sprite strip and cursor.css, which plays the frames as your cursor with a CSS animation and also on an element that follows the pointer.

    cursor.css

    Timing

    Frames, times and the loop

    Up to 32 frames

    Each frame is a full picture at the canvas size. Simple blinks and pulses need four to eight; a smooth spinner eight to twelve. Keep the pointing pixel in the same place in every frame.

    Times per frame

    Every frame can stay on screen for its own time, from 17 ms to 10 seconds. Hold a key pose longer and move quickly through the in-betweens.

    Where it plays

    Windows plays the .ani for any pointer role. Browsers show one frame of an animated file, so for the web use the frame set: its CSS swaps the frames for you.

    Animated cursors explained covers frames, steps and jiffies in depth. For a still cursor, use the cursor maker. To start from your logo, use Cursor from a logo. Already have the frames as files? Frames to ANI puts them together.