Drawably: Hand-Drawn UI Controls
github.com37 points by ingve 5 days ago
37 points by ingve 5 days ago
This is clearly a nice idea. But I can't believe the author looked at the "demo" image of their vibecoded creation and thought "ship it, good enough". You can't even read the third button!
https://github.com/Danilaa1/drawably/raw/main/assets/demo.sv...
There are countless good examples to tap into, say:
https://cdn.dribbble.com/userupload/41702111/file/original-6...
Maybe I'm old fashioned, but usually when something says "hand drawn", I'd expect it to be hand drawn, not machine drawn
My thoughts exactly. At the very least the author should add a disclaimer that it's not actually hand-drawn but only looks like it.
I 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.
The effect is ruined when the text in the buttons is perfect normal font. It should be hand drawn too otherwise it looks really off.
I don't mind that since it helps with legibility which I find some fonts with a hand drawn aspect to them have.
Regardless 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.
Those 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.
FWIW, Excalidraw uses (or at least originally used to, I didn't check again) the similar project Rough.js: https://roughjs.com/
Reminds me of wired elements (which uses Rough.js under the covers).
This 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.
Neat! I wonder if the page performance suffers much if it's a large page full of similarly styled components.
Where can I see a live demo that works on mobile?
Came here to say the same thing. Easiest is just to use GitHub pages.
> 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
Is 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.
The comic sans of UI controls?
> 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.
[dead]
