Тёмный

This UI component library is mind-blowing 

Beyond Fireship
Подписаться 387 тыс.
Просмотров 539 тыс.
50% 1

Let's explore a free open-source UI library that replicates advanced animations found on the landing pages of top-tier startups. Learn how to code advanced components in React and other JavaScript frameworks.
Aceternity Components ui.aceternity.com/components
ShadCN ui.shadcn.com/
Parallax Tutorial • The Parallax Effect //...
Fireship Next.js Course fireship.io/courses/nextjs/

Опубликовано:

 

17 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 499   
@limarchenko96
@limarchenko96 2 месяца назад
I’m still impressed by Google’s sign in form redesign from last week
@offlinehub
@offlinehub 2 месяца назад
same here man, i think it took them 5 month to come up with that idea 😆
@thecoolnewsguy
@thecoolnewsguy 2 месяца назад
Yeah me too. I never saw such beautiful unique modern design that no one could mimic
@haresmahmood
@haresmahmood 2 месяца назад
They were hyping it up for weeks too 😂
@Chaaos2
@Chaaos2 2 месяца назад
Stunning and brave
@jameslcowan
@jameslcowan 2 месяца назад
The horizontal symmetry was a classy move, far beyond its time; transcendent.
@manuarora
@manuarora 2 месяца назад
Thankyou for sharing Aceternity UI! :) I'm a fireship lifer btw 💯
@mirjalol49
@mirjalol49 2 месяца назад
Are u senior?
@abhijeetvdsh
@abhijeetvdsh 2 месяца назад
Manu paaji dil khush hogya Indian dev ko aise redpect paate !! 😊❤
@nishant_singh
@nishant_singh 2 месяца назад
I know you made this, thanks bro!🙌
@rexraymond5039
@rexraymond5039 2 месяца назад
Thankyou for creating Aceternity UI! :). I really loved and use it now
@VivekPayasi
@VivekPayasi 2 месяца назад
The MADMAN himself!
@user-pt2rv6br6w
@user-pt2rv6br6w 2 месяца назад
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.
@peteredmonds1712
@peteredmonds1712 2 месяца назад
As soon as I visited their landing page I saw massive performance issues. Basically killed it for me instantly.
@demonsheadshot8086
@demonsheadshot8086 2 месяца назад
And thats why u make ur own components
@exzemz
@exzemz 2 месяца назад
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…
@user-pt2rv6br6w
@user-pt2rv6br6w 2 месяца назад
@@exzemz idk, seems to me like this first release was rushed. Hope time fixes this.
@heroe1486
@heroe1486 2 месяца назад
@@user-pt2rv6br6w There are no chances you could just "update" tho
@HemstitchedIrony
@HemstitchedIrony 2 месяца назад
Vercel hires so many people working on amazing open source projects
@Serizon_
@Serizon_ 2 месяца назад
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
@brangja4815
@brangja4815 2 месяца назад
That's called marketing.
@gustavo9758
@gustavo9758 2 месяца назад
"If it looks cool, then the code is correct"... AMEN.
@Fjonan
@Fjonan 2 месяца назад
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.
@4RILDIGITAL
@4RILDIGITAL 2 месяца назад
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.
@abhirajsinha3186
@abhirajsinha3186 2 месяца назад
Been using it for my prev 2 sites, definitely one of the most helpful component libraries
@CourageToGroww
@CourageToGroww 2 месяца назад
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
@henriquematias1986
@henriquematias1986 2 месяца назад
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. 😂
@biolater
@biolater 2 месяца назад
@@henriquematias1986Feel like we will be in a point where full stack development gonna be only about htmlx
@Steel0079
@Steel0079 2 месяца назад
Nah, I don't think so​@@biolater
@danielhalachev4714
@danielhalachev4714 2 месяца назад
@@biolaterNot really. HTMX uses an HTML response from the server, which renders the technology only applicable to servers, which provide data to a single website. You can't build a service, which provides data to a website, an Android app, a native Windows app and a native Linux app simulatenously in the form of HTML. In such cases JSON is unavoidable and HTMX is almost useless. You might argue - well, how many ventures actually require this kind of cross-platform abilities? Quite a few, it seems. Most websites I use have not just a mobile version of the website, they have a mobile app. Therefore, if I were a software architect, I would design a REST API architecture, even if I planned on building just a single website in the near future. This ensures scalability, upgradeability and separation of concerns (therefore easier debugging and maintenance).
@yowremco
@yowremco 2 месяца назад
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).
@ficciones4737
@ficciones4737 2 месяца назад
Every influencer doing a video on the same exact component library 🤣 "just a coincidence"
@AndrosYang
@AndrosYang 2 месяца назад
😂😂😂
@DarkzarichV2
@DarkzarichV2 2 месяца назад
What do they do it for
@cryptophrenik8968
@cryptophrenik8968 2 месяца назад
Those are some beautiful looking components!
@gosnooky
@gosnooky 2 месяца назад
Finally! An easy to implement UI effects library to help drain my users' batteries as fast as possible on mobile devices.
@Freshbott2
@Freshbott2 2 месяца назад
If it’s not haemorrhaging battery, is it worth looking at?
@JC-yy5nf
@JC-yy5nf 2 месяца назад
Having 17kb more of CSS and HTML on a mobile device isn't going to affect a user's battery.... lol
@danielg3857
@danielg3857 2 месяца назад
@@JC-yy5nf They probably mean the javascript code for the animations themselves is gonna use more power
@cptive
@cptive 2 месяца назад
​@@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
@guydht1
@guydht1 2 месяца назад
5:16 When a UI library doesn't know to use padding instead of margin:
@laxuscullen
@laxuscullen 2 месяца назад
What?
@JoshIbbotson-
@JoshIbbotson- 2 месяца назад
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
@nicolashocquard6296 2 месяца назад
Can you explain please ??
@PhoenixStudios147
@PhoenixStudios147 2 месяца назад
@@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.
@pxlbltz
@pxlbltz 2 месяца назад
@@PhoenixStudios147 ...but in the end it's a transform translate 😉
@sultonbekrakhimov6623
@sultonbekrakhimov6623 2 месяца назад
Exactly, i recently concluded that copy/pasting is the best way of utilizing ui components
@abhrajitray951
@abhrajitray951 2 месяца назад
This library is actually amazing
@LolKillization
@LolKillization 2 месяца назад
if it looks good, the code is correct. that's the most encouraging line i've heard in my entire coding career
@treyrader
@treyrader 2 месяца назад
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
@bestja2137
@bestja2137 2 месяца назад
that was a joke though
@khawajamohsin7194
@khawajamohsin7194 Месяц назад
Dude, I love your humor. Great videos.
@xigorxx28
@xigorxx28 2 месяца назад
i love watching videos of coding and programming that I don't understand!
@edhahaz
@edhahaz 2 месяца назад
Complexity is off the charts
@hsdev
@hsdev 2 месяца назад
Now I have to look into this SHADchedelic library.. looks interesting.
@riteshKumarWebDeveloper
@riteshKumarWebDeveloper 2 месяца назад
I am working with this library and it's mind blowing🤯
@wishmeheaven
@wishmeheaven 2 месяца назад
Brilliant. Both library and overview. I only wish it last longer..
@xen2297
@xen2297 2 месяца назад
Finally framer motion getting the airtime it should always have
@iamfrankstallone
@iamfrankstallone 2 месяца назад
I’ll be impressed when these component libraries, or components sans libraries, are done in vanilla JS or web components.
@0xtz_
@0xtz_ 2 месяца назад
those type of project are the future ✨ the freedom of editing the code and do whatever you want is a whole new level
@heroe1486
@heroe1486 2 месяца назад
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
@alexanderleschanz9991
@alexanderleschanz9991 2 месяца назад
Note: Theres already a svelte port of aceternity. Great vid ❤
@fingerstyledojo
@fingerstyledojo 2 месяца назад
holy based!
@not_hehe__
@not_hehe__ 2 месяца назад
fuckin a
@jackb94
@jackb94 2 месяца назад
That's so sick 🥳
@MadeInJack
@MadeInJack 2 месяца назад
Thanks for the info, so cool!
@trueberryless
@trueberryless 2 месяца назад
Dude this library is absolutely amazing 😍. I use it for my site, which looks fantastic
@EDS432
@EDS432 2 месяца назад
probably some unknown trashy portfolio
@ishan28mkip
@ishan28mkip 2 месяца назад
who hurt you bro?@@EDS432
@hrithikgupta1809
@hrithikgupta1809 2 месяца назад
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 ❣
@adriankal
@adriankal 2 месяца назад
Now all we need is a browser plugin to disable all of that to make web fast again. Waiting for a video on that!
@losbeekos
@losbeekos 2 месяца назад
Just use IE6
@_DRMR_
@_DRMR_ 2 месяца назад
You could combine Text Generate Effect with Time Based Text recordings for more natural progression of the appearance of the text.
@Mateooyt
@Mateooyt 2 месяца назад
I saw it like week ago and it's fire!
@codinginflow
@codinginflow 2 месяца назад
That div macbook is wild
@lancemarchetti8673
@lancemarchetti8673 2 месяца назад
LoL that bat reading a cook was liharious!!
@K.Huynh.
@K.Huynh. 2 месяца назад
thank you for sharing!!!
@gadzhikharkharov140
@gadzhikharkharov140 2 месяца назад
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.
@beyondfireship
@beyondfireship 2 месяца назад
Good call, that was phrased poorly
@maskettaman1488
@maskettaman1488 2 месяца назад
"look" isn't specifically about theme. Functionality is a look too
@rizzycs
@rizzycs 2 месяца назад
FireshipAI hallucinating again hehe
@heroe1486
@heroe1486 2 месяца назад
@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
@maskettaman1488
@maskettaman1488 2 месяца назад
@@heroe1486Why are you quoting "Vercel's functionalities" like that's something I said?
@mtjeth
@mtjeth 2 месяца назад
Its nice ui, modified it to work with vite + react.
@a.jstars
@a.jstars 2 месяца назад
This man is Crazy!! Real Crazy!!!
@Jakecodezz
@Jakecodezz 2 месяца назад
Ive been using this for a week now
@rmdashrfv
@rmdashrfv 2 месяца назад
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.
@YuriG03042
@YuriG03042 2 месяца назад
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
@rmdashrfv
@rmdashrfv 2 месяца назад
You have a good point there @@YuriG03042
@kissu_io
@kissu_io 2 месяца назад
Not sure how it is an issue. The thing itself is not that dope anyway.
@ghassenjemai
@ghassenjemai 2 месяца назад
I wish Angular UI libraries would see the light one day
@specsarena1124
@specsarena1124 2 месяца назад
This is so amazing I can't wait to implement it in my Scrach project
@marble_wraith
@marble_wraith 2 месяца назад
"Tailwind needs to be a dependency"... i mentally leave the room.
@Gigusx
@Gigusx 2 месяца назад
_If it looks cool, the code is correct_ You're goddamn right.
@discoRyne
@discoRyne 2 месяца назад
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.
@Alcaline-hu2vu
@Alcaline-hu2vu 2 месяца назад
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
@DRENGHIR
@DRENGHIR 2 месяца назад
THANKS!
@twowheelsabove
@twowheelsabove 2 месяца назад
3:45 оу, спасибо за совет товарищ!
@CodingThingsIRL
@CodingThingsIRL 2 месяца назад
And I'm reaping all the benefits! :)
@ThePandaGuitar
@ThePandaGuitar Месяц назад
i have a feeling we're going to go back to unstyled very soon
@MCroppered
@MCroppered 2 месяца назад
The card with the dynamic changing text I think is based on a video the guy off hyperplexed channel did.
@tonhom260
@tonhom260 2 месяца назад
at first glance , it s really amazing ui lib !!!
@nitinjaswal8960
@nitinjaswal8960 2 месяца назад
kudos to Manu paaji
@MattWyskiel
@MattWyskiel 4 дня назад
The scream I just screampt in my (parked!!) car when the source of the MacBook was revealed
@lakelimbo
@lakelimbo 2 месяца назад
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
@tapion1998
@tapion1998 2 месяца назад
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.
@archamedis
@archamedis 2 месяца назад
Would never have known this existed
@shadowyt1727
@shadowyt1727 2 месяца назад
You should make a video on tanstack router too
@valenciawalker6498
@valenciawalker6498 2 месяца назад
Thanks
@aaaaanh
@aaaaanh 2 месяца назад
lol I've just now finished prototyping a project using Aceternity
@codejuice5208
@codejuice5208 2 месяца назад
Just WOW!
@frigga
@frigga 2 месяца назад
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.
@iAmPerflexed
@iAmPerflexed 2 месяца назад
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.
@thebiggamer1248
@thebiggamer1248 2 месяца назад
I lterally watched a video about these yesterday 😂
@ndorfinz
@ndorfinz 2 месяца назад
Imagine the megabytes required to get this all to work, and casually ignoring any accessibility requirements.
@dan110024
@dan110024 2 месяца назад
And here I was thinking Shopify built a cool hover animation on their merch store
@karlstenator
@karlstenator 2 месяца назад
3:23 - "Windows Key + V": "Look at me. I'm the captain now".
@AdamBechtol
@AdamBechtol Месяц назад
Thx.
@parsonsmarcus
@parsonsmarcus Месяц назад
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.
@LV-md6lb
@LV-md6lb 2 месяца назад
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
@kaedriz
@kaedriz 2 месяца назад
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.
@starogre
@starogre 2 месяца назад
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.
@younes-47
@younes-47 13 дней назад
Then you have to deal with the villain : Responsiveness 😂
@kwoerd
@kwoerd 2 месяца назад
I showed my Grandma how to use to use the keyboard shortcut to copy / paste and she said, “good golly, if I had your brain.” 😆
@user-kw9cu
@user-kw9cu 2 месяца назад
The CO2 emission after this video: 📈
@JesseSlomowitz
@JesseSlomowitz 2 месяца назад
Is Next.js 14 available yet on Fireship? The most recent one that seems available is Next.js 13.
@JaiMaini
@JaiMaini 2 месяца назад
Been following this library, just wish they had mobile solutions too
@Ghaleon
@Ghaleon 2 месяца назад
What would be the best framework for a BACKEND developer build a frontend app? Svelt?
@s3rverlord
@s3rverlord 2 месяца назад
Oo Manu!
@alexzakharov7911
@alexzakharov7911 2 месяца назад
Interesting how heavy a page is with all that bells and whistles
@igor9silva
@igor9silva 10 дней назад
Spent 5 minutes exploring, found a bug on a component, thought of a solution through the in-doc code, just to find out it's not even open-source lol
@HenriAGS
@HenriAGS 2 месяца назад
I only used it with Next, is there any way that it would work with a create-react-app application?
@_vicary
@_vicary 2 месяца назад
now we need more than one framework for some effects.
@MyQuietRiot
@MyQuietRiot Месяц назад
Is Aceturnity available for use on wordpress, wix, and the like?
@devalsays
@devalsays 2 месяца назад
This is the way..!
@ainet8415
@ainet8415 2 месяца назад
Hugging face in 100 seconds
@user-bv9oo2ib2u
@user-bv9oo2ib2u Месяц назад
We have svelte aceternity now.
@zayndejohn2432
@zayndejohn2432 2 месяца назад
Could you use acernity with webflow?
@JoshuaClancy12
@JoshuaClancy12 2 месяца назад
You lost me at tailwind
@duruiz
@duruiz 2 месяца назад
paused the video to say that
@Codemonsterr
@Codemonsterr 2 месяца назад
Cry harder 😅
@jnnk-hb
@jnnk-hb 2 месяца назад
haha no one cares
@beinyourguard
@beinyourguard 2 месяца назад
5:25 I've never heard of no "Fight Club".
@NostraDavid2
@NostraDavid2 2 месяца назад
Fight whatnow? Never heard of it!
@VictorSilvaDev
@VictorSilvaDev 2 месяца назад
Nice
@kamaravichow
@kamaravichow 2 месяца назад
Lot of these components are from @Hyperplexed channel
@barts5040
@barts5040 2 месяца назад
The NextJs course is targeting NextJs 13, are you planning to update the course to cover NextJs 14? Thank you 👋
@tristanguiano
@tristanguiano 2 месяца назад
YES!!!!
@pooourya
@pooourya 2 месяца назад
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.
@carlosn894
@carlosn894 2 месяца назад
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.
@alibahrami6810
@alibahrami6810 2 месяца назад
mad men easily recognize each other.
@thruvitorseyes4181
@thruvitorseyes4181 2 месяца назад
can i use the library with jsx files or only tsx?
@xuerian
@xuerian 2 месяца назад
I can't tell if this is ironic any more.
@steph31830
@steph31830 2 месяца назад
Is there some component libraries that do not use Talwind out there?
@FilledStacks
@FilledStacks 2 месяца назад
"If it looks cool the code is correct" ✅
@IlyaGromov
@IlyaGromov 2 месяца назад
What color theme do you use in your vscode?
@e_38_vaibhav_pal91
@e_38_vaibhav_pal91 Месяц назад
can we use this library using javascript instead of typescript? if yes, then how?
Далее
How I deploy serverless containers for free
6:33
Просмотров 377 тыс.
UI Libraries Are Dying, Here's Why
13:28
Просмотров 259 тыс.
Best transport for daughter #shorts by Tsuriki Show
00:12
Я НЕ УМЕЮ СНИМАТЬ ТАКИЕ ВИДЕО
00:16
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 701 тыс.
Never install locally
5:45
Просмотров 1,6 млн
Every CSS Animation property
9:26
Просмотров 48 тыс.
I tried 8 different Postgres ORMs
9:46
Просмотров 378 тыс.
How principled coders outperform the competition
11:11
So You Think You Know Git - FOSDEM 2024
47:00
Просмотров 924 тыс.
These New Components Blew My Mind
7:06
Просмотров 83 тыс.
PROOF JavaScript is a Multi-Threaded language
8:21
Просмотров 258 тыс.
I built an Apple Vision Pro app... visionOS tutorial
9:19
7 ways to deal with CSS
6:23
Просмотров 1 млн
Best transport for daughter #shorts by Tsuriki Show
00:12