10 ms·
Show HN: RoughNotation – create and animate hand-drawn annotations on a web page
- dpeck 6y agoThat is beautiful and very well done. I might drop this onto my personal homepage today for a nice emphasis underline in the header. Bravo!
- shihn 6y agoThanks!
- tumblen 6y agoLove it! Looking forward to using it in future projects!
- onemoresoop 6y agoThis is really cool. I like that it brings a bit of human touch to webpages. How does it work?
- baddox 6y agohttps://youtu.be/fix2-SynPGE?t=421 https://youtu.be/fix2-SynPGE?t=421 Starting at 7:01 in this video, Christopher discusses how some of the hand-drawn effects work in Rough.js (and Excalidraw, which uses Rough.js).
- netvarun 6y agoA technical post on that by the author: https://shihn.ca/posts/2020/roughjs-algorithms/ https://shihn.ca/posts/2020/roughjs-algorithms/
- howmayiannoyyou 6y agoShould be a Chrome Extension. Would absolutely kill as one.
- mohap2 6y agohow?
- Jackim 6y agoI could see it being used for screenshots of text to draw attention to certain points. Tweets, facebook posts, etc.
- agustif 6y agoCode-annotated screenshots would be rad, a bit like LogRocket logs a session, but static, so you can receive feedback and immediately act on it. Killer features also as GitHub Action/App Generate a shareable/anotable link on every branch/pr Make annotations back to GitHub issues, so they can be tracked/resolved there, and added back to the annotation UI as such. And I could keep going...
- kkotak 6y agoFor your personal note taker for content based sites like NYTimes. It can store them in localstore or on the cloud.
- webel0 6y agoCheck out hypothesis [0]. No fun styling but the same functionality. [0] https://github.com/hypothesis https://github.com/hypothesis
- alixanderwang 6y agoBeing able to add small text between margins would enable the ability for an app/extension to let person A markup an article with their thoughts and emphasis, and share it with person B. That's something I'd personally use.
- shihn 6y agoGood idea. I had thought of adding text to annotations but didn’t want to complicate the first draft of this.
- alixanderwang 6y agoI just realized you're the creator of RoughJS too. Great job on these awesome extensions!
- 29athrowaway 6y agoThis could be the blink + marquee of this generation.
- benatkin 6y agoPeople 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 https://twitter.com/MetroUK/status/1266078167590219776 (Not on twitter unless twitter implements this, but on the web)
- 29athrowaway 6y agoI cannot wait for zalgo and these things are combined with text effects to create the ultimate abomination.
- yarone 6y agoDisplays are really wide today. Most web pages are relatively narrow, content-wise. Opportunity to use the empty space for markup.
- GordonS 6y agoNot 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?
- m88m 6y agonice. going to think on ways to use it!
- NickBusey 6y agoThis may be one of the best 'product' landing pages I've ever seen. Kudos.
- benatkin 6y agoThis is really cool, but after looking at your twitter account and ROUGH.JS, so far I've been most impressed by this [0], which only had one retweet since I got to it. I'm a sucker for interesting maps. 0: https://twitter.com/preetster/status/1250862620103438336 https://twitter.com/preetster/status/1250862620103438336
- shihn 6y agoThanks. the idea behind rough was to provide primitives to draw anything. maps and dataviz are definitely one of the main use cases.
- wes-k 6y agoLooks wonderful! Anyway to get it to only draw the annotation once? Looks like everything gets two passes which adds to the roughness but also adds a bit of noise and delay to the animation.
- shihn 6y agoYes definitely possible. It just looks more sketchy with two passes. And it should be easy to configure. Perhaps add to the issues with any thoughts? Thanks https://github.com/pshihn/rough-notation/issues https://github.com/pshihn/rough-notation/issues
- cosmotic 6y agoI agree, the double pass is pretty distracting and frustrating with the delay
- jwilber 6y agoLove this (and all of Preet’s work). Made a statistics visual awhile back using roughjs[0], seems like the perfect setting with which to add roughnotation :) [0] https://www.jwilber.me/permutationtest/ https://www.jwilber.me/permutationtest/
- kyawzazaw 6y agoI like your work too!
- onurcel 6y agoawesome
- mattbk1 6y agoThat's beautiful.
- throwaway77384 6y agoYou know, it's funny that presumably this explanation of the permutation test is intended for people with very little / no knowledge of statistics. And yet, I still don't get it. Like, at all. I feel like I'd make a very bad data scientist ;)
- sleepychu 6y agoThe first measurement made (between the red and blue groups) shows a difference between the average wool quality of the two groups. Since the members were selected at random, you might conclude that the new shampoo is working because, what are the odds that you just picked all the good alpacas at random? That's what we're checking. For several permutations of different groups (each group is a new random slection of alpacas so a mix of blue and red alpacas) take the same measurement (average of group a - average of group b) Count the number of times that the difference was as good or better as your original measurement and you will find out the odds that being in your treatment group made a difference. (If random groupings show similar measurements then it means it's more likely that your specific treatment/control group did nothing).
- heyhihello 6y agoAmazing! There are many cool libraries now thanks to author. 1. Roughjs - rough primitives https://roughjs.com/ https://roughjs.com/ 2. roughViz - rough data visualization https://github.com/jwilber/roughViz https://github.com/jwilber/roughViz 3. Wired-elements - rough wireframes https://github.com/wiredjs/wired-elements https://github.com/wiredjs/wired-elements
- chadlavi 6y agoThis is neat but I totally thought it was going to let me doodle on the page myself
- talkinghead 6y agoa text popover feature would be super useful!
- shihn 6y agoDefinitely. Please add an issue with what you'd like to see. Thanks.
- XCSme 6y agoThis 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.
- tiborsaas 6y agoWith CSS Houdini it's possible. To draw these irregular lines / shapes with normal CSS it's really hard, maybe if you inline some SVG.
- shihn 6y agoI did implement a version of this in Houdini a couple of years back, that and a short thread of what Houdini was lacking in this case: https://twitter.com/preetster/status/1265679970006757376 https://twitter.com/preetster/status/1265679970006757376
- XCSme 6y agoCouldn't that be achieved with gradients?
- Ptrulli 6y agoGreat job on this! What made you think of this product and how long did it take you to make?
- shihn 6y agoI wrote roughjs a couple of years ago and had always thought it would be nice to use it in all the ways people draw hand-drawn shapes. Annotation is one of them. I never got around to implementing it. Since roughjs does most of the heavy lifting, implementing this was not a lot of time. I did it in a day (~4-6 hours). Actually it took longer to make the website for the project and writing the readme :/
- Axsuul 6y agoThis is great! Does anyone know if there's a similar library that can do rough notations like this within Sketch?
- grizzles 6y agoThis is cool. Slightly OT but I saw the word animate and I got excited because I'm in the market for some easy to use animation software. Krita & Synfig just aren't doing it for me. The best one I ever used was a web app built a decade ago by an iirc ~12 year Korean American kid. It seems to have disappeared off the web but it was just amazing for usability. Anyone remember it / the name of it?
- egfx 6y agoHi there. Please check out https://gif.com.ai https://gif.com.ai You probably haven’t heard of it because it’s a bit under the radar and not really being promoted to the outside yet.
- voz_ 6y agoWoah this site is something else. I'm having a really hard time following. What does it do? What is a token?
- egfx 6y agoin short, it let's you create logic to gif animations. And secondary lets you automate unique gif animations at a large scale. A token is a unit that equates to one token per second to use on your recordings. So if you had 50 tokens, you could create about 50 seconds worth of gif animations depending on the FPS.
- okamiueru 6y agoYour comment is so weird to me. Did we check the same page? Are you and alt account that is trying to promote that page?
- voz_ 6y agoI am not an alt of whoever that person is. Which page did you check? Why is my comment weird?
- julianeon 6y agoI'd love to use this, but I don't see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).
- shihn 6y agoPeople have created framework wrappers for this: Rect: https://github.com/linkstrifer/react-rough-notation https://github.com/linkstrifer/react-rough-notation Svelte: https://github.com/dimfeld/svelte-rough-notation https://github.com/dimfeld/svelte-rough-notation Vue: https://github.com/Leecason/vue-rough-notation https://github.com/Leecason/vue-rough-notation
- julianeon 6y agoWow, thanks! That's exactly what I want, with a demonstration code example. I'll be using this.
- 49531 6y agoYou can use querySelectors in React, it's just normal JavaScript. You can also use refs if you don't want to use querySelector.
- julianeon 6y agoI'll look into this, thanks.
- yurry 6y agoI advise you to learn Javascript/DOM before learning high level 'magic' frameworks. You clearly are missing the fundamentals.
- ta1234567890 6y agoLooks really cool. Does anyone know of something like this but that works with the iPad's pencil? Would love to have something like a mix between the Notes app and Etherpad, so that I can take notes using the Apple Pencil, then "replay" the writing process, and hopefully be able to post it online as well.
- airstrike 6y agoAs someone who lives and breathes in a hand-annotated world every day, this is incredibly helpful. I can't believe it exists for free. Thank you
- thadk 6y agoThis can be used in an ObservableHQ notebook as demonstrated here: https://observablehq.com/@thadk/rough-notation-example https://observablehq.com/@thadk/rough-notation-example
- antibland 6y agoAmazing examples. Great library. Coupled with the Intersection Observer API[0], this software could add a lot of value to an instructive app or website. Imagine these beautiful annotations tastefully animating as various elements are observed as the user scrolls. [0] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio...
- d33d33 6y agoreally nice - would be great if there would be a tufte-style feature (animated info box next to the highlighted text) or sth. similar