Setting aside the slowness, tho I am not a designer, these all strike me as just visual noise. I think animated borders, animated shiny text, animated meteor backgrounds today are no better than an early 2000s page with animated elements. It doesn't help communicate, it just attracts the eye until one learns to tune it out. And it kinda tells me that we're not really learning to build better stuff over the decades.
What is the difference between the animated Border Beam in this library and the animated hr in the vintage example of an archived geocities page?
I agree that a lot of these components are more distracting than useful. I do like the animated border around buttons, though; that would be very useful to draw the eye towards the "default" option on a page, as long as it was the only one.
This is the thing many of these shouldn't be used just willy nilly, things like the chaser around the border of a container, is awesome as a notification of a change for instance, or the button effect same thing, i'd hate a site that used these nonstop running, but something thats triggered by an event happening is much nicer.
That said, WTF is with all these "libraries" thats basically just collections of shit from codepen stacked in 1 place that they thought was cool, shit most of these don't even have cohesion from one to the other really besides... "cool motion"
I very much dislike the tweet that OP uses on the Magic UI site that's directed at Linear:
"Companies spend $30,000 and several weeks to get designs like this"
Yes. Because being a first or early mover is expensive. You commoditizing their style after they've put in all the brain work to create or build it isn't the same thing.
Also, isn't the point of design engineering to be capable of coming up with relatively original and innovative UI?
> isn't the point of design engineering to be capable of coming up with relatively original and innovative UI?
that's definitely why I got into it years ago, but it seems like it has lost it's meaning and been simplified into "engineer that likes design" or "engineer that wants to be good at design"
It definitely is sad to see people not want to deviate even a little bit. I've seen at least 3 instances on Twitter where someone launched a product and they had the same landing page as another popular app even where certain components don't make sense.
A classic example is the rotating globe that you can click and drag. That was usually meant for showing sales happening across the world, but now people are just throwing it in a card with the header: "Innovative new features".
Like there's just no thought put into anything and what bothers me is how popular low-effort is becoming in tech. Startling.
this feels more like something for NON design engineers, ie, highly opinionated cosmetics and animations that you can just drop in. It's not a UI library such that you could design UIs with, wouldn't fit well if you have your own design systems, you actually need a UI library that this would then layer over the top of... but the perf impacts of this makes it feel more "gimmick" than a good tool for someones design toolbelt.
How is this a "library for design engineers"? It's a collection of one-of Dribbble designs. Bento Grid? Tweet Card? Animated Backgrounds? These are showcases/cookbook/examples, not a library for design.
I'd be interested in an analysis of common patterns in marketing pages. We have a pretty good standardized set of components for productive interfaces (buttons, fields, tabs etc.)
But looking at this makes me wonder if there really is a common set of abstractions for marketing pages beyond just throwing out 200 templates and calling them blocks.
Some of these are very nice and not simple for most people to implement (animated button border, for example). But some others are so trivial I wonder why they bothered. For example Linear Gradient:
https://magicui.design/docs/components/linear-gradient
Looking at performance recording in Chrome, it's not cobe.
Cobe does not seem to trigger huge time spent in Layerizing and Style recalculations, which are the main areas the web page spends time for me.
Curiously it's not as bad on corporate windows laptop that has worse specs, and which was outputting to 30fps-locked display (personal laptop was rendering to 165Hz screen...)
Love this. I tried my hand at reverse engineering some of these components on linear and similar websites but did not get good results. I love the fact these are configurable and free. Something I definitely would have paid for.
The rise of bento box designs [at least for now] is very visually appealing. Glad to be moving away from illustrations. Some of the designs animated with Rive are mind blowing:
https://x.com/alex_barashkov/status/1790748157141213237
Love the design, I don’t know if Vercel (Zeit) pioneered this or if they even took inspiration themselves but it’s beautiful and minimal. The rendering has some issues though.
What's minimal about it? Washed out colors, everything white, and grey font do not make something minimal.
Come on, even the too lines in their call out slide in with unnecessary animations. Everything on the page is moving, bouncing, animating. If it's .minimalism, it's Michael Bay of minimalisms
The simple layout with barely anything to look at except black and white text and a couple of figures is what I’ve been calling minimalism? But you’re right, it doesn’t actually qualify for the definition of minimalism, Idk what to call this type of design, but I enjoy these a lot!
Agreed. It's just so much easier to hire for React. It has become the lingua franca of client frameworks.
There are still many teams that choose to use something else. But experience in React is most easily transferrable. Even if I had a project in Vue, I would still look for React expertise.
That sounds false to me. When was this era and what exactly did it look like? React has been dominant for around a decade, but Angular and Vue still see wide usage and Svelte is somewhat on the rise. (Although retention/interest in Angular has been going down.)[1]
Highly anticipating State of JS 2023 data though...
I'm judging by what I see teams choosing for new projects—both dev shops and corporate/internal devs. Even 5 years ago they might have debated Vue vs React, but there's not even a discussion anymore.
Sure, but how many teams are you observing? My company is split between Vue and React for different projects, and while greenfield new ones are getting React, Vue is not being deprecated here.
I'm building the front ends for a few projects in Vue right now, it's quite pleasant!
It's easy to work with, there's nice router and internationalization packages, ready made components with PrimeVue (though PrimeReact and PrimeNG are nice too; as well as other component libraries), PrimeFlex and Pinia for state management is wonderfully simple and scales pretty far. There's devtools for most browsers, the toolchain isn't super complex and while the ecosystem could be bigger, it's not inadequate either.
The root breadcrumb isn’t a link which was weird. And trying to browse components brought me to just one. I couldn’t find a list of them easily enough.
I'm tending to think that Figma components should not be maintained in a serious way... design artefacts should be ephemeral and I think it's less effort overall if designers reuse or create whatever they need when they need it.
Keeping a huge Figma component library in sync with a component library / design system feels more and more like busy work.
This is a bad generalization - developers should be obligated to provide design artifacts? Then, why can’t I generalize that self respecting designers must provide React code?
I don't even care what it shows due to just how audibly resource heavy it is while showing pretty much nothing other than some simple copy.
There's no way in hell opening the main page should cause so much load my computer sounds like I just opened Cyberpunk 2077 or Doom Eternal at max details, especially given the amount actually rendered (I just opened the page, didn't even scroll anywhere!).
Looking into Chrome's performance metrics it's as if there's constant, ridiculous re-rendering of everything, with just calculating the layering causing CPU fans to go to 80%.
I'm assuming this is platform specific. It's totally smooth for me on a M1 MacBook Pro. Thats with a bunch of tabs open while on a zoom call (gotta do something to pass the time during standup). I find it annoying for other reasons, but I'm not seeing any perf issues on the page.
edit... reading through the other comments I see LOTS of people are having this issue. Not sure why I'm the lucky one, but I went back and clicked through all the pages, still no perceivable lag at all.
I have an M1 MBP too, and while it appeared stable, I saw the GPU usage skyrocket while that page was running in Chrome, around 75% in Activity Monitor (View -> GPU Processes), and reaching close to 100% in iStat Menus.
But it's audibly resource hungry, because it puts so much load my computer immediately jumped to high power cooling due to how much load it puts.
So yes, it's smooth, but that's more because I actually can run both the aforementioned titles at max detail at 4k, not because there's something secret breaking the site for some but not all.
It's pretty awful on a M1 Pro too, at least until the page has fully loaded. I'm assuming all of the inline styles are forcing a few seconds of re-layouts and that kills the initial performance.
Wow I always want to analyze the products and highlight the positives that I found, but at least on Firefox mobile this site was unbearable slow to the point that I have to quit. And being a site build with the product it promotes, it speaks volumes, sorry.
What is the definition of an engineer in your eyes? In some countries there is a legal definition, so developers are not allowed to call themselves engineers unless they have an engineering degree (and not the software kind).
It is not about my personal definition, there are even laws as you said.
I just find it silly to use a definition that you typically need 4-6 years of maths heavy formal education for front end javascript that you can learn on youtube in a month.
I'm one of those "real engineers" that studied 4-6 years of maths, and this gatekeeping feels very silly to me.
Some frontend developers are doing more actual engineering than I did when I was working as an actual electrical engineer, and I was working on buildings and shit.
Not all frontend devs, though, and certainly not the ones straight out of a bootcamp, but a lot are.
But the people building foundations for others to work on (like the target audience for this library) definitely are doing some sort of engineering.
What is the difference between the animated Border Beam in this library and the animated hr in the vintage example of an archived geocities page?
https://magicui.design/docs/components/border-beam
https://blog.geocities.institute/archives/3879