The simple action of light reflected from a surface or refracted through a surface can produce spectacular views. We see it every day in the physical world. It may be the way the sun looks through your office window or the light striking a mirror at right angles. They are like little science experiments that take place right in front of us.
Thanks to the latest CSS and JavaScript techniques, these effects are also dazzling web users. Everything from relatively simple reflection details to light-bending reflexes are popping up on our screens. Even very realistic behaviors are possible.
Today, we will introduce you to some excellent code items that bring mirror effects, reflection and refraction to life. Let’s take a look!
Bonsai animation by Kamil
This finely animated bonsai provides a calming feeling that surpasses the serious technology that makes it work. It uses SVG and GSAP animation library to create a beautiful water reflection effect.
Watch the Pen Bonsai animation by Kamil
PBR reflection with ycw
This is a very unique fragment with a multitude of effects. First, there is a rotating shape that hover in front of a mirror-like surface. Note also the shiny reflection below. The lighting and shading is great. You can also use your mouse or touch to change the perspective.
See the Reflection PBR Pen at ycw
Orb Cursor Movement Mirrored Light by Diana Le
This fragment is proof that mirror effects can be applied in unfamiliar ways. Two bright orbs appear against a black background. Move your cursor to control on the left (white), while the other indicates your movements. More fun than these orbs should be all over the screen together!
Watch Oriana Light Orb Cursor Movement with Diana Le
GLSL: Refractive rays by Liam Egan
The color and texture of this animation is inspiring. Rows of rows of fields move towards you, and your cursor position changes the refractive index. The look goes from glass to static to old school TV. HTML 5 canvas and JavaScript are used to create the ultra-smooth movement.
Look at the GLSL Pen: Refractive Rays by Liam Egan
Pure CSS text mirror and Tim
Applying mirror text is surprising. With just a few dozen lines of pure CSS, you can achieve an engaging effect that is sure to grab a user ‘s attention. The SEC’s secret is to transform the property, which turns the mirrored version upside down. From there, a gradient is used to create a more realistic look.
Look at the Pen Pure css text mirror by Tim
Text Refraction by Juan Fuentes
Add some custom text and this article will make it look like it is viewed through a crystal ball. Cursor movements alter both the view and the magnitude of the effect. When combined with the colorful background, the whole presentation evokes 1960s imitation.
Look at the Refraction of Pen Text by Juan Fuentes
Phone Reflection by Luke Lincoln
Take a look at this abstract view of modern obsession – staring blankly at your phone. Click on the phone and the simulated text slowly shows up the body of the subject. It’s like what you would see in a dark movie theater.
Check out the Phone Pen Reflection by luke lincoln
Three.js Reflection the seanwasere
Speaking of abstract works, this virtual game show is something to see. 3D balls roll with mirrors around and the light bounces from them. You can also change the perspective of the scene, adding even more intrigue to the excellent special effects. If astronauts play games in space, this might be the one.
See the Pen Three.js Reflection by seanwasere
Adding a New Perspective to the Web
Impressively, as it turns out, the developers are creating some mirror effects, reflections and refraction that are just amazing for the web. Not only do they look incredible, but many of them also make great use of physics to add a layer of realism.
Want to see more excellent clips? Take a look at our CodePen collection!
