Project URL: https://razer-animation-example.glitch.me
Edit URL: https://glitch.com/edit/#!/razer-animation-example
DEV.to article: https://dev.to/carlyraejepsenstan/how-do-you-make-that-css-razer-animation-4opo
I sourced this from a CodePen, which is linked in the DEV article.
Blur effects are the way to go with this 
That and the calc function were the coolest part of this animation
background-position I learned yet forgot oof
I would never be able to make the animation
haha, background-position isn’t too hard - you just need to mess with it a little. My first article on DEV was about using bg-position.
blur is sometimes performance intensive, for example those things they do on youtube where for a potriat video they make another copy of the video and then blur it and use it as the background are really hard to do in realtime on a sort of potato-ish laptop
I learned that from @hhr3. The auroraOS project was laggy, so I assumed it was the blur.
Yeah, it’s even worse when some people use software rendering. The nice thing is that css effects can utilize the gpu which is why it’s recommended to draw a canvas of lower scale then transform it with css.
@code-alt If you read my article you might be able to 
This would be a cool effect to use in video editing with words and shapes. Such a pity that most recording tools actually “render” the webpage by slowing down setTimeout, setInterval and changing performance.now, and Date.now, so they only work for js animations. But assuming your computer can record at good framerate here’s a tool that can help you turn this cool css animation into a video