Sightboard

• 

  Smiley Face

• 

  A Masterpiece

Inspiration

Our theme for this hackathon was “Sight”, and we took it literally: creating art with your sight. We wanted to explore alternative tools for creating art, and thus we created a new way for artists to create not with a pencil, stylus, or mouse, but with their eyes! The other cards we drew: Frame, Shadow, and Blend, guided various features and aspects of our design. Frame is what gave us the idea of making our interface resemble a whiteboard, we used shadows in our interface to add depth, and “blend” became the foundation for our line smoothing system, allowing adjustable blending of rough line segments for more natural brush strokes. Our goal was to make something minimal, aesthetic, and instantly usable via a tool that feels both unique and accessible.

What It Does

SightBoard is a lightweight, browser-based sketchpad that lets you draw using either traditional controls or facial movement tracking. It combines familiar tools like draw, erase, fill, and clear with our biggest focus being the tracking mode, where a floating cursor follows your sight. You can start or stop drawing while tracking stays on, and fine-tune Sensitivity and Line Blending to your liking.

It also supports straight-line drawing via the shift key, undo, and instant PNG export all in a single, self-contained web app. Everything runs locally in your browser, there is no installation needed, and no data is collected from the user.

How It Was Built

SightBoard is built with React (TypeScript), utilizing the HTML5 Canvas API for high-performance drawing and a lightweight camera-based tracking engine for motion input.
Custom logic handles smoothing, gain adjustment, and tracking control so motion feels natural rather than jittery. The layout is designed entirely in responsive CSS, adapting automatically across desktop and mobile. The focus throughout was speed, clarity, and minimalism, ensuring the experience feels native and immediate in the browser.

Challenges

Our biggest challenge was in building the tracking functionality such that it could smoothly and effectively capture the user's motion. Small variations in lighting and camera positioning affected sensitivity, so we built real-time gain and smoothing controls for users to tune on the fly. Another unexpected challenge was aligning the cursor’s tracked position with the canvas coordinates without breaking scaling or responsiveness. We also refined the UI extensively to keep it functional yet visually balanced and minimalist.

Built With

• css3
• facemesh
• html5-canvas-api
• react
• typescript
• vite