Magic UI: UI Library for Design Engineers

abeppu

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?

https://magicui.design/docs/components/border-beam

https://blog.geocities.institute/archives/3879

rmdashrfv

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?

drbig

I wish that were this MUI: http://www.sasg.com/mui/

Oh, the nostalgia: http://www.sasg.com/mui/preview.gif

keithnz

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.

troupo

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.

nprateem

Under construction page template doesn't have an animated gif of a workman digging a hole. No flashing lights either. Hard pass.

hasanas

Extremely slow and sluggish. Ironic to have UI library's website not entice you with itself...

salmonfamine

It's okay to just say, "designer."

yu3zhou4

Looks great. The website is sluggish on Firefox tho

darepublic

Good idea. Laggy on my android Firefox browser tho

toddmoy

Interesting how the Border Beam component uses the exact same inbox example as ShadCN/ui.

- https://magicui.design/docs/components/border-beam - https://ui.shadcn.com/

datavirtue

Literally crashed the DDG browser on my phone. Never seen anything like it.

SebastianKra

These look very specific.

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.

habosa

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

It's just passing JS properties to the `linear-gradient()` css function which is already well documented on MDN. I can't see what value Magic UI is providing there ... https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/li...

ushakov

The reason your website is lagging so much is because of the globe. I have reported this a while ago: https://github.com/shuding/cobe/issues/78

antigirl

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

uptown

So basically a ShadCN/UI rip-off?

titipoco

Looks sleek, but resource-hungry to the point of absurdity.

gsanderson

Pretty ... but using it my CPU fan sounds like a jet about to take off.

Alifatisk

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.

mantesso

looks good but made my gpu fans spin

jzig

It saddens me nobody builds similar libraries for Angular.

Waterluvian

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.

sunshinerag

Broken on Safari. https://snipboard.io/wM5smG.jpg

croes

Sorry but to me most of them are useless animations that create distractions from the content.

Like the blink or marquee tag of Internet Explore reloaded.

flemhans

What files are they talking about?

gregolo

Nice, but your site is buggish

andreygrehov

These days, every self-respecting library must provide Figma components.

ilrwbwrkhv

So so sluggish

jslaby

Another JS UI, yay! How about we get some UI libraries for native built apps?

dankobgd

horrible

karpovv-boris

lagging af

pastamania

What the fuck did you do to my CPU

p_l

This page is IMPRESSIVELY BAD.

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%.

virtualritz

This website is unusable on my mobile, a motoG42. Not the fastest phone but everything web I use it on is smooth.

Magic UI.design lags and stutters even when just scrolling up and down.

That tells me everything I need to know.

Elfener

Someone took the advice of not trying to hit 100 on all the lighthouse scores too seriously. This page would probably have a score of 0.

pentagrama

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.

wetpaws

[dead]

polyterative

[flagged]

4gotunameagain

So, front end devs are also engineers now ?

Like, my friend who took a 3 month js / react bootcamp and is working as a front end dev for our local pizza place, she's an engineer now ?

Cool.