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.

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

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

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.

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.

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.

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?

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.

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.

> 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

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

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.