How we replicated the physical feel and audio of chalkboards in a browser ✍️
Hey Product Hunt community! 👋
As someone who spends a lot of time watching online tutorials and tech presentations, I've always felt that clean whiteboards lack the character, focus, and texture of a traditional physical classroom.
To solve this, I spent the last few weeks building LearningBoard (https://learningboard.online) a free, 100% client-side virtual blackboard web app.
While building this, I ran into two major product and engineering design challenges that I wanted to share and get your feedback on:
Simulating Friction & Sound: Instead of static drawing, I integrated a built-in Web Audio engine. It triggers a realistic chalk-scratching noise that dynamically scales up and down based on your actual cursor or stylus stroke speed.
Mimicking Slate Texture: Standard digital lines look too perfect. We used canvas properties to map hardware stylus pressure to dynamic chalk thickness and opacity, trying to give it that grainy slate feel.
The app works entirely locally, meaning it functions offline as a PWA and doesn't send user canvas data to any server.
I'd love to hear from other builders, designers, and educators here:
For digital drawing tools, does tactile audio feedback actually improve your focus?
What features do you find missing most when screen-sharing a whiteboard on Zoom or Google Meet?
Check out the web app and let me know your thoughts on how to make digital sketching feel even more organic! 👇
Replies