22 ms·
Magic UI: UI Library for Design Engineers
- deleted 2y ago[deleted]
- antigirl 2y agoLove 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 https://x.com/alex_barashkov/status/1790748157141213237
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- yu3zhou4 2y agoLooks great. The website is sluggish on Firefox tho
- deleted 2y ago[deleted]
- gregolo 2y agoNice, but your site is buggish
- ilrwbwrkhv 2y agoSo so sluggish
- 4gotunameagain 2y agoSo, 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.
- pavlov 2y ago1997 called, they want their prejudice back. “Web designers are not even programmers”
- 4gotunameagain 2y agohaha. Semantics are important. Words carry meaning, we use them to convey information.
- geraldwhen 2y agoAnyone can build a bridge much like anyone can make an HTML page render. Building a half mile suspension bridge supporting millions of cars per day will require a different depth of understanding.
- art0rz 2y agoWhat 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).
- 4gotunameagain 2y agoIt 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.
- onion2k 2y ago
- titipoco 2y agoLooks sleek, but resource-hungry to the point of absurdity.
- drbig 2y agoI wish that were this MUI: http://www.sasg.com/mui/ http://www.sasg.com/mui/ Oh, the nostalgia: http://www.sasg.com/mui/preview.gif http://www.sasg.com/mui/preview.gif
- karpovv-boris 2y agolagging af
- croes 2y agoSorry 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.
- troupo 2y agoHow 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.
- hasanas 2y agoExtremely slow and sluggish. Ironic to have UI library's website not entice you with itself...
- whstl 2y agoIt is even more ironic than that, this library is seems to be a framework for building websites that showcase other UI libraries. Due to how slow it is, it feels more like an attempt at sabotage.
- virtualritz 2y agoThis 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.
- pcdevils 2y agoScrolled down on my pixel 3a XL and the webview crashed
- nness 2y agoIt'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.
- datavirtue 2y agoSame here. Browser went haywire and was displaying mangled fonts. Had to kill it.
- knallfrosch 2y agoMy Thinkpad T14s/Firefox combo can't handle it.
- kuro_neko 2y agoThe page loaded fully, I waited patiently, but it ran at a very low FPS on my Surface Laptop 5 with an i7 and 16GB RAM. It's very difficult to navigate.
- deleted 2y ago[deleted]
- SebastianKra 2y agoThese 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.
- p_l 2y agoThis 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%.
- djeastm 2y agoYou are not kidding. I can't remember the last time a website has made my scroll stutter so much.
- datavirtue 2y agoMemory corrupted my browser. Required me to kill the task.
- JackFr 2y agoTrying to type in search box causes screen covering popup with a ton of latency, and typing in that box has crazy bad keyboard lag. Not a persuasive demo.
- quaintdev 2y ago"I created animations. I gotta use them somewhere"
- v3ss0n 2y agoSame here, I can't believe how a UI show case site could be this annoying
- itslennysfault 2y agoI'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.
- mantesso 2y agolooks good but made my gpu fans spin
- keithnz 2y agothis 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.
- ushakov 2y agoThe 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 https://github.com/shuding/cobe/issues/78
- p_l 2y agoLooking 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...)
- nprateem 2y agoUnder construction page template doesn't have an animated gif of a workman digging a hole. No flashing lights either. Hard pass.
- Elfener 2y agoSomeone 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.
- martypitt 2y agoI was curious, given the feedback on this page, so I ran the lighthouse test: Performance: 81 / Accesssibility: 93 / Best Practices: 96 / SEO: 100 Performance is on the lower side, but the others are all tracking pretty well!
- deleted 2y ago[deleted]
- Alifatisk 2y agoLove 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.
- troupo 2y ago> it’s beautiful and minimal. 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
- Alifatisk 2y agoThe 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!
- sunshinerag 2y agoBroken on Safari. https://snipboard.io/wM5smG.jpg https://snipboard.io/wM5smG.jpg
- Waterluvian 2y agoThe 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.
- deleted 2y ago[deleted]
- datavirtue 2y agoLiterally crashed the DDG browser on my phone. Never seen anything like it.
- pentagrama 2y agoWow 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.
- deleted 2y ago[deleted]
- pastamania 2y agoWhat the fuck did you do to my CPU
- jzig 2y agoIt saddens me nobody builds similar libraries for Angular.
- turnsout 2y agoYeah, for better or worse, the era of framework diversity is over. The industry has almost 100% converged on React.
- digging 2y agoThat 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... [1] https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/ https://2022.stateofjs.com/en-US/libraries/front-end-framewo...
- turnsout 2y agoI'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.
- digging 2y agoSure, 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.
- turnsout 2y agoJust a few teams per year—extremely anecdotal. But it sounds like your company is in the same boat, with new projects going to React.
- 2y ago
- toddmoy 2y agoInteresting how the Border Beam component uses the exact same inbox example as ShadCN/ui. - https://magicui.design/docs/components/border-beam https://magicui.design/docs/components/border-beam - https://ui.shadcn.com/ https://ui.shadcn.com/
- dankobgd 2y agohorrible
- andreygrehov 2y agoThese days, every self-respecting library must provide Figma components.
- chrstphrknwtn 2y agoI'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.
- mikhael28 2y agoThis 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?
- polyterative 2y ago[flagged]
- darepublic 2y agoGood idea. Laggy on my android Firefox browser tho
- detritus 2y agoIt's slow as shit on Firefox on PC here. Not a good sign... .
- wetpaws 2y ago[dead]
- abeppu 2y agoSetting 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://magicui.design/docs/components/border-beam https://blog.geocities.institute/archives/3879 https://blog.geocities.institute/archives/3879
- dvaun 2y agoIf this were splashed across technical docs then I’d agree. That said, we’re not the target audience for this aesthetic.
- thomascgalvin 2y agoI 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.
- cchance 2y agoThis 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"
- jslaby 2y agoAnother JS UI, yay! How about we get some UI libraries for native built apps?
- lghh 2y agoGreat idea! Do you have any ideas for how you'd like to build it?
- eirikbakke 2y agoFlatLAF is a great one https://www.formdev.com/flatlaf/ https://www.formdev.com/flatlaf/
- salmonfamine 2y agoIt's okay to just say, "designer."
- uptown 2y agoSo basically a ShadCN/UI rip-off?
- rmdashrfv 2y agoI 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?
- 101008 2y agoWow, honestly, I never visited Linear landing but after doing so I see how they copied a lot of ideas / components from them.
- swyx 2y agohttps://www.linears.art/ https://www.linears.art/
- verse 2y ago> 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"
- rmdashrfv 2y agoIt 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.
- gsanderson 2y agoPretty ... but using it my CPU fan sounds like a jet about to take off.
- habosa 2y agoSome 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 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/linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/li...
- flemhans 2y agoWhat files are they talking about?