[HN Gopher] Show HN: I reverse engineered top websites to build ...
       ___________________________________________________________________
        
       Show HN: I reverse engineered top websites to build an animated UI
       library
        
       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
        
       Author : armedin
       Score  : 50 points
       Date   : 2025-04-24 17:47 UTC (5 hours ago)
        
 (HTM) web link (reverseui.com)
 (TXT) w3m dump (reverseui.com)
        
       | bflesch wrote:
       | Thanks for sharing, it looks very good. Unfortunately on my
       | system it has very low fps due to software rendering.
        
         | armedin wrote:
         | Thank you! What system are you running it on?
        
       | freetonik wrote:
       | The quality is very impressive! Congrats on the launch.
        
         | armedin wrote:
         | Thank you, appreciate it!
        
       | naavis wrote:
       | 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.
        
         | armedin wrote:
         | 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
        
       | toddmorey wrote:
       | "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.
        
         | armedin wrote:
         | 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.
        
       | caseyy wrote:
       | I love that the glowing orb is a component. Many websites could
       | use an orb.
        
         | armedin wrote:
         | hehe that's one of my favourites as well. You have good taste
         | :)
        
       | ziftface wrote:
       | 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 wrote:
         | 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.
        
       | handfuloflight wrote:
       | Absolutely beautiful set here. I'd pay for a la carte.
        
         | armedin wrote:
         | Appreciate it! A la carte is something I've thought about, but
         | wouldn't work for this case. Feel free to reach me out on X
        
       | Fokamul wrote:
       | Web would be a better place without UI animations.
        
         | armedin wrote:
         | The early 2000s was the golden era of web.
        
       | morteify wrote:
       | The Caesar Cipher component is displaying incorrectly in Safari.
       | Its elements are positioned off-center. It works fine in Chrome
       | and Firefox.
        
         | armedin wrote:
         | Thanks for pointing it out! I'll fix it.
        
       | hexo wrote:
       | "Animated UI" is show stopper.
        
       ___________________________________________________________________
       (page generated 2025-04-24 23:00 UTC)