Vercel has money to burn , also it's free promotion to their name which is why a lot of people use vercel and not netlify even though netlify free tier allows for commercial usage whereas vercel's doesn't. Cloudflare , AWS , netlify are what I think of serverless nowadays
I've been testing these components recently and I've got lots to say about it: - Most of them look really good but the quality is not consistent (Checkout the 3D card, then go take a look at the buttons). - Almost every component I tried had performance issues. The animations are smooth when it's the only component you're rendering. But your frame rate will drop quite fast as you add more and more components. - Some of them (maybe all of them i haven't checked) are not responsive. For instance, the meteors effect has a hard coded width of 400px... If you want to use these into production, you will need to modify the component's code yourself in order to make them work like you expect. So overall good design but bad implementation.
I’m sure those performance/responsive issues will be fixed in future releases. Then you can just update everything to the latest version…. or wait a minute…
This is the perfect video to remind folks about the "prefers-reduced-motion" CSS media query. Some people genuinely get motion sick from these kind of animation. Bonus tip: designing your animations in a way that can be switched off gives you a way to do that when you notice performance problems.
Incredible work explaining the magic behind these UI libraries and their practical use cases. The section on customizing elements and diving into the code was enlightening.
I mean. We are at a point in JS where every project bare minimun is Typescript and Next 😂 The other day i wrote an API using only node and express and it felt so fast and performatic like if i had wrote koa in assembly. 😂
We have a money laundring portal ish for the goverment which we buikd opensource in vanillaJS. Is quite fast and was fun to do. Althrough there were some tasks where i'd like to have a reactive system (BE was django tho).
It's not the future it's the past, just go to theme forest and you'll find tons of "highly interactive/crazy effects" things like that with the code available. The only difference is that here it's open source + using less crappy libraries that are a standard. And we always have the freedom to edit the code on open source projects anyway, that's also as old as open source, it's just easier to copy paste some "trivial" UI stuff that have few lines of code or to copy paste few lines from Stack Overflow than it is to copy paste and edit the code of really complex projects
Just write the component you need from scratch, it's not hard, and gives you full possible customization, and the level of performance you need. I don't understand the need for all these libraries that you can't really deeply adjust to your needs or you simply loose to much time to adjust them.
the mouse is hovering over a link, it's applying margin left to the div which moves the div outside of the mouse removing the hover effect and causing and infinite loop. If they had used padding it would not do this.@@laxuscullen
@@nicolashocquard6296 cursor is positioned over an element that has a hover effect to indent it slightly. It does this by animating the margin, which in doing so moves the box out from under the cursor, resulting in the box losing its hover status and returning to a default state. If instead padding was used, which changes the position of the content inside the box instead of the box itself, this oscillating action would be avoided.
Radix doesn't give you "Vercel dashboard-like look". It's a completely unstyled library of basic primitives with focus on accessibility and ease of customization. Hence something like shadcn exists.
@taman1488 Which unique "functionalities" are inherent to Vercel's UI dashboard to justify saying ShadCn is giving you "Vercel's functionalities". It seems like a library giving you normal unstyled components with basic but boring to implement "functionalities" (markups and JS) figured out, an unstyled bootstrap where it's easy to hack the code at the end of the day, I can't see how it's "Vercel's functionalities" Edit : But I guess he means that by default and with the "slate" color theme it's true that their components would fit into the Vercel dashboard
@taman1488 I used quotes because that's not what I would usually call functionalities. I should have only quoted "functionalities". But that's the pov you where defending anyway, unless you were just making generalities.
I am proud to see a UI Library by Indian coder are doing this amazing !!!, yesterday only i was trying to work with this and to a got to see it in Fireship video ❣
I wish someone told me this about React 7 years ago when I first got into VueJS. It just seems that React has everything when Vue spent years trying to evolve from 2 to 3. I love it but I also hate it because it doesn't have such a versatile and complete eco-system of SaaS from authentication, mind blowing component libraries, payment services, CMSes etc. Crazy
At least you are still sane. Don't mind them, most of these libraries will come and go. I, for instance, hate learning react, but it got such market share. Vue is such a pleasant thing to write with SFC and other things, styled components could never get close to native (s)css. Fortunately, companies are starting to pick up Vue more.
Looks really cool, but it's probably better suited for front pages rather than entire apps. I can imagine load times could be quite high, and the end user would get annoyed after a while. Also, low-end phones be damned
Only bad thing about these videos is that literally everyone is going to start doing it once the Fireship video comes out and it becomes played out in like 2 weeks.
Concatenating long strings in JavaScript is a nightmare for efficiency! Use the "StringBuilder" methodology of pushing every string into an empty array, and then joining it at the end with an empty string. It makes a HUGE difference with large strings in JS.
looks cool, but definitely the type of thing you would probably only use on a landing page or some marketing bs. Can't see myself using most of this things on a more content-focused website, lol
Not a chance. It's for those "experience" websites that eat half of your computer so you can read the mission statement over 20 scrollpages in 10 minutes instead of a simple line of text in a second.
Very sweet albeit not the most accessible animations. I'd be cautious even targeting power users with hardware to spare. That being said, these effects are inspiring as heck and took me back to the early days of discovering CSS Zen Garden in awe.
And so ends... The days of loading a webpage and being in awe of some creative dev who custom-made a cool animation. I honestly debate whether it is even worth going out of my way to learn raw CSS and JS and do things the hard way so I can actually MAKE stuff when I'm competing with the ability to throw together a collage of pre-made components in a fraction of the time with equally little effort.
for me the issue isn't performance necessarily. i think all flashy new things will have minor performance issues but you sacrifice performance for a fun experience. the problem I have in general is if I want to show off cool stuff I've made, like UI, gifs, video, those are the things eating up performance capability. and then there's no space left for the flashy stuff. but if you're only showing off static images and text these UI components seem pretty cool.
The comments about hating tailwind are funny to me. Yes, tailwind makes html look clunky But if you are writing tailwind properly, any div that has too many classes fo read succinctly, just make it a proper class and then use @apply in that class. For me, my rule of thumb is if a dic needs more than 5 utility classes, i automatically make it a firstclass class and move the utility classes to an @apply statement within the class.
Finally one component dev team stopped being smart asses about their implementations and decided to ship the actual code instead of predefined closed chunks that never fully fit the purpose anyway.
Heads up to most devs working with EU clients. In 2025 the next step for the European Accessibility Act will be live. This means that screen reader / braille display compatibility for UI component frameworks is going to be required by law for many types of applications. It will literally useless to choose a component library that does not make this easy for you when implementing your UI. This is a good thing for everyone by the way, and something that has been a long time coming 🙂 PS. No, this does not mean that you have to limit your creativity and make Win95 style designs 😉
I'm no frontend dev and have zero insight so shame me all you want but this all looks to me like the fancy zomfg look at my animated pixelart, wow my cursor is changing, dude snow on my webpage?! shenanigans back in the early 2000s, just with more modern animations and more complex code while not providing any improved usability for the visitor.
Wow. Just wow. Now THIS is now groundbreaking. It's revolutionary. Now this will change the industry forever. THIS IS the one. I'm sure this time. Totally.
I’m still impressed by Google’s sign in form redesign from last week
same here man, i think it took them 5 month to come up with that idea 😆
Yeah me too. I never saw such beautiful unique modern design that no one could mimic
They were hyping it up for weeks too 😂
Stunning and brave
The horizontal symmetry was a classy move, far beyond its time; transcendent.
Thankyou for sharing Aceternity UI! :)
I'm a fireship lifer btw 💯
Are u senior?
Manu paaji dil khush hogya Indian dev ko aise respect paate !! 😊❤
I know you made this, thanks bro!🙌
Thankyou for creating Aceternity UI! :). I really loved and use it now
The MADMAN himself!
Vercel hires so many people working on amazing open source projects
Vercel has money to burn , also it's free promotion to their name which is why a lot of people use vercel and not netlify even though netlify free tier allows for commercial usage whereas vercel's doesn't.
Cloudflare , AWS , netlify are what I think of serverless nowadays
That's called marketing.
I've been testing these components recently and I've got lots to say about it:
- Most of them look really good but the quality is not consistent (Checkout the 3D card, then go take a look at the buttons).
- Almost every component I tried had performance issues. The animations are smooth when it's the only component you're rendering. But your frame rate will drop quite fast as you add more and more components.
- Some of them (maybe all of them i haven't checked) are not responsive. For instance, the meteors effect has a hard coded width of 400px...
If you want to use these into production, you will need to modify the component's code yourself in order to make them work like you expect. So overall good design but bad implementation.
As soon as I visited their landing page I saw massive performance issues. Basically killed it for me instantly.
And thats why u make ur own components
I’m sure those performance/responsive issues will be fixed in future releases. Then you can just update everything to the latest version…. or wait a minute…
@@exzemz idk, seems to me like this first release was rushed. Hope time fixes this.
@@llx3291 There are no chances you could just "update" tho
This is the perfect video to remind folks about the "prefers-reduced-motion" CSS media query. Some people genuinely get motion sick from these kind of animation. Bonus tip: designing your animations in a way that can be switched off gives you a way to do that when you notice performance problems.
Incredible work explaining the magic behind these UI libraries and their practical use cases. The section on customizing elements and diving into the code was enlightening.
"If it looks cool, then the code is correct"... AMEN.
Now all we need is a browser plugin to disable all of that to make web fast again.
Waiting for a video on that!
Just use IE6
Been using it for my prev 2 sites, definitely one of the most helpful component libraries
We are really at the point in full stack JS frameworks where we call just a next.js project a vanilla next.js project. xD
I mean. We are at a point in JS where every project bare minimun is Typescript and Next 😂
The other day i wrote an API using only node and express and it felt so fast and performatic like if i had wrote koa in assembly. 😂
@@henriquematias1986Feel like we will be in a point where full stack development gonna be only about htmlx
Nah, I don't think so@@biolater
We have a money laundring portal ish for the goverment which we buikd opensource in vanillaJS. Is quite fast and was fun to do. Althrough there were some tasks where i'd like to have a reactive system (BE was django tho).
@@henriquematias1986I felt this statement so much. Recently also started using express and it’s almost euphoric
Exactly, i recently concluded that copy/pasting is the best way of utilizing ui components
if it looks good, the code is correct. that's the most encouraging line i've heard in my entire coding career
all code is correct. You mean the logic is correct? Sure, it's correct until its deemed legacy and an anti pattern. Who are you? who AM i? lol
that was a joke though
Complexity is off the charts
I’ll be impressed when these component libraries, or components sans libraries, are done in vanilla JS or web components.
those type of project are the future ✨ the freedom of editing the code and do whatever you want is a whole new level
It's not the future it's the past, just go to theme forest and you'll find tons of "highly interactive/crazy effects" things like that with the code available. The only difference is that here it's open source + using less crappy libraries that are a standard. And we always have the freedom to edit the code on open source projects anyway, that's also as old as open source, it's just easier to copy paste some "trivial" UI stuff that have few lines of code or to copy paste few lines from Stack Overflow than it is to copy paste and edit the code of really complex projects
Just write the component you need from scratch, it's not hard, and gives you full possible customization, and the level of performance you need. I don't understand the need for all these libraries that you can't really deeply adjust to your needs or you simply loose to much time to adjust them.
@@bartek4210 i already have text search implemented but this is less code so I wanna know if it's easy to do it with the sdk
i love watching videos of coding and programming that I don't understand!
Note: Theres already a svelte port of aceternity. Great vid ❤
holy based!
fuckin a
That's so sick 🥳
Thanks for the info, so cool!
5:16
When a UI library doesn't know to use padding instead of margin:
What?
the mouse is hovering over a link, it's applying margin left to the div which moves the div outside of the mouse removing the hover effect and causing and infinite loop. If they had used padding it would not do this.@@laxuscullen
Can you explain please ??
@@nicolashocquard6296 cursor is positioned over an element that has a hover effect to indent it slightly. It does this by animating the margin, which in doing so moves the box out from under the cursor, resulting in the box losing its hover status and returning to a default state. If instead padding was used, which changes the position of the content inside the box instead of the box itself, this oscillating action would be avoided.
@@PhoenixStudios147 ...but in the end it's a transform translate 😉
Radix doesn't give you "Vercel dashboard-like look". It's a completely unstyled library of basic primitives with focus on accessibility and ease of customization. Hence something like shadcn exists.
Good call, that was phrased poorly
"look" isn't specifically about theme. Functionality is a look too
@taman1488 Which unique "functionalities" are inherent to Vercel's UI dashboard to justify saying ShadCn is giving you "Vercel's functionalities". It seems like a library giving you normal unstyled components with basic but boring to implement "functionalities" (markups and JS) figured out, an unstyled bootstrap where it's easy to hack the code at the end of the day, I can't see how it's "Vercel's functionalities"
Edit : But I guess he means that by default and with the "slate" color theme it's true that their components would fit into the Vercel dashboard
@@heroe1486Why are you quoting "Vercel's functionalities" like that's something I said?
@taman1488 I used quotes because that's not what I would usually call functionalities. I should have only quoted "functionalities". But that's the pov you where defending anyway, unless you were just making generalities.
That div macbook is wild
After discovering ui libraries had definitely been a game changer
Every influencer doing a video on the same exact component library 🤣 "just a coincidence"
😂😂😂
What do they do it for
Those are some beautiful looking components!
Finally! An easy to implement UI effects library to help drain my users' batteries as fast as possible on mobile devices.
If it’s not haemorrhaging battery, is it worth looking at?
Having 17kb more of CSS and HTML on a mobile device isn't going to affect a user's battery.... lol
@@JC-yy5nf They probably mean the javascript code for the animations themselves is gonna use more power
@@JC-yy5nfThe library it's homepage runs at like 10FPS on an iPhone 15 Plus, called it unoptimized and a battery hog would be an understatement
Brilliant. Both library and overview. I only wish it last longer..
Finally framer motion getting the airtime it should always have
I am proud to see a UI Library by Indian coder are doing this amazing !!!, yesterday only i was trying to work with this and to a got to see it in Fireship video ❣
I wish someone told me this about React 7 years ago when I first got into VueJS. It just seems that React has everything when Vue spent years trying to evolve from 2 to 3. I love it but I also hate it because it doesn't have such a versatile and complete eco-system of SaaS from authentication, mind blowing component libraries, payment services, CMSes etc. Crazy
At least you are still sane. Don't mind them, most of these libraries will come and go. I, for instance, hate learning react, but it got such market share. Vue is such a pleasant thing to write with SFC and other things, styled components could never get close to native (s)css. Fortunately, companies are starting to pick up Vue more.
Looks really cool, but it's probably better suited for front pages rather than entire apps. I can imagine load times could be quite high, and the end user would get annoyed after a while. Also, low-end phones be damned
Only bad thing about these videos is that literally everyone is going to start doing it once the Fireship video comes out and it becomes played out in like 2 weeks.
you think that, but people are very lazy and end up not doing anything unless it's an actual copy and paste tutorial. this was just a glance over
You have a good point there @@YuriG03042
Not sure how it is an issue. The thing itself is not that dope anyway.
@@YuriG03042That entire library is copy and paste lmao.
Now I have to look into this SHADchedelic library.. looks interesting.
Concatenating long strings in JavaScript is a nightmare for efficiency! Use the "StringBuilder" methodology of pushing every string into an empty array, and then joining it at the end with an empty string. It makes a HUGE difference with large strings in JS.
looks cool, but definitely the type of thing you would probably only use on a landing page or some marketing bs. Can't see myself using most of this things on a more content-focused website, lol
Not a chance. It's for those "experience" websites that eat half of your computer so you can read the mission statement over 20 scrollpages in 10 minutes instead of a simple line of text in a second.
Very sweet albeit not the most accessible animations. I'd be cautious even targeting power users with hardware to spare. That being said, these effects are inspiring as heck and took me back to the early days of discovering CSS Zen Garden in awe.
And so ends... The days of loading a webpage and being in awe of some creative dev who custom-made a cool animation.
I honestly debate whether it is even worth going out of my way to learn raw CSS and JS and do things the hard way so I can actually MAKE stuff when I'm competing with the ability to throw together a collage of pre-made components in a fraction of the time with equally little effort.
02:48 mannu paaji tussi great ho 🙆♂️🙌
Dude, I love your humor.
Great videos.
I am working with this library and it's mind blowing🤯
LoL that bat reading a cook was liharious!!
i have a feeling we're going to go back to unstyled very soon
I always inspired by Fireship's videos and i wanna explain like Fireship to my students
You could combine Text Generate Effect with Time Based Text recordings for more natural progression of the appearance of the text.
_If it looks cool, the code is correct_
You're goddamn right.
5:25 I've never heard of no "Fight Club".
Fight whatnow? Never heard of it!
3:23 - "Windows Key + V": "Look at me. I'm the captain now".
Dude this library is absolutely amazing 😍. I use it for my site, which looks fantastic
probably some unknown trashy portfolio
who hurt you bro?@@EDS432
I wish Angular UI libraries would see the light one day
Video starts at 2:00
"Tailwind needs to be a dependency"... i mentally leave the room.
kudos to Manu paaji
JS Mantra
"We don't worry about the performance issues, that's the JIT compiler's job"
"If it looks cool the code is correct" ✅
for me the issue isn't performance necessarily. i think all flashy new things will have minor performance issues but you sacrifice performance for a fun experience. the problem I have in general is if I want to show off cool stuff I've made, like UI, gifs, video, those are the things eating up performance capability. and then there's no space left for the flashy stuff. but if you're only showing off static images and text these UI components seem pretty cool.
I saw it like week ago and it's fire!
As a backend developer, I say we give our users a terminal and call it a 'Modern Minimal UI That Only SMART People Can Use' and get this over with.
The scream I just screampt in my (parked!!) car when the source of the MacBook was revealed
Ive been using this for a week now
Imagine the megabytes required to get this all to work, and casually ignoring any accessibility requirements.
how did frontend dev go from jQuery to becoming this convoluted
Would never have known this existed
The card with the dynamic changing text I think is based on a video the guy off hyperplexed channel did.
The comments about hating tailwind are funny to me.
Yes, tailwind makes html look clunky
But if you are writing tailwind properly, any div that has too many classes fo read succinctly, just make it a proper class and then use @apply in that class. For me, my rule of thumb is if a dic needs more than 5 utility classes, i automatically make it a firstclass class and move the utility classes to an @apply statement within the class.
And here I was thinking Shopify built a cool hover animation on their merch store
at first glance , it s really amazing ui lib !!!
Finally one component dev team stopped being smart asses about their implementations and decided to ship the actual code instead of predefined closed chunks that never fully fit the purpose anyway.
If it looks cool , it's correct 😎
- JS
And I'm reaping all the benefits! :)
Its nice ui, modified it to work with vite + react.
Going to try that
thank you for sharing!!!
This is so amazing I can't wait to implement it in my Scrach project
Then you have to deal with the villain : Responsiveness 😂
Interesting how heavy a page is with all that bells and whistles
This man is Crazy!! Real Crazy!!!
Heads up to most devs working with EU clients. In 2025 the next step for the European Accessibility Act will be live. This means that screen reader / braille display compatibility for UI component frameworks is going to be required by law for many types of applications.
It will literally useless to choose a component library that does not make this easy for you when implementing your UI.
This is a good thing for everyone by the way, and something that has been a long time coming 🙂
PS. No, this does not mean that you have to limit your creativity and make Win95 style designs 😉
Thx.
Framer motion makes the website unnecessarily slow. GSAP does it well on performance
I'm no frontend dev and have zero insight so shame me all you want but this all looks to me like the fancy zomfg look at my animated pixelart, wow my cursor is changing, dude snow on my webpage?! shenanigans back in the early 2000s, just with more modern animations and more complex code while not providing any improved usability for the visitor.
The CO2 emission after this video: 📈
lol I've just now finished prototyping a project using Aceternity
Wow. Just wow. Now THIS is now groundbreaking. It's revolutionary. Now this will change the industry forever. THIS IS the one. I'm sure this time. Totally.
"Let's begin the reaping process" 😂
0:58 yeah 😀
It seems like tailwind is building a competitor to shadcn, they are previewing it on their tailwind UI page
The more the merrier. I love the fact you just drop the ones you like into your project and can go in an edit them completely to your needs.
This library is actually amazing
I love programming and thats why I love ur channel. Also I am starting a tech internship this summer. Any tips?
Keep this is mind and you should be good: "You only fail when you stop trying"
Things will get better over time, the path to success is a bumpy road 🫡
The best advice i would give you is to be persistent on your way. Fail or win doesn't matter. Persistent effort pays off
Just make sure it’s not an unpaid internship lmao
the thumbnail changed immediately after i click this video
Thank you.
Ui libraries are currently hyped up like js frameworks lol
Lot of these components are from @Hyperplexed channel
mad men easily recognize each other.
now we need more than one framework for some effects.
The NextJs course is targeting NextJs 13, are you planning to update the course to cover NextJs 14? Thank you 👋
best ui library is dear imgui. take it or leave it.
Hugging face in 100 seconds
the html macbook is insane wtf
You should make a video on tanstack router too
The transcript isn't available and auto-captions is failing. Those 3 requirements for Aceternity (2:14) are: React, Tailwind, and what now?
Framer Motion
Oo Manu!
Been following this library, just wish they had mobile solutions too
And here I was hoping it was a web component library or at least something that's not React