Drawably: Hand-Drawn UI Controls

(github.com)

35 points | by ingve 4 days ago

14 comments

  • voidUpdate 2 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
    • mb_thd 56 minutes 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 33 minutes 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.
  • Schlagbohrer 45 minutes 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 3 minutes 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 36 minutes ago
      Agreed.
  • reeeeee 14 minutes 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 1 hour 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 53 minutes ago
      FWIW, Excalidraw uses (or at least originally used to, I didn't check again) the similar project Rough.js: https://roughjs.com/
  • robertlagrant 57 minutes 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

  • vunderba 4 days ago
    Reminds me of wired elements (which uses Rough.js under the covers).

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

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

  • sublinear 17 minutes 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 2 hours ago
    The comic sans of UI controls?
  • RamblingCTO 1 hour 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 7 minutes ago
    [dead]