Playwright test page
01. Click
Watch the press and release feedback.
02. Select & type
Drag across the text. The cursor fades as you select.
Make every move matter.
03. Drag & drop
Move the card to the target. Feedback stays held.
Drop here
Drag me
Motion reference CSS only
Constant speed: one rotation every 2s, one sweep every 2s. Independent of cursor playback.
Cursor catalog
35 bundled SVGs mapped to 36 CSS keywords. With the custom cursor enabled, hover a row to preview it. Hover the CSS badge to compare your browser’s native cursor.
36 cursors
Hotspots are visually calibrated, not official OS metadata. Wait and progress artwork is static.
| Category | Keyword | Artwork / hotspot | Behavior | Native |
|---|---|---|---|---|
| General | auto |  | Contextual inference64 × 64 · hotspot 32, 32 | CSS |
| default |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| none | Hidden | No pointer rendered | CSS | |
| Links & status | context-menu |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |
| help |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| pointer |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| progress |  | Static artwork64 × 64 · hotspot 32, 32 | CSS | |
| wait |  | Static artwork64 × 64 · hotspot 32, 32 | CSS | |
| Selection | cell |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |
| crosshair |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| text |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| vertical-text |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| Drag & drop | alias |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |
| copy |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| move |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| no-drop |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| not-allowed |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| grab |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| grabbing |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| Resizing & scrolling | all-scroll |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |
| col-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| row-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| n-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| e-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| s-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| w-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| ne-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| nw-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| se-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| sw-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| ew-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| ns-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| nesw-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| nwse-resize |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS | |
| Zooming | zoom-in |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |
| zoom-out |  | Bundled SVG64 × 64 · hotspot 32, 32 | CSS |