This UI component library is mind-blowing
BFBeyond Fireship@beyondfireship · 463K subscribers
- Views
- 878K
- 878,488
- Outlier
- ×2.8
- Median 316K
- Length
- 8:23
- Published
- Feb 24, 2024
- Saturday
- Comments
- 523
- 30K likes
Script
How it's written
- Words
- 1,956
- Words a minute
- 233
- Reading time
- 9 min
- Segments
- 6
The hook
0:00–0:26one of the most hyped up UI libraries in the front-end World recently has been Shad CN UI but that's not what this video is about it's about another Library inspired by it that takes things to a whole another level and it's a total gold mine for lazy developers like me like if you're building an app to get in on the latest crypto fomo you can easily drop in this card to get this cool encrypted text effect or maybe you want to shoot a laser beam when you scroll down the page or how about some animated plasma waves for your hero section that's just a small sample of
Structure
one of the most hyped up UI libraries in the front-end World recently has been Shad CN UI but that's not what this video is about it's about another Library inspired by it that takes things to a whole another level and it's a total gold mine for lazy developers like me like if you're building an app to get in on the latest crypto fomo you can easily drop in this card to get this cool encrypted text effect or maybe you want to shoot a laser beam when you scroll down the page or how about some animated plasma waves for your hero section that's just a small sample of what you can do in today's video we'll learn how to use aity to build off aome uis faster but also dive into its code to learn the secrets behind its magic before we get into it though let's talk about the library that inspired it Shad Cen web developers already have tons of awesome component libraries like material chakra bootstrap and so on and at first glance Shad CN looks like yet another component Library it's got buttons forms progress bars and all the other components you'd expect what makes it unique is the way you actually use it in a project and know it has nothing to do with artificial intelligence it's based on a Cutting Edge new innovation called copy and paste you see normally when you install a UI Library it dumps a bunch of code into your node modules folder then you import each of these components in your code and customize their appearance with props you never actually see their implementation details which can be a good thing but can also be a problem if you want a lot of control to customize their appearance now if we take a look at the docs and Shaden you'll notice that instead of installing a package we use an npx command which will actually copy and paste the source code into your project and that gives you far more control over the code to change things as needed in other words it's not a component library but a collection of reusable components
Watch from 0:00that you copy and paste into your app Shaden has dependencies of its own like tailwind and radex UI if you like Rix components which will give you that verell dashboard like look then Shad Cen is a highly efficient way to implement common UI components without doing everything on your own from scratch the creator of this project works for versell but it's not just for the react ecosystem there's also implementations in spelt and view but remember I said this video is not about Shad CN it's about a similar library that also brings in frame or motion to go crazy with the anim the library is called aternity UI they didn't pay me or sponsor this video but they're a web development agency that will also design custom components for you in exchange for money but all the base components are totally free in order to take advantage of them we need to make a couple assumptions about your project you're using react tailwind and frame or motion now even if you use a different framework like spelt in my case you should still keep this library on your radar because it's a good source of inspiration and you can always reverse engineer this stuff in your own framework but currently I'm in a vanilla nextjs project with Tailwind install what I want to do is add this cool MacBook scroll animation to my homepage when I first looked at it I thought that MacBook must be a PNG but get this the entire MacBook is HTML and CSS every key on the keyboard is its own div and react component it's crazy and the developer must be some kind of madman and we get to reap all the benefits let's begin the reaping process first we need to go and install the dependencies we've got framer motion which is the animation Library clsx which is for merging CSS class names Tailwind merge to merge classes in Tailwind without conflict and Tabler icons which is an icon Library
Watch from 1:31once installed we need to create a utility file that exports a function to merge the class names together from there we need to update our Tailwind config file which also includes a utility function for adding Tailwind colors AS Global CSS variables but now it's time for the fun part we create a new component file then simply copy the code on the website here take it into our project and then paste it professional developers will use control V here to optimize speed but just be careful not to hurt yourself with Pro tips like that let's go ahead and serve the app locally and now we have this awesome animation with almost no effort on our part now one thing that's cool about this copy and paste approach is that we have full control over the code like for example if we look at the react code you can see we have a component for every key on the keyboard if we wanted to make this a Russian MacBook we could just manually change the keys to be slic or if we don't like the colors we could easily modify the tail one CSS code in other words we've got a great starting point that we can now build on it's really that easy but now I want to take a look at some of the more advanced animations in this library and talk about how they're actually done under the hood let's first start with this Gemini animation which you might recognize from Google's Gemini homepage as we scroll down the lines on this graphic become brighter it looks like this would be extremely difficult to pull off but it's actually easier than you think what you need first is a scalable Vector graphic in the SVG we have a path and that path has a length but notice how it's a motion path from the frame or motion library to make it invisible we can start the length at zero but then make the path length State on the react component that updates when the scroll position changes as the user Scrolls down the path length increases thus animating the SVG and you can see
Watch from 3:02more examples of SVG line drawing in the frame R motion documentation but the next component I want to look at is Sparkles this one will add a bunch of sparkly dots below some text in your UI pretty fabulous but how does this one work in this one we're not using divs and CSS but instead using a canvas Which is far more efficient for highly complex animations with a lot of different elements the magic behind this component though comes from a different Library called TS particles this library is plain Java JavaScript and framework agnostic which means if you like this effect it should be relatively easy to implement in any framework next up we've got the text generate effect this effect simply types out text on the screen Like Oxygen gets you high in a catastrophic emergency we're talking giant Panic breaths suddenly you become euphoric docile you accept your fate it's all right here emergency water Landing 600 mph blank faces Cal as Hindu cows the developer chose a quote from Fight Club which is further evidence that there's some kind of madman behind this project the this effect is done is pretty easy you first take the initial words and split them into an array then frame or motion has a utility that allows you to stagger animations so we simply offset each word by 0 2 seconds and animate each one in individually but now let's check out an example with some more complex text manipulation the evervolt card component looks pretty simple at first glance but when you hover over it you'll notice it has some text in the background that's constantly changing As you move the mouse around in addition the gradient in the background is generated based on the mouse position if we look at the code you can see there's is a function called Generate random string inside this function we just have a string of characters which is followed
Watch from 4:34by an empty string called result then we have a for Loop that picks out random characters from the original string to build out a new string the loop runs based on the length argument to this function which in this demo is500 that seems pretty inefficient for something that's purely cosmetic but in JavaScript development this is the way if it looks cool the code is correct even if the code is not super efficient it doesn't really matter because the end user is only going to hover over it for a couple seconds at most now the other part of this component is the gradient in the background the component is also tracking the mouse move event on the div itself and when that event happens we're calling the get bounding client wct method which provides information about where that element actually is in the browser window it then does some math with the mouse position in the viewport and that div to figure out where the mouse is specifically in the div then we pass those values to frame or motion with the use motion value hook then in the actual jsx we have a mask image that displays a gradient in the background with an origin that starts at the mouse X and mouse y positions so basically anytime the mouse position changes we repaint the gradient on the screen and also regenerate a 1500 character random string and I have to say the end result is really cool the next effect I want to look at is the hero Parallax with this effect you'll notice that when we scroll down the graphics change their shape and rotation and eventually stick to the screen and start scrolling horizontally I made a video about Parallax in the past which I'll link in the description but the general idea is that as you scroll down the elements in the background move at a different speed than one would expect we're looking at a 2d screen so we expect everything to move at the same speed but in real life in a 3D World the displacement of
Watch from 6:04objects is different based on the observer's point of view things close to you move fast but things far away move slowly in this demo you can see we have a bunch of different spring animations here that control different effects like rotation opacity and movement along the X and Y AIS every single one of these animations though is tied to the scroll y progress we get that value from frame REM motion with a react hook in the UI we can then strategically add these different effects to different rows of cards to get the desired effect this process can be pretty painstaking but there are some websites out there that go all out with things like 3js to create these amazing 3D experiences on the web now there's a ton of other UI elements that we could look at in this library but you might as well just go out and try them for yourself if you want to learn more about nextjs and react check out my full course on fireship iio thanks for watching and I will see you in the next one
Watch from 7:35Full transcript
- 0:00
one of the most hyped up UI libraries in the front-end World recently has been Shad CN UI but that's not what this video is about it's about another Library inspired by it that takes things to a whole another level and it's a total gold mine for lazy developers like me like if you're building an app to get in on the latest crypto fomo you can easily drop in this card to get this cool encrypted text effect or maybe you want to shoot a laser beam when you
- 0:21
scroll down the page or how about some animated plasma waves for your hero section that's just a small sample of what you can do in today's video we'll learn how to use aity to build off aome uis faster but also dive into its code to learn the secrets behind its magic before we get into it though let's talk about the library that inspired it Shad Cen web developers already have tons of awesome component libraries like
- 0:42
material chakra bootstrap and so on and at first glance Shad CN looks like yet another component Library it's got buttons forms progress bars and all the other components you'd expect what makes it unique is the way you actually use it in a project and know it has nothing to do with artificial intelligence it's based on a Cutting Edge new innovation called copy and paste you see normally when you install a UI Library it dumps a
- 1:03
bunch of code into your node modules folder then you import each of these components in your code and customize their appearance with props you never actually see their implementation details which can be a good thing but can also be a problem if you want a lot of control to customize their appearance now if we take a look at the docs and Shaden you'll notice that instead of installing a package we use an npx command which will actually copy and paste the source code into your project
- 1:24
and that gives you far more control over the code to change things as needed in other words it's not a component library but a collection of reusable components that you copy and paste into your app Shaden has dependencies of its own like tailwind and radex UI if you like Rix components which will give you that verell dashboard like look then Shad Cen is a highly efficient way to implement common UI components without doing
- 1:45
everything on your own from scratch the creator of this project works for versell but it's not just for the react ecosystem there's also implementations in spelt and view but remember I said this video is not about Shad CN it's about a similar library that also brings in frame or motion to go crazy with the anim the library is called aternity UI they didn't pay me or sponsor this video but they're a web development agency that
- 2:05
will also design custom components for you in exchange for money but all the base components are totally free in order to take advantage of them we need to make a couple assumptions about your project you're using react tailwind and frame or motion now even if you use a different framework like spelt in my case you should still keep this library on your radar because it's a good source of inspiration and you can always reverse engineer this stuff in your own
- 2:25
framework but currently I'm in a vanilla nextjs project with Tailwind install what I want to do is add this cool MacBook scroll animation to my homepage when I first looked at it I thought that MacBook must be a PNG but get this the entire MacBook is HTML and CSS every key on the keyboard is its own div and react component it's crazy and the developer must be some kind of madman and we get
- 2:46
to reap all the benefits let's begin the reaping process first we need to go and install the dependencies we've got framer motion which is the animation Library clsx which is for merging CSS class names Tailwind merge to merge classes in Tailwind without conflict and Tabler icons which is an icon Library once installed we need to create a utility file that exports a function to
- 3:06
merge the class names together from there we need to update our Tailwind config file which also includes a utility function for adding Tailwind colors AS Global CSS variables but now it's time for the fun part we create a new component file then simply copy the code on the website here take it into our project and then paste it professional developers will use control V here to optimize speed but just be
- 3:26
careful not to hurt yourself with Pro tips like that let's go ahead and serve the app locally and now we have this awesome animation with almost no effort on our part now one thing that's cool about this copy and paste approach is that we have full control over the code like for example if we look at the react code you can see we have a component for every key on the keyboard if we wanted to make this a Russian MacBook we could just manually change the keys to be slic
- 3:47
or if we don't like the colors we could easily modify the tail one CSS code in other words we've got a great starting point that we can now build on it's really that easy but now I want to take a look at some of the more advanced animations in this library and talk about how they're actually done under the hood let's first start with this Gemini animation which you might recognize from Google's Gemini homepage as we scroll down the lines on this graphic become brighter it looks like
- 4:08
this would be extremely difficult to pull off but it's actually easier than you think what you need first is a scalable Vector graphic in the SVG we have a path and that path has a length but notice how it's a motion path from the frame or motion library to make it invisible we can start the length at zero but then make the path length State on the react component that updates when the scroll position changes as the user
- 4:29
Scrolls down the path length increases thus animating the SVG and you can see more examples of SVG line drawing in the frame R motion documentation but the next component I want to look at is Sparkles this one will add a bunch of sparkly dots below some text in your UI pretty fabulous but how does this one work in this one we're not using divs and CSS but instead using a canvas Which
- 4:50
is far more efficient for highly complex animations with a lot of different elements the magic behind this component though comes from a different Library called TS particles this library is plain Java JavaScript and framework agnostic which means if you like this effect it should be relatively easy to implement in any framework next up we've got the text generate effect this effect simply types out text on the screen Like
- 5:10
Oxygen gets you high in a catastrophic emergency we're talking giant Panic breaths suddenly you become euphoric docile you accept your fate it's all right here emergency water Landing 600 mph blank faces Cal as Hindu cows the developer chose a quote from Fight Club which is further evidence that there's some kind of madman behind this project the this effect is done is pretty easy
- 5:31
you first take the initial words and split them into an array then frame or motion has a utility that allows you to stagger animations so we simply offset each word by 0 2 seconds and animate each one in individually but now let's check out an example with some more complex text manipulation the evervolt card component looks pretty simple at first glance but when you hover over it you'll notice it has some text in the
- 5:51
background that's constantly changing As you move the mouse around in addition the gradient in the background is generated based on the mouse position if we look at the code you can see there's is a function called Generate random string inside this function we just have a string of characters which is followed by an empty string called result then we have a for Loop that picks out random characters from the original string to build out a new string the loop runs
- 6:11
based on the length argument to this function which in this demo is500 that seems pretty inefficient for something that's purely cosmetic but in JavaScript development this is the way if it looks cool the code is correct even if the code is not super efficient it doesn't really matter because the end user is only going to hover over it for a couple seconds at most now the other part of this component is the gradient in the background the component is also
- 6:32
tracking the mouse move event on the div itself and when that event happens we're calling the get bounding client wct method which provides information about where that element actually is in the browser window it then does some math with the mouse position in the viewport and that div to figure out where the mouse is specifically in the div then we pass those values to frame or motion with the use motion value hook then in
- 6:52
the actual jsx we have a mask image that displays a gradient in the background with an origin that starts at the mouse X and mouse y positions so basically anytime the mouse position changes we repaint the gradient on the screen and also regenerate a 1500 character random string and I have to say the end result is really cool the next effect I want to look at is the hero Parallax with this
- 7:12
effect you'll notice that when we scroll down the graphics change their shape and rotation and eventually stick to the screen and start scrolling horizontally I made a video about Parallax in the past which I'll link in the description but the general idea is that as you scroll down the elements in the background move at a different speed than one would expect we're looking at a 2d screen so we expect everything to move at the same speed but in real life
- 7:33
in a 3D World the displacement of objects is different based on the observer's point of view things close to you move fast but things far away move slowly in this demo you can see we have a bunch of different spring animations here that control different effects like rotation opacity and movement along the X and Y AIS every single one of these animations though is tied to the scroll y progress we get that value from frame
- 7:54
REM motion with a react hook in the UI we can then strategically add these different effects to different rows of cards to get the desired effect this process can be pretty painstaking but there are some websites out there that go all out with things like 3js to create these amazing 3D experiences on the web now there's a ton of other UI elements that we could look at in this library but you might as well just go out and try them for yourself if you
- 8:15
want to learn more about nextjs and react check out my full course on fireship iio thanks for watching and I will see you in the next one
Description
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 https://ui.aceternity.com/components
ShadCN https://ui.shadcn.com/
Parallax Tutorial • The Parallax Effect // 5 Minute WebDev Pro...
Fireship Next.js Course https://fireship.io/courses/nextjs/
More from Beyond Fireship
×6.45:04Subtle, yet Beautiful Scroll Animations
Beyond Fireship2M views
×2.98:33Most overpowered way to build mobile apps?
Beyond Fireship925K views
×2.76:17Industrial-scale Web Scraping with AI & Proxy Networks
Beyond Fireship854K views
×2.66:33How I deploy serverless containers for free
Beyond Fireship812K views
