5 ms·
Drawably: Hand-Drawn UI Controls
- vunderba 24d agoReminds me of wired elements (which uses Rough.js under the covers). https://github.com/rough-stuff/wired-elements https://github.com/rough-stuff/wired-elements
- _usefulcat 19d ago> Every mount generates a fresh pen sketch from seeded randomness, and the stroke boils like an animated doodle. I've seen many hand drawn effect css libraries but what I like about this one is that each control has its own unique stroke. Pretty neat
- voidUpdate 19d agoMaybe I'm old fashioned, but usually when something says "hand drawn", I'd expect it to be hand drawn, not machine drawn
- mb_thd 19d agoMy thoughts exactly. At the very least the author should add a disclaimer that it's not actually hand-drawn but only looks like it.
- small_scombrus 19d agoTruthful descriptions of products are so last century
- doobiedowner 19d agoThe comic sans of UI controls?
- jagged-chisel 19d agoWhere can I see a live demo that works on mobile?
- isuckatcoding 19d agoCame here to say the same thing. Easiest is just to use GitHub pages.
- BariumBlue 19d agoThose feel very ink-blobby - like they were drawn by someone who can barely hold a pen stick-stopping across each line and then redoing parts of each line to correct mistakes. Looks elementary schooler. I prefer Excalidraw look and feel - a couple of smooth and mostly straight lines per line, which looks more like intentional competence with a quick and imperfect tool.
- Vinnl 19d agoFWIW, Excalidraw uses (or at least originally used to, I didn't check again) the similar project Rough.js: https://roughjs.com/ https://roughjs.com/
- RamblingCTO 19d ago> Strokes boil gently: three frames of the same sketch, micro-wobbled around a shared base, cycled by pure CSS at 1200ms. lol. I was kinda excited to use it for AI-generated wireframes but this is such a turn off.
- robertlagrant 19d agoThis reminds me of d2lang's sketch mode[0], which I really like. Amazing if you want to publish a diagram for comment but have it not look so official someone can steal it and promise it to a customer with your name attached. Naming no names. [0] https://d2lang.com/tour/sketch https://d2lang.com/tour/sketch
- Schlagbohrer 19d agoThe effect is ruined when the text in the buttons is perfect normal font. It should be hand drawn too otherwise it looks really off.
- bluerooibos 19d agoAgreed.
- JLO64 19d agoI don't mind that since it helps with legibility which I find some fonts with a hand drawn aspect to them have.
- bluerooibos 19d agoNeat! I wonder if the page performance suffers much if it's a large page full of similarly styled components.
- brw 19d agoI don't necessarily care about AI use in projects, but it is somewhat ironic seeing a UI library imitating "hand-drawn" elements which is itself made entirely (I assume, reading the readme and commits) using AI.
- sublinear 19d agoIs this just the same tired old SVG turbulence filter people have been using since forever? Why would I introduce a "left-pad"-like dependency into my UI? I don't want to depend on these half-assed implementations of UI elements. I want my own or those of a better library and to merely have the sketchy style.
- reeeeee 19d agoRegardless of what the other commenters are saying, I really like this. It looks cute and neat, and is the kind of stuff that I like to occasionally see on HN. Might be a good set of components for a simple no nonsense scratchpad webpage or something similar.
- hathym 19d ago[dead]
- deleted 19d ago[deleted]
- jen20 19d agoThis seems to be somewhat useful (similar to Balsamiq Mockups back in the day) for communicating "this is a work in progress, and not the final thing" to people (usually the non-technical) who see a polished UI as indicative that an entire system is finished.