
Beyond Fireship
チャンネル登録者数 46.7万人
79万 回視聴 ・ 28603いいね ・ 2024/02/24
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 // 5 Minute WebDe...
Fireship Next.js Course fireship.io/courses/nextjs/
コメント
使用したサーバー: watawatawata
再生方法の変更
動画のデフォルトの再生方法を設定できます。埋め込みで見れるなら埋め込みで見た方が良いですよ。
現在の再生方法: 通常
I’m still impressed by Google’s sign in form redesign from last week
Thankyou for sharing Aceternity UI! :)
I'm a fireship lifer btw 💯
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.
Vercel hires so many people working on amazing open source projects
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.
Been using it for my prev 2 sites, definitely one of the most helpful component libraries
Complexity is off the charts
those type of project are the future ✨ the freedom of editing the code and do whatever you want is a whole new level
if it looks good, the code is correct. that's the most encouraging line i've heard in my entire coding career
Exactly, i recently concluded that copy/pasting is the best way of utilizing ui components
That div macbook is wild
Now all we need is a browser plugin to disable all of that to make web fast again.
Waiting for a video on that!
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’ll be impressed when these component libraries, or components sans libraries, are done in vanilla JS or web components.
5:16
When a UI library doesn't know to use padding instead of margin:
Every influencer doing a video on the same exact component library 🤣 "just a coincidence"
i love watching videos of coding and programming that I don't understand!
I always inspired by Fireship's videos and i wanna explain like Fireship to my students
@limarchenko96
I’m still impressed by Google’s sign in form redesign from last week
@manuarora
Thankyou for sharing Aceternity UI! :)
I'm a fireship lifer btw 💯
@llx3291
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.
@HemstitchedIrony
Vercel hires so many people working on amazing open source projects
@Fjonan
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
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.
@gustavo9758
"If it looks cool, then the code is correct"... AMEN.
@abhirajsinha3186
Been using it for my prev 2 sites, definitely one of the most helpful component libraries
@edhahaz
Complexity is off the charts
@0xtz_
those type of project are the future ✨ the freedom of editing the code and do whatever you want is a whole new level
@LolKillization
if it looks good, the code is correct. that's the most encouraging line i've heard in my entire coding career
@sulton-max
Exactly, i recently concluded that copy/pasting is the best way of utilizing ui components
@codinginflow
That div macbook is wild
@adriankal
Now all we need is a browser plugin to disable all of that to make web fast again.
Waiting for a video on that!
@CourageToGroww
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
@iamfrankstallone
I’ll be impressed when these component libraries, or components sans libraries, are done in vanilla JS or web components.
@guydht1
5:16
When a UI library doesn't know to use padding instead of margin:
@ficciones4737
Every influencer doing a video on the same exact component library 🤣 "just a coincidence"
@xigorxx28
i love watching videos of coding and programming that I don't understand!
@udeve
I always inspired by Fireship's videos and i wanna explain like Fireship to my students