Show HN: RoughNotation – create and animate hand-drawn annotations on a web page • Hacker News Board

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#31

Post by 29athrowaway » Thu, May 28, 2020, 8:29 PM UTC

benatkin wrote: post #21

29athrowaway wrote: post #13

This could be the blink + marquee of this generation.

People certainly want to add extra oomph to posts. I could picture it being used either instead of or in addition to some of the emoji in a typical emoji-heavy pieces of content like this: https://twitter.com/MetroUK/status/1266078167590219776 (Not on twitter unless twitter implements this, but on the web)

I cannot wait for zalgo and these things are combined with text effects to create the ultimate abomination.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#32

Post by talkinghead » Thu, May 28, 2020, 8:33 PM UTC

a text popover feature would be super useful!

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#33

Post by chadlavi » Thu, May 28, 2020, 8:40 PM UTC

shihn wrote: post #28

chadlavi wrote: post #27

This is neat but I totally thought it was going to let me doodle on the page myself

Ah sorry, should have titled the post better. :/

That's cool, this is still a neat thing! And I think it could probably be fairly simply hooked up to respond to user input as part of a markup tool.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#34

Post by XCSme » Thu, May 28, 2020, 8:41 PM UTC

This is cool. I wonder if this could just be a CSS library instead, where you just add the class "annotate-circle" to an element and it will use pseudo-elements (:before, :after) to draw the lines.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#35

Post by kkotak » Thu, May 28, 2020, 8:46 PM UTC

mohap2 wrote: post #8

howmayiannoyyou wrote: post #6

Should be a Chrome Extension. Would absolutely kill as one.

how?

For your personal note taker for content based sites like NYTimes. It can store them in localstore or on the cloud.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#36

Post by Ptrulli » Thu, May 28, 2020, 8:59 PM UTC

Great job on this! What made you think of this product and how long did it take you to make?

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#37

Post by Axsuul » Thu, May 28, 2020, 9:06 PM UTC

This is great!

Does anyone know if there's a similar library that can do rough notations like this within Sketch?

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#38

Post by webel0 » Thu, May 28, 2020, 9:15 PM UTC

howmayiannoyyou wrote: post #6

Should be a Chrome Extension. Would absolutely kill as one.

Check out hypothesis [0]. No fun styling but the same functionality.

[0] https://github.com/hypothesis

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#39

Post by tiborsaas » Thu, May 28, 2020, 9:17 PM UTC

XCSme wrote: post #34

This is cool. I wonder if this could just be a CSS library instead, where you just add the class "annotate-circle" to an element and it will use pseudo-elements (:before, :after) to draw the lines.

With CSS Houdini it's possible.

To draw these irregular lines / shapes with normal CSS it's really hard, maybe if you inline some SVG.

Re: Show HN: RoughNotation – create and animate hand-drawn annotations on a web page

#40

Post by sixQuarks » Thu, May 28, 2020, 9:30 PM UTC

GordonS wrote: post #15

Not sure what I'd use this for, but I love the look of it so much I feel like I need to find an excuse! Can I ask what use case you had in mind when creating this?

would be awesome as part of a scroll story