 Hi there my friend and friends. I created whatever this is a few days ago and it wasn't at all what I set out to create and actually I was trying to do something completely different than what you see here right now and I ran into a whole bunch of problems along the way and it wasn't working at all what I wanted to do and so I sort of created or started playing around with a few things to see if I couldn't get you know just understand why what I was doing wasn't working and it somehow evolved into what we see here which is I guess kind of needs a little bit of a happy accident that we fell I fell into I guess with it now I have no idea what I actually plan to do with this thing we'll talk more about that in a few minutes and I also had no plans to actually make a video on this because I don't really have a practical application for it right now but I did share it on social media just because I thought it looked cool and a lot of people really liked it and then I got to thinking a little bit of not only is it cool and I think it'd be fun just to share because it's it's neat I guess but also because I think there's actually some things we can learn along the way here in how I made it and also the importance of things like experimentation so how do we even get here in the first place what led me down this path and the first thing was I wanted to do a video on mix blend mode and so what I'd actually done is I didn't have a lot of ideas because I wanted something a bit more practical than just like here's a few random boxes so I came over to code pen and I said let me look up a mix blend mode because people make all sorts of crazy and cool things and I saw this one which is a one that I knew well and we'll take a look at it and this neon one here and sort of poked around but these were the two that sort of grabbed my attention the most this one I like because they actually share how they did it and they had an improved version but what's cool here is you see like they have you know this this cool effect that's going on that looks really neat and they did it with color dodge but they're sort of showing that they have these different layers they have one layer that's the sparkles that we can see that are being animated they have another layer that's sort of this gradient like that but then when you put that gradient with the color dodge it creates this cool thing I'm like oh that that's kind of neat but I don't want to copy this idea and the other one that I saw was this one which I didn't want to recreate exactly this either but this one got me thinking a little bit and sort of like I had like this idea of the layers from here and then I had this idea from this one I was like what'd be really cool because you can see the glowy thing going and I had an idea of how they did that and so what I started thinking of was could I do it where I'd be scrolling down and having the colors sort of like change on the side of a card or something that's that's not moving and position fixed or position sticky that has that sort of this this neon effect but only as you scroll down be a little bit more subtle and I thought it could be really fun so I actually tried doing that you can see I had my first phase here my color my color burn I'll turn off the color burn here for a second because basically what it is I put this gradient in the background that I made really big we can make that a bit smaller I just wanted a whole bunch of colors in the background basically like I could give it that height of 100 VH so it'd be much bigger and then this element here this part of it would stay there as we scroll down but the problem was and it wouldn't even be necessarily on this one but I was playing around with position sticky to get it to work and actually we'll turn this one on we'll the color burn on first and the problem is when the color burns on I can get this effect because I have the other element we're going to see a little bit more how I did this in a second but as soon as I do a position sticky it breaks the entire thing and we lose this because we can't color burn with that because the position the way position sticky works and mixed blend modes work and it would be the same with position fixed where I couldn't do it it just it didn't work and that an initial idea sort of fell out the window and that's okay because we're actually going to come back to this because I played around with it a little bit more this is where I hit that moment of like well how can I or not even how can I do it is just like this idea of something moving and changing possible so that's why I came up with the idea of something that would just follow my cursor around because then I could just experiment I could move my cursor around a little bit so actually I put a cursor none here because I wanted to create this fake cursor instead but basically let's let's follow my mouse around and see if I can't change the color of something so my first step was just to make a box and I needed that box be able to move and and follow my mouse around so to be able to do that I did this where I gave it a left any top of this a custom property of x and y with a default being zero and I also did a translate of negative 50 negative 50 just because if I don't do that or we'll come back to that one in a second actually but then all I did was just use you know document mouse move and I'm just getting the the movement of my mouse and try putting that to the x and the y coordinates there's nothing complicated here if you want to look at the code you can I'll put a link to the finish code pen in the description you can see it's like it's not centered on my mouse so then I can come in with this translate negative 50 negative 50 so then it's centered on the mouse makes it feel a bit more natural I guess I don't know I just didn't like that I could like hang off in weird ways I guess really not essential and then the background white I wanted to keep but then I also wanted to give it a blur so we can do that with a filter blur say to ram you just play around with this number and you get a blurry box and then of course a border radius of a 50 percent and then you get more of a blurry circle instead and that was I did this on the before I don't even know actually I did that on my before because I was experimenting again let's see if I can do it without that we're gonna and if I do that I don't need the content on there so we'll whoa whoa whoa okay something maybe we'll go back to what we had why is that happening I'm sure there's a good reason for it I don't know what the good reason is so we're going to go back to what I had I don't I don't want to get into debugging right now but this one's working so we'll stick with that version of it and just really fast actually I did put an overflow of hidden on my html here just because if not when you sort of reach the edges of the page it will cause some scroll bars so that's why I had that on there normally in most projects I don't do this it's not the best practice but for silly things like this it's fine now obviously this doesn't do much but my idea was and this is sort of what I started with here when I sort of had it working was I had this white part which was what's showing me the stuff that's behind it sort of it's creating that window into the gradient that I wanted to get to so that's why first I needed sort of a white blobby thing I could move around the other thing is I did want a black background here we'll talk more about that in in a few minutes and then I needed to have the actual gradient so because I had this set up on my before and actually maybe this is where let's try it here we're going to do a little bit of continued experimentation where we can put this is on the cursor itself yeah okay so I think there we go so I can have this conic gradient basically and I just wanted a whole bunch of colors in the background so I did a conic gradient and then there was one problem and it wasn't a problem necessarily but if I didn't put something in the middle they sort of all meet in a really sharp way so I just added a radial gradient on top of the conic gradient that had sort of filled in that middle bit that was right there and you could you know muck around actually the first version of this I just had a whole bunch of radial gradients sort of all over the place I just thought the conic gradient would be a little bit easier so we can come in with that and then this is the idea of where I can then come in with a mixed blend mode and mixed blend modes are super weird and you'd sort of have to understand how they work but I just through experimentation basically and also knowing that as I said that black background is kind of important for this part if you had a white background there might be another one that we could use but this is where the there's color dodge and color burn I think color burn was the one that ended up being the correct one okay right the this is what I had originally tried and I forgot but this doesn't work because what's happening is the color burn is on the parent which means the children are also getting a color burn on it so then this doesn't work anymore so just because of how I set that up let's take that off of there and just for simplicity's purpose we'll come here and we'll do this as my after instead I am using nesting here we're in regular CSS nesting is available here was experimentation I'm not worried about browser support and because this is a suit element we do need the content on here and I think if we just do that there we go it comes in and it magically works so basically because of the way the blending modes work and the color burn works and everything the the color burn is something that's focusing on the darker colors uh that are available and it's sort of taking those darker colors and then by having this white thing on top we're sort of getting that extra layer of stuff I don't even actually know to be honest with you but it works um I guess I didn't I gave up on like trying to explain how they work um because I was just doing this experimentation but that was kind of cool and I didn't go okay if I can do that there's probably another cool thing we can do right so the next thing I did was I actually came in and I added this rotate you and let's turn off this color burn for a second so we can understand what this is doing and then I just take that animation and I can come on this and so another fun filter there and I said we'd get into some cool animation stuff so I can put this rotate hue on there and that's going to rotate the hue of my colors and you can go through a hue of 360 degrees which means you do the full circle so every 10 seconds it's just going to go through the full loop of colors and why that's kind of cool is now I don't even have to be moving my cursor anywhere for it to actually start shifting and as you move around it's always going to seem like a complete like if I'm here now it's sort of this bluey purple and then I go around I move it a bit and then I get there and now it's red so I just thought that was like this fun little extra thing and again just through experimentation and finding stuff and it got me to here um I did say there's a few limitations to what I did here so if we come up and we take a look um my background black this is important because the color burn is part of like the the darken things and actually just just for fun let's go to color dodge here this is like the crazy version of it color dodge is like the extreme version uh so sometimes actually with the colors it can look really good and you get more of like a globe when you hit some certain like thresholds and colors it does this which is a little bit too much um and I actually got stuck at one point in in playing around with stuff because I was convinced I used color dodge I think because I was looking at this demo and kept going back to that so I was like oh color dodge is what I want and then I was like this doesn't look like what I'd made and I don't understand um why it's not working so uh yeah color burn in this case was just a little bit more relaxed and tended to work um I also realized it stopped here because I didn't put infinite on there infinite there we go it's like my color is not changing anymore because it only did it once um so now we'll we'll keep on changing forever um and yeah this actually then led to me coming back to this idea um and we'll get back to the black thing in a second sorry I'm on tangentville right now but this did get me coming back to here in a way of like well if I can't do it while it's scrolling maybe I could still take advantage of this um by doing a animation on there and I guess you could do like a rotate hue but that's why I had that large background size on here and then I just did a thing that would move the background around so um just repositioning the background and let's there you go you can sort of see it it creates this sort of like interesting weird moving gradient type of effect and it's not that typical one where usually you see like it spins around in this case it's doing something a little bit different I'd have to play with the values and see if I couldn't get something that looks a little bit better um but basically all we have is that oh that 100 vh does not need to be on there but yeah basically I'm just moving the gradient around um in that space and by moving it around we can create some interesting things and maybe if I did want this to be on something I've been looking a lot at scroll based animations I'm just thinking of this now but I could probably somehow I'm wondering if I could make these custom properties or something yeah because you can do it with an animation so I could have something very similar to this but it's completely based on where my scroll position is instead of being based on just a regular animation so that idea comes back and I honestly never tried that uh so let's let's do that really fast and this is honestly on completely unplanned um little tangent we're going on here right now um but part of what I wanted to talk about was the importance of experimentation and playing around with these things and just by doing this now and coming back to it and looking at the animation that made me think of that and I think it's a really important thing that sometimes you just experiment and try things that might not make any sense just to see is it possible or if it's not possible doesn't mean it's a dead end it means that maybe there's other things you could try uh so here move I'm going to take off the time alternate and infinite um we'll just put linear I guess uh and and leave it like that so it should stop animating and then we can do an animation timeline of uh I guess we'll just do scroll for now um just to see if this works and so that should oh it's so it's really fast but you can see like that's sort of the idea I wanted I'd have to play with these colors a little bit um oh it's really fast because I don't have a lot to scroll if I'm let's just give ourselves p times 10 lorem uh and I'm using scroll I think view would be better here I'll put a link to my video where I explored scroll and view timeline so now I have too much so let's uh let's do a view on here instead um and then on the view so because of that let's just copy a bunch of this stuff um and then we can come up here and paste so it will scroll into view and then so when I get to there well it's a lot more than I expected there it is so as it's in the thing it's gonna sort of go through the animation that I created there um so yeah I don't think I'd use it exactly as is right now but it's a fun little like proof of concept this idea even works and there's probably some other stuff you could do with this and I'm hoping I'm unlocking ideas for you right now um and because that's sort of something I want to get to is coming back to this which I really like I think it's really neat um and we'll go to here before I get to that and where I said the black background is important is because the way the mix works if you have like a bright color you still get this weird thing going on um but even if I came in with like a purple you start getting some weird effects and it really depends on the color that you use so you can see that it's still going and then I still get this happening and it's sort of kind of cool on its own as well um and it just has to do with how color burn works and the darker colors and the lighter colors and um it's a little bit beyond me to be honest and this is why this whole thing works in the first place though I think is because those outer edges of the glow are lightening up things to the point where I guess we're getting the effect to work if there's somebody who knows better than me leave a comment and I might pin it but I think it has something to do with that uh right so even like a I don't know orange whatever you play around different values and you're going to get different types of looks yeah that you know get a little galaxy style thing going on anyway all this to say like I think it's a cool thing um I think I just discovered something in a way that I might be able to use it in a more interesting way here and we could do something a bit more in-depth but this whole video the purpose of it is more to talk about experiment have fun and if you have any ideas of what I can do with this I'm going to put the original version or the finished version of this with the black background linked down below to this code pen and what I want you to do is I want you to fork it and do stuff with it and then submit it and I want to see the different things and different like actual use cases people can and I'm going to do a video featuring some of the cool ones that people post um so I probably won't be able to post all of them the one thing is YouTube does not like having uh external links in YouTube comments so I'm also going to put a google form down below where you can submit your link to your fork code pen so you just come here all the way down at the bottom there's a little fork button do whatever you want to it if you can think of something cool whatever it is I want to I want you guys to be experimental have fun with it and then as I said we'll come back in probably a few weeks from now um it might actually be in like February that I actually get around to it just because my January is crazy busy um and then I'll feature some of the the amazing things and forks and other stuff people have done with this you can do whatever you want with it there's no limits have some fun and I'm looking forward to seeing what you create with it