AI & Automation Personal Tool · 2024

Hotspot & Overlay Editor

A drag-and-drop canvas tool for placing, resizing and wiring interactive hotspots on the room illustration — with live overlay video and tooltip previews.

Vanilla JS  ·  Vite

How it's built

A canvas-style drag-and-drop tool built in vanilla JS. The room illustration is the working surface — hotspots are absolutely-positioned overlay elements with resize handles. Each hotspot stores its position as a percentage so it stays responsive across screen sizes.

Each hotspot carries a destination URL, tooltip text, and an optional video overlay path. The output is a JSON array — copy it and paste it into index.html data attributes. The hover overlay and tooltip logic runs separately in index.js at page load, reading that JSON.

Interactive demo Watch it get built,
step by step Click to explore →

How it's used

Open the tool in your browser with the room image pre-loaded. Click anywhere on the illustration to place a new hotspot. Drag it to the right position. Drag the corner handle to resize. Fill in the label and destination URL in the right panel.

Click "Copy output" to get the JSON, then paste it into your index.html. The home page immediately reflects the new hotspot layout — positions, tooltips, and overlay video all update from the same JSON source.

Source code

hotspot-editor

The full hotspot editor — drag-and-drop canvas, position storage, JSON output, and the runtime overlay system. Swap in your own illustration and adapt the hotspot config for your use case.

View on GitHub →
AI & Automation
How it was built
Stage 01
Positioning the overlays
So on my landing page, there's this room illustration — it's a painting of my space — and I've placed these interactive hotspots over objects in the room. When you hover over a hotspot, I want a GIF or video to appear as an overlay, like the object is coming to life. The problem is I've been manually guessing the pixel coordinates in the HTML which is a nightmare. I want a proper dev tool where I can see the room image, drag each item into position visually, and have it output the coordinates for me.
Stage 02
Resize & crop controls
OK this is working but I'm realising each GIF and video has a slightly different crop — like the french press video has too much empty space around it. I want to be able to drag the corners to resize each one directly on the canvas, and also have sliders so I can fine-tune the exact position and dimensions. And I also want to be able to crop into the video — like shift the focal point — so I'm not just scaling it but actually controlling which part of the frame shows.
Stage 03
Lighting & filter controls
Some of these overlays look really off compared to the room illustration. The lighting in the bed video is super warm and the room image is cooler, so they clash. I want to be able to adjust the brightness, contrast, and vibrancy of each overlay individually — like a mini image editor built right into the tool — so I can visually match each one to the scene without going back into video editing software.
Stage 04
Auto-generated CSS output
This is great, but right now I still have to manually translate these positions back into my HTML and CSS. Can you make it so the tool generates the code automatically — like a live output at the bottom that updates as I drag and adjust — and I can just copy it and paste it straight into my index.html. The CSS should already be formatted and ready to go.
1 / 4
Room illustration
HOTSPOT DEV TOOL