Show HN: Fingernotes – handwritten notes which become their own preview image
fingernotes.comHi HN, I've lurked here for ages and decided to come out of the shadows for my latest side project which reached the point where it’s sort of fun to use and hopefully not totally embarrassing to share.
Hacking fingernotes.com together over a couple of weeks was a creative outlet when work got stressful. I think of it as digital sticky notes. The goal was to make notes with a personal touch that are easy to write and share. I also wanted them to appear as their own link preview image on supported platforms. That way when you send the link to a note, the person sees the message without following the link.
Let me know what you think!
I drew inspiration from Apple's quick notes: low latency made scribbling a pleasure, and sending notes to friends felt warm and original compared to a typical exchange. It was also intriguing to see my handwriting printed in a message chat. In a time of rising artificial generation, spreading my clumsy handwriting feels like an act of rebellion.
But I dislike the light background in Apple notes, which I don't think you can change when sharing. More importantly, no one sent a note back. With fingernotes the low-friction interaction is meant to make creating notes simple. I also find the image previews aesthetically more pleasing.
For implementation, fingernotes are publicly accessible links to collections of strokes that have been persisted to a Cloudflare D1 database and rendered in SVG. Like pen on a sticky note, each stroke is immutable but anyone can add to a note if they have the link. You can't undo strokes, so if you mess up your note just throw it out and start a new one. Having append-only collections avoids handling order of operations when multiple people edit the same note. Hosting it as a Cloudflare worker made it easy to get up and running. There's some latency in Safari on iOS which is absent on desktop. It's noticeable compared to Apple notes and I'm afraid it's a limitation of the browser.
Hey, thanks for sharing. It looks neat! Here's some (unstructured, rushed) feedback:
Consider adding some PWA metadata (manifest) so there's a bit more space when the app is added to the home screen.
Are you using perfect-freehand? If so, you might wanna give Steve Ruiz a shoutout!
The latency is not bad (iOS Safari) to be fair. I'd check how this works with the Apple Pencil though (including the additional APIs and pen properties it opens)
I have giant fingers, so this is nice for doodles, but writing gets frustrating. a basic zoom would fix that (problem: keeping the UI non obtrusive).
Consider adding colour (even a pre-defined palette to keep this super simple, say 3-4 colours). I got some fun creations from people who played with a similar project (https://lines.potato.horse), largely because they had just the right amount of creative control.
Also, consider adding an OLED-friendly colour scheme (with perfect blacks #000). Some inspiration: https://untested.sonnet.io/notes/night-rider/ and https://untested.sonnet.io/notes/dark-mode-articles/
(100% yak shave here, so not important) but: I'd check if the note content could be shared with the link (e.g. via data URIs) (mostly for fun)
Ah, finally, make it plomk like mmm.page or potato.horse (disable silent mode and click on the nav)! THIS IS VERY IMPORTANT
100% shoutout to perfect-freehand/Steve Ruiz!
this is amazing feedback, thank you for taking the time to write it all out. I love the idea of audio feedback!
I was going to complement OP on how amazing this feels, not realising the drawing was lifted from somewhere else.
Seems like a glaring omission to mention Cloudflare D1 and... SVG, but not the guy who did the drawing part of your drawing app
It is a glaring omission with no excuse. I should have mentioned it.
I don't think it's such a big deal. It's a very well known package. The main reason I mentioned him was that it might be a nice/friendly thing to do.
Very cool, though it doesn't seem to work on Firefox on Android - I had to use Chrome to get it to work. Dunno what API it's using, but worth mentioning.
Worked for me (firefox on Android, Samsung OneUI6.1)
https://fingernotes.com/note/e8f2e029
Let's see how this evolves
Congrats on coming out of the shadows!
If you could increase the size of the drawing window, to be almost as large as the browser and add more basic colors for drawing, I can see it being very useful.
Can't get it to do anything using Edge on Windows. Does it only work with touch?
I've used it successfully with Chrome and Safari on macOS but it was originally intended for touch.
Have you thought about colour? That would be awesome.
Yes I think colors would be great, while still keeping the UI minimal. Another comment brought it up along with audio feedback for strokes which feels like it would be a nice experience.
Pretty cool. Though I was a bit sad that preview does not work on Signal.
Thanks! I just tried it out on Signal with a new note and it does work. The image is not as large as the WhatsApp preview though.
I accidentally linked to a specific note at the top which I guess Cloudflare is struggling to preview due to traffic.
Very few tools write that smooth. Great Work!
very cool and simple idea, i like it. funny thing, first try i got a note-id that already had been used by someone :-)
thanks! Oops, I just realized the link at the top is to a specific note instead of fingernotes.com
I really like the feel of the writing.
I’m now able to sign my name with flair using just my thumb while holding my phone—seamlessly and effortlessly. Very well done on the implementation.