Loading...
アイコン

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/

コメント

@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

コントロール
設定

使用したサーバー: watawatawata

あなたにとって最適な再生方法を設定するために協力してください!