TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

696 pointsby shihnalmost 5 years ago

26 comments

jwilberalmost 5 years ago
Love this (and all of Preet’s work).<p>Made a statistics visual awhile back using roughjs[0], seems like the perfect setting with which to add roughnotation :)<p>[0] <a href="https:&#x2F;&#x2F;www.jwilber.me&#x2F;permutationtest&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.jwilber.me&#x2F;permutationtest&#x2F;</a>
评论 #23345730 未加载
评论 #23347542 未加载
评论 #23344204 未加载
评论 #23346137 未加载
heyhihelloalmost 5 years ago
Amazing! There are many cool libraries now thanks to author.<p>1. Roughjs - rough primitives <a href="https:&#x2F;&#x2F;roughjs.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;roughjs.com&#x2F;</a><p>2. roughViz - rough data visualization <a href="https:&#x2F;&#x2F;github.com&#x2F;jwilber&#x2F;roughViz" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jwilber&#x2F;roughViz</a><p>3. Wired-elements - rough wireframes <a href="https:&#x2F;&#x2F;github.com&#x2F;wiredjs&#x2F;wired-elements" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;wiredjs&#x2F;wired-elements</a>
antiblandalmost 5 years ago
Amazing 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.<p>[0] <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Intersection_Observer_API" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Intersectio...</a>
grizzlesalmost 5 years ago
This is cool. Slightly OT but I saw the word animate and I got excited because I&#x27;m in the market for some easy to use animation software. Krita &amp; Synfig just aren&#x27;t doing it for me.<p>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 &#x2F; the name of it?
评论 #23347206 未加载
评论 #23343441 未加载
评论 #23344184 未加载
评论 #23345884 未加载
benatkinalmost 5 years ago
This is really cool, but after looking at your twitter account and ROUGH.JS, so far I&#x27;ve been most impressed by this [0], which only had one retweet since I got to it. I&#x27;m a sucker for interesting maps.<p>0: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;preetster&#x2F;status&#x2F;1250862620103438336" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;preetster&#x2F;status&#x2F;1250862620103438336</a>
评论 #23341466 未加载
alixanderwangalmost 5 years ago
Being able to add small text between margins would enable the ability for an app&#x2F;extension to let person A markup an article with their thoughts and emphasis, and share it with person B. That&#x27;s something I&#x27;d personally use.
评论 #23340519 未加载
NickBuseyalmost 5 years ago
This may be one of the best &#x27;product&#x27; landing pages I&#x27;ve ever seen. Kudos.
GordonSalmost 5 years ago
Not sure what I&#x27;d use this for, but I love the look of it so much I feel like I need to find an excuse!<p>Can I ask what use case you had in mind when creating this?
评论 #23340886 未加载
评论 #23342925 未加载
howmayiannoyyoualmost 5 years ago
Should be a Chrome Extension. Would absolutely kill as one.
评论 #23342753 未加载
评论 #23340410 未加载
XCSmealmost 5 years ago
This is cool. I wonder if this could just be a CSS library instead, where you just add the class &quot;annotate-circle&quot; to an element and it will use pseudo-elements (:before, :after) to draw the lines.
评论 #23342764 未加载
airstrikealmost 5 years ago
As someone who lives and breathes in a hand-annotated world every day, this is incredibly helpful. I can&#x27;t believe it exists for free. Thank you
29athrowawayalmost 5 years ago
This could be the blink + marquee of this generation.
评论 #23341440 未加载
onemoresoopalmost 5 years ago
This is really cool. I like that it brings a bit of human touch to webpages. How does it work?
评论 #23340838 未加载
评论 #23340220 未加载
wes-kalmost 5 years ago
Looks 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.
评论 #23341556 未加载
评论 #23342059 未加载
dpeckalmost 5 years ago
That is beautiful and very well done. I might drop this onto my personal homepage today for a nice emphasis underline in the header.<p>Bravo!
评论 #23340047 未加载
ta1234567890almost 5 years ago
Looks really cool. Does anyone know of something like this but that works with the iPad&#x27;s pencil?<p>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 &quot;replay&quot; the writing process, and hopefully be able to post it online as well.
thadkalmost 5 years ago
This can be used in an ObservableHQ notebook as demonstrated here: <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@thadk&#x2F;rough-notation-example" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@thadk&#x2F;rough-notation-example</a>
chadlavialmost 5 years ago
This is neat but I totally thought it was going to let me doodle on the page myself
评论 #23341940 未加载
tumblenalmost 5 years ago
Love it! Looking forward to using it in future projects!
julianeonalmost 5 years ago
I&#x27;d love to use this, but I don&#x27;t see an easy way how to using the frameworks I know, React (well) and Svelte (a bit).
评论 #23343274 未加载
评论 #23343438 未加载
评论 #23343341 未加载
yaronealmost 5 years ago
Displays are really wide today. Most web pages are relatively narrow, content-wise.<p>Opportunity to use the empty space for markup.
Axsuulalmost 5 years ago
This is great!<p>Does anyone know if there&#x27;s a similar library that can do rough notations like this within Sketch?
Ptrullialmost 5 years ago
Great job on this! What made you think of this product and how long did it take you to make?
评论 #23343332 未加载
d33d33almost 5 years ago
really nice - would be great if there would be a tufte-style feature (animated info box next to the highlighted text) or sth. similar
m88malmost 5 years ago
nice. going to think on ways to use it!
talkingheadalmost 5 years ago
a text popover feature would be super useful!
评论 #23343355 未加载