Turn walkthroughs and coding recordings into easy-to-follow tutorials. Guide attention with cursor motion, click effects, typing callouts, and focused screen regions.
↗ Editable timeline◉ Click animations▣ Local video export
tutorial.js
01 const studio = "PixelOkay";02 function create() {03 return "wow";04 }
➤
YOUR WORKSPACE
Cursor spotlight editor ✳
Add annotations, place them on the timeline, and export a guided walkthrough.
◇ Made to stay privateYour recordings stay in this browser.
Live composition
Coding demo · 960 × 540
● PREVIEW
Click to place a cursor move
00:00.000:08.0
Space to play · Delete to remove · Ctrl/⌘ Z to undo
Effects timeline
0 effects
No events yet. Select a tool and click the preview.
Browse all effects ✦
Make the moment impossible to miss
Use cursor moves to guide the eye, clicks to mark actions, spotlight regions to dim distractions, and typing callouts to show shortcuts. Effects are manually authored—not inferred from video.
MADE FOR EDUCATIONAL VIDEO
A clearer way to teach on screen.
↗
Animate cursor paths
Place movement keyframes on the timeline to create smooth pointer travel between menu items, inputs and buttons.
◉
Emphasize clicks and shortcuts
Layer ripples and editable typing labels so viewers can follow actions without hunting for the cursor.
▣
Keep the important part in focus
Draw spotlight rectangles, add temporary magnification and export an annotated recording.
Questions about Cursor Spotlight Studio
Does it automatically detect clicks in uploaded videos?
No. A normal video does not contain structured mouse/keyboard events. You add accurate annotations with the click, cursor, typing and region tools.
Is my video uploaded?
No. Source media, timelines and generated files remain in your browser. There is no backend, login or paid API.
Can I export MP4?
This version exports WebM using the built-in MediaRecorder encoder. MP4 is not advertised because format support varies across browsers. You can convert WebM to MP4 separately if needed.
Will audio be preserved?
Audio is off by default. For imported videos, you can request audio capture; the tool refuses to claim success if the browser cannot supply an audio track.
What does the project file include?
The JSON saves annotation positions, timing and appearance, but not your video/image bytes. Load the original media again before reopening its timeline.
Rendering your tutorial…
Please keep this tab active while your browser encodes the video.
Using Cursor Spotlight Studio
Import a video/image or use the coding demo, place timed annotations, review the canvas format and export.
Cursor paths and typing labels are authored manually, not recovered from source video. Projects omit media. PNG uses preview dimensions. Source audio requires capturable audio support; WebM export is real time and browser-dependent. File, event, dimension and memory budgets apply.
Add manually timed cursor highlights to a tutorial
Import a video or image, author cursor paths and timed effects such as click ripples, typing labels, spotlights and zooms, then review the composition in the available landscape, portrait, square or classic formats. Export a PNG frame, real-time WebM or timeline JSON.
Example workflow
Load a short tutorial clip and choose its canvas aspect before placing annotations.
Draw the cursor path and add effects at the moments you want viewers to notice; search the effect list and undo adjustments as needed.
Preview the timeline, save the annotation data or record a WebM, and keep the source media for reopening the project.
Authored example: Annotate a settings tutorial by moving the cursor to a menu, adding one click ripple, then spotlighting the chosen option. Check that labels do not cover the control being demonstrated.
Limits: Cursor paths and typing labels are authored manually; the tool does not recover them from the source recording. Project JSON omits media. PNG uses preview dimensions. Source audio is captured only when the browser supplies a capturable audio track; WebM export runs in real time and is browser-dependent. File, event, dimension and memory budgets apply.
Cursor Spotlight Studio questions
Does the tool track the original recording’s cursor automatically?
No. Create cursor paths and timing manually in the annotation workspace.
Does the timeline project include the original video?
No. The timeline stores supported annotation settings, not video or image bytes. Reattach the source media when reopening it.
