HN Reader

Show HN: I reverse engineered top websites to build an animated UI library

156

102

Looking at websites such as Clerk, I began thinking that design engineers might be some kind of wizards. I wanted to understand how they do it, so I started reverse-engineering their components out of curiosity. One thing led to another, and I ended up building a small library of reusable, animated components based on what I found. The library is built in React and Framer Motion. I’d love to hear your feedback

The components looks really cool! However, you're using dark pattern by tricking the user with "Login to access the code" button. After I've gone through the process of signing up and logged in, I still couldn't access the component code. The same button then said "Unlock the code". Clicking on the button takes you to the Pricing page where you can pay $50 to see the component code. That's a dark pattern.

9 months agoby Mystery-Machine

This is just selling components someone else wrote, right?

Five years ago I could understand the appeal and appreciate the effort required. Today, it’s a matter of seeing others work, taking a screenshot, asking ai to recreate it, and then packaging it into a “library” and selling it for $50.

Maybe I’m alone in the sentiment, but it just rubs me the wrong way.

9 months agoby jwilber

I would (and do) pay for this type of UI library. Especially in design, everyone is inspired by everyone else, taking inspiration and ideas from elsewhere is normal... but branding this as "reverse engineered" makes it sound stolen. From the comments, it seems like you're actually just inspired by the work of others, as you've apparently written the code from the ground up, which means you're talented and capable. You should change the branding. Even a name change to something as simple as "Inspired UI" would be a meaningful improvement. I'd like to buy this but I'm not paying for stolen code, and as it's branded now, it seems like stolen code, and I'd have no plausible deniability if it turns out to be stolen code.

9 months agoby abxyz

Some of the site definitely looks Rauno-inspired, the back button on a component detail view even says "< Craft" like on his site: https://rauno.me/craft https://rauno.me/craft/interaction-design

9 months agoby PStamatiou

Looks cool, but the site is very heavy! I have an RTX 3070 GPU, and GPU usage went shot to 70% when I opened this website on Firefox.

9 months agoby naavis

Ah yes, the classic "reverse engineering" (read: blatant design theft) turned into a quick profit scheme. Peak entrepreneurship.

Their X profile proudly displays "UK-based" while conveniently ignoring basic UK business regulations: no company information, no proper invoicing, no VAT details for B2B sales, and mysteriously missing business address requirements.

Looks suspiciously like someone running an under-the-table operation, courting legal trouble not just from the original designers they're "inspired by," but from Her Majesty's Revenue & Customs who tend to take a rather dim view of tax avoidance.

9 months agoby sdoering

Lot of people sell similar components (or give them for free), but what I would really be interested in is a course how to make them (properly, e.g. with a11y and performance considerations). Especially in your case, since you are basically selling somebody else's work (the original design), which is a shitty thing to do. You could monetise this in a much more ethical way.

9 months agoby frabia

I thought I was going to get the code, like the raw code, because I want to modify some styles/components. Instead, I received the component, and I can't make modifications. For example, the "DataFeedingIn" component; I want to be able to change the design, but I received the component without much capability for modification.

i pay $50 for nothing :(

9 months agoby pompeii

This is really impressive. As a portfolio alone, wow -- as a component set, fantastic.

Are these easy to include in Astro? I'd think so (avoiding React etc.) I am currently building with Astro and keeping things as minimal in terms of additional JS files etc as possible.

Couple of notes / questions:

* https://reverseui.com/craft/text-blur-reveal has 'coming soon' from last October, and it's really cool, I'd be tempted to buy it for this alone

* The top of your site has what looks like the dot logo component, but showing numbers and with a Matrix-like effect. Can that be a component too?

* How customisable are these? I saw one comment saying they were not at all and the code was not modifiable. That's a deal-breaker: we all want our own spin on things, not to copy blindly.

9 months agoby vintagedave

What about licensing? As you sell them...

9 months agoby lovegrenoble

Would love if the site had some more information about how the components are implemented, eg does it use tailwind so they're easily modifiable, is there a light mode and a dark mode for each, can you update the animations to fit your needs, etc. They look good though!

9 months agoby ziftface

How are these components from an accessibility perspective? i.e. does the dots logo work with screen readers?

Fancy animations is all well and good until you start making the website unusable for people who need screen readers, etc

9 months agoby VoidWhisperer

Took me a bit to figure out what the four circular icons on the bottom are for (magic wand, robot, envelope, crescent moon). I really wish they had tooltips.

Still doesn't make sense to me why the magic wand just points to the home page (I would have assumed it meant "edit this UI component), the robot links to a profile page (mine? requires login so didn't try), the envelope points to x.com (I expected an envelope for "email this to a friend"), and the crescent moon toggles between light/dark mode (obvious only in retrospect).

9 months agoby kmoser

I don't see any relation with "reverse-engineering". It's just a bunch of animated widgets that look like on other sites.

9 months agoby self_awareness

The Caesar Cipher component is displaying incorrectly in Safari. Its elements are positioned off-center. It works fine in Chrome and Firefox.

9 months agoby morteify

"Animated UI" is show stopper.

9 months agoby hexo

I love that the glowing orb is a component. Many websites could use an orb.

9 months agoby caseyy

This is fantastic work! They look beautiful. I hope you make lots of money from them because I know it's a lot of work. I'll be a customer in the near future for sure.

- React - check

- Framer Motion - check

This hit the spot for me.

9 months agoby zacksiri

Components look great. I would pay for these if I needed one of them for a project. It would be great if they worked in React Native too.

9 months agoby ajjenkins

Thanks for sharing, it looks very good. Unfortunately on my system it has very low fps due to software rendering.

9 months agoby bflesch

Nice job. Not a fan of react myself, pretty allergic to it actually, but these look nice.

9 months agoby replwoacause

Let me compensate you for the wait and the battery drain with some pretty animations.

9 months agoby mediumsmart

The quality is very impressive! Congrats on the launch.

9 months agoby freetonik

[flagged]

9 months agoby zeroq

Absolutely beautiful set here. I'd pay for à la carte.

9 months agoby handfuloflight

is this open sourced?

9 months agoby badmonster

  "reverse-engineering their components out of curiosity" - Fantastic
  sharing your learnings with the community - Fantastic
  Attempting to make subscription money off the clones - Not so fantastic

Sorry... something about that last bit just really hit me wrong. Like when people make a paid Minecraft Tips "App" that's just content scraped from the web.

9 months agoby toddmorey

Web would be a better place without UI animations.

9 months agoby Fokamul