Drawably: Hand-Drawn UI Controls

(github.com)

38 points | by ingve 4 days ago

16 comments

  • voidUpdate 3 hours ago
    Maybe I'm old fashioned, but usually when something says "hand drawn", I'd expect it to be hand drawn, not machine drawn
    • small_scombrus 1 hour ago
      Truthful descriptions of products are so last century
    • mb_thd 2 hours ago
      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.
  • brw 1 hour ago
    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.
  • matherial 1 hour 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...

  • Schlagbohrer 1 hour ago
    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.
    • JLO64 1 hour ago
      I don't mind that since it helps with legibility which I find some fonts with a hand drawn aspect to them have.
    • bluerooibos 1 hour ago
      Agreed.
  • reeeeee 1 hour ago
    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.

  • BariumBlue 2 hours ago
    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.

    • Vinnl 2 hours ago
      FWIW, Excalidraw uses (or at least originally used to, I didn't check again) the similar project Rough.js: https://roughjs.com/
  • vunderba 4 days ago
    Reminds me of wired elements (which uses Rough.js under the covers).

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

  • robertlagrant 2 hours ago
    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

  • jagged-chisel 3 hours ago
    Where can I see a live demo that works on mobile?
    • isuckatcoding 1 hour ago
      Came here to say the same thing. Easiest is just to use GitHub pages.
  • bluerooibos 1 hour ago
    Neat! I wonder if the page performance suffers much if it's a large page full of similarly styled components.
  • _usefulcat 3 hours 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

  • jen20 35 minutes ago
    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.
  • sublinear 1 hour ago
    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.

  • doobiedowner 3 hours ago
    The comic sans of UI controls?
  • RamblingCTO 2 hours 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.

  • hathym 1 hour ago
    [dead]