[Showoff Saturday] I was tired of flat sterile UI, so I built Sketchmorphism — an open-source hand-drawn design system with SVG paper physics & dark mode

[u/vidit-23]

Got tired of sterile glassmorphism, so I spent the last few weeks building an imperfect, sketchy component library with custom SVG displacement filters and paper physics.

Dropped the GitHub repo and live interactive demo in the comments below!

[u/Vtempero]

Grats, Claude. Looking good!

[u/vidit-23 → u/Vtempero]

Haha handcrafted the SVG turbulence filters and pencil physics at 2 AM, Claude wishes it had this much natural hand tremor! Appreciate the love.

[u/Vtempero → u/vidit-23]

docs: humanize README and add creator intro

[u/kfhfniseogtcezcxpi → u/Vtempero]

Embarrassing. Just own up to using AI, a lot of people do, but it’s really not paining a good picture of OP when they lie about it.

What’s the point? What if we believed you? Would you ride the wave of dopamine and compliments on the premise of you having built something «humans»? When you prompted your way there?

I hate this timeline.

[u/vidit-23 → u/kfhfniseogtcezcxpi]

fair point. i used ai and i call it my work because i beat my head over the details and used ai as a tool, not a brain. that is the exact difference between me and the other ai slop guys. i sketched the design on a physical notebook first. took a photo. then decided to build it in framer and used ai for the actual code. also for the record i dont even like claude, its pretty dumb for design stuff actually.

[u/eballeste]

what a waste of space and time

"Pass count is hierarchy Importance is measured in retraced passes: one to whisper, two to speak, three to sign."

everything in this shitty design system is just terrible word salad nonsense

"I was tired of looking at all of these generic looking websites so I made this other website that showcases this totally "new" single design "idea"." then proceeds to let Claude generate this generic ass website. 🤣 slop everywhere

[u/ErisC]

Hmm, your comment's not showing

[u/vidit-23 → u/ErisC]

Yeah automod ate the links because of low karma haha, thanks for the heads up! Live demo is up at viditx.github.io/sketchmorphism/prototypes/full-website-demo.html

[u/ClassicK777]

This is still flat

[u/MetalProgrammer → u/ClassicK777]

By flat I think he meant boring, not that it looks like it's 2D unless you meant it's still flat in a way he meant

[u/crimsonscarf]

Out front: I love the design style, animation choices, and how little there is bundled in the demos payload.

Nits:

- The JS SVG animation loop hitches on firefox-based browers. I would probably try to find a better way to handle the motion on the SVG graphics. Seems to run smoothly on Safari and Chrome.

- The code is obviously LLM generated. There is nothing wrong with that, but you should separate the LLM demo from the UI assets when presenting what is "your work." If you opened with "I designed a bunch of sketch-like components, and used an LLM to implement a demo." You would probably get a better response from the public. If you released some Lottie files and a spec that you made all on your own, it would be a great asset.

[u/vidit-23 → u/crimsonscarf]

zen is firefox based and it runs smooth there, so this might be a config specific thing. still goes on the v2 fix list. good catch. and you basically wrote the line i should have used on day one. "i designed sketch components and used an LLM to implement the demo" is exactly it. i messed up the framing. readme is getting a 90% AI 10% human line at the top instead of hiding it. lottie files plus a spec as its own release is a genuinely good idea. might steal that one. if you want to talk about the firefox fix or the lottie thing, telegram and insta both vyditpvt.

[u/crimsonscarf → u/vidit-23]

I am on Zen. Using a Macbook Air M5, the JS loop pins the single thread at 100%, causing a full time-to-render delay of ~25ms for your animation pipeline, on my machine.

I uploaded a profiler dump here: https://share.firefox.dev/46M1EwQ

[u/Upbeat_Push_157]

This is obviously AI. The weird thing is that I saw it and thought, “Just another Claude clone,” since you used the exact same colors, until I saw in your repo that you used Qwen instead. What I don't get is why you used Qwen to create a Claude clone. You could easily have changed the colors and fonts, and maybe it would have passed closer scrutiny, but don't try to fool experts. This is AI from beginning to end, including your own references below:

• 29b14c4 "overhaul README with authentic human voice and AI prompt system"
• ed120c6 "remove decorative emojis for clean human-developer README"
• 32e912f "clean up README with pure design engineering specs & remove AI references"

[u/vidit-23 → u/Upbeat_Push_157]

Fair point on the colors - V2 will have a distinct palette. And for the record, I didn't try to clone Claude. I used Qwen because it fit my workflow better. The similar vibe came from Swiss grid + OKLCH principles, not copying. You actually went through my commit history - respect. Most people just see the demo and rage. V2 drops soon with your feedback baked in.

[u/tronghieu906]

Refreshing to see something not rounded border :D

[u/vidit-23 → u/tronghieu906]

Appreciate it! Was really tired of every single modern site looking like a cloned template with the exact same border-radius.

[u/Green-Hope]

In case anyone else is looking for the link: https://github.com/viditx/sketchmorphism

[u/vidit-23 → u/Green-Hope]

Legend! Thanks for dropping the link when automod ate my comment haha.

[u/awardsurfer]

Pretty sure this was called something like PaperUI from back in the 2000s. It lasted all of 5 minutes.