Show HN: I reverse engineered top websites to build an animated UI library
35 comments
·April 24, 2025toddmorey
"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
armedin
Yep, totally fair point and I get the skepticism. Just to be clear, some components are inspired, and some are also patterns and ideas I created myself along the way. There's a lot of work behind the scenes: recreating animations, building variants, styling, packaging for NPM etc. (the code is written using MUI, so it's all original). I'm trying to bring that level of polish to a wider set of devs who may not have the time to build it all from scratch, and I'm giving credits to the original inspirations where due.
Appreciate the feedback though; it's a valid concern.
uncomplexity_
why, what's wrong with it?
on the minecraft tips app, you are paying money for something that saves you time.
on this one, you are paying for the same thing here, unless you wanna reimplement it by your own.
and there are lots of avenues to have an edge, such as support for other framework / libraries, better / more efficient implementation, more configurability / control on possible variants.
please don't shoot down people on their attempts to make a living on their efforts.
Fokamul
Web would be a better place without UI animations.
null
EvanAnderson
I agree with you so much.
UI animations and needless "glitz" is inconsiderate of low-vision users, users who might have poor technical skills and who rely on UI consistency to accomplish tasks, users with low-spec hardware, users who are forced to use remote framebuffer protocols over low bandwidth connections, and of the environment (by way of increased processing power and electricity required).
Griever
Personally I don’t mind them and sometimes find them quite tasteful. Fortunately a lot respect ‘prefers-reduced-motion’ these days.
armedin
The early 2000s was the golden era of web.
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.
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.
Mystery-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.
zeroq
This looks like an AI generated project with a very little effort put into polishing what came out.
I mean, if you find people willing to pay you money then great, good for you. But I don't see anything I wouldn't be able to find on sites like css tricks or tympanus for free.
And I don't even know what I'm paying for, there are no real examples on the page.
But I'll put it in my bookmarks. As soon as you have more components, and I'll find some spare time, I'm willing to give it a try and launch reverse-reverse-ui.com with all components available for free.
random42
It’s such a hateful and mean comment. OP, please ignore this.
If you want to spend time building your own library, like OP has , and release it , god speed — that is if you can. In the meanwhile, OP actually spent energy to build and launch something, which is commendable.
morteify
The Caesar Cipher component is displaying incorrectly in Safari. Its elements are positioned off-center. It works fine in Chrome and Firefox.
armedin
Thanks for pointing it out! I'll fix it.
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.
caseyy
I love that the glowing orb is a component. Many websites could use an orb.
armedin
hehe that's one of my favourites as well. You have good taste :)
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