37 x Interactive React JS Components to Try - Aceternity UI

the designs and animations and interactions you're seeing right now are from a brand new library that I think is worth checking out that does interactive animated components that are completely for free it's called aeternity UI and in this video I'm going to be checking it out here's a quick glimpse of just some of the components you'll get to see in this video and checking these out will be perfect if you're looking for inspiration or ideas on what to add to your own websites to make them more engaging St starting off on Google let's type in aeternity DOI the very first website takes you to a URL called ui. aet.com and here it's essentially make your website look 10 times more modern more beautiful and quite a few different things and it has some examples of what it does but I'm going to head over to the components to have a look at some of these really cool things that it can do the very first one is a component which is a 3d effect card and if I preview it I can hover over it and it's adding depth to essentially my hover effects of my mouse here everything's still clickable I can still select the text but I can actually have a look at the code and see what's happening and copy out this component immediately for my own use so while this component's great if I scroll down here all I have to do is install like framer motion Tailwind merge and add these two components in so it's this cnts file and this 3D codon then I could replace it with my own components but this is a really cool component and it's way more interactive than just a regular box if I go back there's quite a few of these components I want to have a look at exactly what it provides cuz some of these are really interesting I like this one here which has this effect where it's adding depth and almost like your components falling flat I've seen this on some homepages before where the component actually starts off with a little bit of a slant and then as you scroll down it goes back into a regular sized I suppose window now there's dark versions and light versions for all these components though I don't think that one properly changed this one seems to have changed butth let's have a look at this hero parallx one so here it's got a hero component and as you scroll down there's a lot of Animation to all these windows so that's pretty cool if I zoom out a little bit you get I suppose a better effect of what's Happening Here let me take a look at this Google Gemini effect so this has basically these lines which I suppose as you scroll down seem to flow to the right hand side and if I scroll back up they flow to the left and this is just using some svgs that I suppose are transitioning with the scroll effect so nice and simple depending on your use case maybe you want to add some more interactive elements here but it's just an example of another way to build a website that's a little bit more engaging next is this tracing beam it's basically something that follows your scroll location on the left hand side as you scroll through an article so rather than having the scroll on the right hand side this line kind of follows your scroll roll position in the specific section you're in which could be useful for blogging one that I really liked was this animated tool tip which essentially adds these floating tool tips above names as you scroll if you have a look it is a pretty simple setup basically you set up how many items you want an image an ID a location but the result is this kind of a bouncy kind of moving with a little bit of a slant tool tip that makes it way better than just having a regular hover effect I can even click and copy the text on these elements but as soon as I Mouse out it's gone this next one is a very subtle effect it's background beams and if you look very closely here you might be able to see that there are these stars or beams that are happening in the background of this box I might have to increase the contrast so that you guys can see it cuz it's a very subtle effect but it's just adding a little bit more life to this component this component right here here is probably my favorite it's the Bento Grid or Bento UI I've done videos on it before but it allows you to display all your components in a Bento style grid and I really like that but you can take it one step further by adding in even more animation having effects happen on the hover state of your mouse that makes this Bento grid feel way more alive there's a little bit of depth where the Box feels like it's lifting off the page once you actually hover you can see these elements moving in the background and it's just really cool so this is definitely one I think I'll be using in my future websites this next one I like as well it could be used for a number of situations it's a card stack but unlike a regular card stack This One automatically changes every few seconds allowing you to use it for multiple reasons like this would be perfect for a homepage where you could have different reviews or testimonials and they continuously change as the user is sitting on that page viewing it or even in maybe a vento grid this next one is perfect for homepages as well it's the container scroll animation and what's happening here is that you have an iPad or a device and you put something inside like your app in there and as you're scrolling down it goes from a slant to a flat perspective it's drawing the user's attention to what's on this screen and this is perfect for putting on your SAS or your website or whatever product you're doing and having it in here so that the user is focused on it as it's animating through your scroll effect this next effect is cool because it's one that I actually saw hyperplex create a a while back where you have this animated sequence that moves with your mouse cursor but there's also a gradient to it it's pretty cool it's called the evervolt Cod and here you have this Cod and as I move my mouse in here you have this effect where text is changing there's a gradient and there's a hover effect which is awesome now it's just a copypaste item which I could customize however I want the next two are kind of boring there's this glow effect which lights up this card I don't really think that's anything special and then there's this background dot or grids which adds these grids to the background of your cards now both of these I suppose I'm seeing more often where a page looks a little bit more interesting because it has these GDs but it's probably not something that I get excited about however if we're talking about homepages the infinite moving cards is a good one this one can be used for things like reviews and testimonials as well and it's basically these cards which slowly move across the screen and if you Mouse over they stop quite a simple component in principle but it's one that's always effective on pages if you're trying to add a little bit of animation and Life to them the parallex grid scroll is one that's quite simple in theory it's just essentially a scroll Dynamic where some items are moving faster than others but it adds for this nice effect which I don't mind I don't often do a lot of websites with large galleries like this but if for example you're doing a homepage or a featur section with lots of features then this could make it a little bit more interesting as well here's another really cool component called the sticky scroll reveal this one would be perfect for a feature section it allows you to have text and sections on the left hand side with the right hand side staying the same in terms of positioning but changing in terms of its picture or in this case its color and this allows you to Showcase a product in use while showcasing each one of its features without taking the user's Focus away from that specific product another example which would work perfectly for a feature section is animated tabs now this section here I've got these tabs at the top and as I select different ones they come into view when I focus in I'm just viewing that one specific tab as I hover over the tabs here at the top you can see them hover into view and as I select them they come into focus in almost this like 3D kind of way there are way more effects like this one here for a text reveal As you move your mouse or this one here here which generates text like a typewriter or this one here more like a animation typewriter or this one here with waves or this one here where your pointer changes as you move but if you want to have a look I've added the link in the description below definitely check out this Library as eternity UI will probably be growing and adding way more components that are animated and interactive but for the time being hopefully this gave you a good idea of what you're in for if you like this video make sure you hit like And subscribe and I'll see you in the next one thank you Q

Channel: Adrian Twarog

Views: 70,889

Keywords: aceternity ui, aceternity, ui, react, reactjs, react js, animated components, interactive components, react animated components, react js animated components, react interactive components, react js interactive components, ux, html, css, tailwindcss, 3d card, bento grid, hero parallax, animated tooltip, card stack, background grid, animated tabs

Id: IYLV26d0dOc

Length: 8min 30sec (510 seconds)

Published: Tue Feb 13 2024