Drawably: Hand-Drawn UI Controls

Maybe I'm old fashioned, but usually when something says "hand drawn", I'd expect it to be hand drawn, not machine drawn

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.

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...

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.

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.

Reminds me of wired elements (which uses Rough.js under the covers).

https://github.com/rough-stuff/wired-elements

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.

[0] https://d2lang.com/tour/sketch

Where can I see a live demo that works on mobile?

Neat! I wonder if the page performance suffers much if it's a large page full of similarly styled components.

> 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

This 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.

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.