This UI component library is mind-blowing

Summary

The video introduces aity UI, a React component library inspired by Shad CN UI that brings animated and interactive elements to web applications. It allows developers to easily implement effects like scrolling animations, responsive SVGs, and text generation with minimal coding. The presenter analyses some of these effects to uncover the code powering the interactivity. From path-based SVG animations to mouse tracking gradients and staggered text reveals, aity leverages modern web technologies like Tailwind, Framer Motion, and Canvas to enable developers to quickly build visually appealing UIs with rich motion designs.

Takeaways

• 🔥 Shad CN UI is a unique UI library that stands out for its copy-and-paste approach, allowing more control over UI components by incorporating them directly into projects.
• 📢 The video introduces Aternity UI, a library inspired by Shad CN but with additional features like animations and effects, catering to developers seeking to enhance UI with minimal effort.
• 💻 Aternity UI is particularly beneficial for React, Tailwind, and Framer Motion users, though it can inspire developers using any framework due to its innovative components.
• 💡 The library offers a wide range of animations and effects, such as encrypted text, laser beams, and animated plasma waves, showcasing its versatility for creative UI design.
• 🔧 Aternity UI's approach enables developers to directly manipulate component code, offering unparalleled customization and control compared to traditional UI libraries.
• 📚 Documentation and usage examples highlight the library's ease of use, showing how developers can quickly integrate complex animations and effects into their projects.
• 👨‍💻 The creator's background and the development agency behind Aternity UI suggest a strong foundation in web development and custom component design.
• 📈 The video emphasizes the concept of 'copy and paste coding' as a viable and efficient method for implementing and customizing UI components, challenging traditional development norms.
• 👀 Advanced animations and effects, such as the MacBook scroll animation, demonstrate the library's capability to produce high-quality, interactive UI elements with minimal coding.
• 🚀 Aternity UI's integration with Framer Motion and other libraries enables dynamic and visually appealing effects, making it a valuable resource for developers aiming to create standout UIs.

Q & A

What is the Shad CN UI library and what makes it unique?

Shad CN is a UI component library that allows developers to copy and paste components directly into their projects rather than importing them. This gives more control over customization.

What dependencies and assumptions does the Aternity UI library require?

The Aternity UI library requires React, Tailwind and Framer Motion. It also assumes you are using those in your project to take full advantage.

How is the scrolling MacBook animation achieved?

The entire MacBook is built using HTML and CSS. Each key on the keyboard is a separate div. As the user scrolls, React components and Framer Motion animate the elements.

How does the Gemini animation work as you scroll?

It uses an SVG path with a length state that updates based on scroll position. As the path length grows on scroll, it animates the SVG lines.

How does the Sparkles text effect work?

It uses a canvas instead of DOM elements for efficiency. The tsParticles library generates the sparkly dots which works across frameworks.

What technique is used to achieve the typing text effect?

The words are split into an array, then staggered over time using Framer Motion's animation utilities.

How does the evervolt card create dynamic text and gradients?

It generates random text on hover with a loop. It also tracks mouse move to create a gradient with origin at the mouse position.

What causes the parallax distortion effect in the hero section?

As you scroll, different spring animations are applied to elements like rotation and scale, tied to scroll progress. This causes a depth/3D effect.

What are some good resources to learn more about React and NextJS?

The video creator has a full course on Fireship.io for learning NextJS and React in depth.

What is the overall purpose of the Aternity UI library?

To provide developers with pre-built animated components that can be quickly copied into projects to create impressive UI effects with less effort.

Outlines

00:00

😊 Overview of Shad CN UI Library and introducing aternity UI Library

This paragraph provides an overview of the Shad CN UI library, which allows developers to easily copy and paste reusable UI components into their apps instead of using a traditional component library. It then introduces aternity UI, a similar library that also incorporates Framer Motion for animation effects. Some example animations from aternity UI are shown.

05:01

🤓 Technical breakdown of some of the advanced animations in aternity UI

This paragraph dives into the technical implementation details behind some of the more complex animations in the aternity UI library: - The Gemini animation uses a Scalable Vector Graphic (SVG) path with animated length to create the line drawing effect - The Sparkles effect uses the canvas API and ts-particles library to efficiently render many animated elements - The text generation effect simply staggers each word's entrance animation - The evervolt card uses mouse position to dynamically generate random text and update the card's background gradient - The hero parallax effect ties scroll position to manipulate elements' transform properties like rotation and translation

Keywords

💡Shad CN UI

Shad CN UI is a popular UI component library for front-end web development. It provides pre-built UI components like buttons, forms, etc. that developers can easily add to their apps. The video says it is unique because instead of installing a package, you copy and paste the source code directly into your project for more control and customization.

💡code customization

The ability to customize code is a benefit of the copy-paste approach used by Shad CN UI and Aity UI. Since the full source code is copied into your project, you have more control to tweak and change the components compared to traditional installed packages.

💡Aity UI

Aity UI is the main focus of the video. It is a UI library inspired by Shad CN UI but adds motion and animations. You can copy-paste components like scrolling animations, particle effects, etc. It is aimed at React projects using Tailwind and Framer Motion.

💡Framer Motion

Framer Motion is an animation library for React. It is used by Aity UI to power its advanced animated components. The video analyzes some Aity components by showing how Framer Motion is used to drive the animations under the hood.

💡SVG animations

Scalable vector graphics (SVG) can be animated with code. The video shows how the Gemini animation uses an SVG path with Animotion to animate an SVG graphic based on scroll position. This creates the line drawing effect.

💡canvas animations

The HTML canvas element can render 2D animations and graphics efficiently. The Sparkles component uses the tsParticles library with canvas instead of DOM elements, allowing for many animated sparkle elements.

💡text effects

Aity UI includes components for advanced text effects like typing, scrambling, etc. These often split text into arrays of characters/words and animate them individually using Framer Motion's stagger functionality.

💡Parallax

Parallax is an effect where background images scroll at a different speed than foreground content, creating an illusion of depth. The hero parallax component uses scroll position and spring animations to change shape, rotation, etc. of elements.

💡lazy developers

The video says Aity UI is useful for "lazy developers" because you can simply copy-paste these advanced animations into projects without doing them from scratch. It caters to those looking for quick but powerful effects.

💡madman developer

The video playfully refers to the developer of Aity UI as "some kind of madman" implying that the complexity of the UI designs seems absurd, almost crazy. But web developers embrace complex solutions if the end result is visually appealing.

Highlights

Shad CN UI is an innovative UI library for front-end web development

Shad CN allows developers to easily copy and paste reusable UI components into their apps

Aternity UI is inspired by Shad CN but adds animations using Framer Motion

The MacBook scroll animation is built entirely using HTML and CSS

The Gemini animation uses SVG path length state and scroll position to animate the lines

The Sparkles effect uses the tsParticles library and canvas for efficient, complex animations

The text generation effect staggers each word's animation by 0.2 seconds

The evervolt card uses inefficient but impressive methods like random string generation

Parallax effects tie scroll position to spring animations to create depth

You can customize components since the source code is copied directly into your project

The creator behind Aternity UI seems to value visual appeal over efficient code

Effects like mouse position tracking show how UI tricks are implemented

Strategically layering animations creates impressive parallax 3D effects

Aternity UI is a useful source of inspiration even for non-React developers

The library contains many more impressive animated UI components to explore

Transcripts

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

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

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

once 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

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

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

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

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

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

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