New
New
New
Component
Holographic 3D Cards in Framer
This is an interactive holographic card that also has a nice 3D hover effect. It was recreated in Framer, from the old Linear customers page. The crazy thing is that I could recreate this amazing effect without writing a single line of code. This perfectly shows the superpower that Framer gives to designers.
Created by
About the resource
After pulling up the Wayback Machine and digging into the code of the old Linear website, I finally understood how they did the effect. And it's simpler than you think.
They layered 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
About the resource
After pulling up the Wayback Machine and digging into the code of the old Linear website, I finally understood how they did the effect. And it's simpler than you think.
They layered 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
About the resource
After pulling up the Wayback Machine and digging into the code of the old Linear website, I finally understood how they did the effect. And it's simpler than you think.
They layered 5 elements on top of each other (images and gradients), all with different opacity values and blending modes. If done correctly, you get the holographic effect.
All the neccessary elements laid out.
All the neccessary elements laid out.
All the neccessary elements laid out.
You can use the image above as a cheatsheet for the layering, grouping, and all the settings for each layer (and of course, grab the remix link to find everything).
Once we have that, all we need is a way to move all the gradient layers on hover. For this, we can use the parallax floating component. We just put it within each of those layers, customize the properties in the right panel, and we're done. Now they move in accordance with the cursor.
You can use the image above as a cheatsheet for the layering, grouping, and all the settings for each layer (and of course, grab the remix link to find everything).
Once we have that, all we need is a way to move all the gradient layers on hover. For this, we can use the parallax floating component. We just put it within each of those layers, customize the properties in the right panel, and we're done. Now they move in accordance with the cursor.
You can use the image above as a cheatsheet for the layering, grouping, and all the settings for each layer (and of course, grab the remix link to find everything).
Once we have that, all we need is a way to move all the gradient layers on hover. For this, we can use the parallax floating component. We just put it within each of those layers, customize the properties in the right panel, and we're done. Now they move in accordance with the cursor.
The parallax floating component within elements that we want to move.
The parallax floating component within elements that we want to move.
The parallax floating component within elements that we want to move.
Lastly, we gotta add a crazy 3D hover tilt effect. That must be hard, right? Well... not really.
We can grab a nice little Framer University component - the 3D hover one.
Then we can drop it into our breakpoint, move the card we just created outside of the breakpoint, and simply connect the card to the 3D hover component. And that's it. It'll magically give it a nice 3D hover effect.
Lastly, we gotta add a crazy 3D hover tilt effect. That must be hard, right? Well... not really.
We can grab a nice little Framer University component - the 3D hover one.
Then we can drop it into our breakpoint, move the card we just created outside of the breakpoint, and simply connect the card to the 3D hover component. And that's it. It'll magically give it a nice 3D hover effect.
Lastly, we gotta add a crazy 3D hover tilt effect. That must be hard, right? Well... not really.
We can grab a nice little Framer University component - the 3D hover one.
Then we can drop it into our breakpoint, move the card we just created outside of the breakpoint, and simply connect the card to the 3D hover component. And that's it. It'll magically give it a nice 3D hover effect.
Connecting the card to the 3D hover component.
Connecting the card to the 3D hover component.
Connecting the card to the 3D hover component.
