Show HN: I reverse engineered top websites to build an animated UI library
109 comments
·April 24, 2025Mystery-Machine
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.
armedin
I appreciate you pointing that out. That’s not quite the experience I intended. The “Login to access the code” button should’ve been clearer upfront about requiring a purchase. I assumed the CTA button in the landing page would send that message. I'm planning to add FREE components as the library grows, so this is something I will revisit again.
jwilber
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.
armedin
AI isn’t quite at the point where it can recreate high-quality UI components just from a screenshot. Everything in this library was built by hand — no AI, no copied code. Just pure design and engineering effort. There’s a lot of work you don’t see on the surface.
sdoering
> Just pure design and engineering effort
Made my day. At least they have guts. I give them that.
sampullman
Which model can recreate complex animations from a screenshot? That would be incredibly impressive.
jwilber
Any leading model. Ask it to generate the ui from the screenshot. Follow up and describe the required animations, and it will give you the css/js. Do it all the time.
sampullman
Oh, I see. I haven't had much luck generating UI from screenshots, but describing an UI (or animations) clearly does usually get me 75% or more of the way there. I thought I might have been missing something critical.
abxyz
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.
morcus
+1 to this, my first impression before I read this comment was wondering about the legally of using these components.
null
armedin
Honestly I came up with the name pretty quickly without really thinking about how it would sound to the end user. Definitely something I'll rethink; appreciate you pointing it out.
PStamatiou
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
chaychoong
And the "taskbar" at the bottom too!
armedin
Yep, although I'm seeing the "Dock" more and more being used in recent websites
armedin
Yep, I'm glad you noticed! There are bits and pieces from different sites grouped together
naavis
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.
FrancoisBosun
I use an older iPad and the page crashed so hard the Home button didn’t do anything for about 30 seconds. The iPad eventually turned off, because I had pressed the power button, to no avail, a couple of times.
armedin
Thank you! To be fair, there's plenty of room for optimisation. I have only tested on an M1 on Chrome. It's a tradeoff between looking cool and being performant
ivanjermakov
> It's a tradeoff between looking cool and being performant
Can't disagree more. You can almost always have both, performance optimization is a thing.
armedin
True — good optimization can get you both. It used to be way less performance, I already tried to optimise (at least until my machine was running it fine), but it seems like there's still much more that can be done
null
hsshhshshjk
Are these components only tested in chrome?
sdoering
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.
davethedevguy
I agree with most of what you said, but just want to clarify for others that VAT registration is optional until revenue is high enough to reach the threshold.
Not being VAT registered when starting out is not necessarily a sign of a tax dodge.
makingstuffs
This is correct. You do not need to register a business for VAT in the UK unless you hit a specific threshold of income (I think £80k was the figure when I last checked)
crmi
These are not required for self employed (nor is VAT registration up until certain revenue, as gp points out). However given nature of business and potential liability, seems LTD company should be the route to take.
armedin
Thanks for the advice, I'll look into that
matsz
> Her Majesty's Revenue & Customs
Nitpick: the "H" in HMRC stands for "His", since it always changes to match the current monarch.
sdoering
Yeah - you are right. I still think of "The Queen". Still not being used to the Brits now having a King again.
armedin
Thanks for pointing out the regulations part, I didn't realise I was giving that kind of impression. To be honest, it's my first time doing something like this, and I'm going to take the necessary steps as things grow.
frabia
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.
armedin
Actually the initial plan was for this to be a course of demonstrating how to build these components. Perhaps if there's enough demand, I might consider that. And I get that not everyone will agree with the approach, but I’m trying to be respectful about it.
ZachSaucier
There are other, similar sites which do this. One example: https://madewithgsap.com/
pompeii
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 :(
armedin
Did you not receive the Github invitation? If not, please go to the profile and enter your github username to send an invitation.
There are 3-4 components which haven't been synced yet (cannot copy the raw code from the site), one being DataFeedingIn component. You can still access the code through Github.
vintagedave
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.
armedin
I'm delighted to hear you like the library! The 'coming soon' components mean they haven't been packaged yet, and specifically the text-blur-reveal is tricky to do. You can, however, access the raw code on GitHub. Essentially you have 2 ways, either via the npm package, or copying the raw code. There are more components coming, one being the Matrix-like effect. I haven't worked with Astro before, so cannot give an input on that.
ziftface
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!
armedin
Shoot, I forgot to add the FAQ section. Thank you! The components are built with Framer Motion and MUI (just for the sx prop). You will have access to the raw code, github repo and the npm package. If the component needs to be modified heavily, you can use the raw code. There's still more work that needs to be done to handle the full customisation via the npm package. I didn't use tailwind strictly because existing solutions all tend to use tailwind and shadcn, leaving other developers who don't use tailwind with not many options.
VoidWhisperer
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
armedin
That's a great question. Right now, the components serve more as fancy decoration. But making the whole library more a11y-friendly is something I plan to do.
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