Component
Skeuomorphic Interactive Keys in Framer
This is a Framer recreation of the interactive keys Rive demo originally created by Voicu Apostol. Feel free to remix the project and see how a skeuomorphic interaction like this can be built in Framer without any coding.
About the resource
To create something like this in Framer, we have to utilize a bunch of gradients and drop/inner shadows. They help us mimic the realistic look of elements in our design.
If we also want to add some interactivity to the design, utilizing components is the right play.
For example, I created components for the keys with Default and Pressed In variants, so I could connect between these two with a click interaction, and Framer smartly animates between them.
About the resource
To create something like this in Framer, we have to utilize a bunch of gradients and drop/inner shadows. They help us mimic the realistic look of elements in our design.
If we also want to add some interactivity to the design, utilizing components is the right play.
For example, I created components for the keys with Default and Pressed In variants, so I could connect between these two with a click interaction, and Framer smartly animates between them.
About the resource
To create something like this in Framer, we have to utilize a bunch of gradients and drop/inner shadows. They help us mimic the realistic look of elements in our design.
If we also want to add some interactivity to the design, utilizing components is the right play.
For example, I created components for the keys with Default and Pressed In variants, so I could connect between these two with a click interaction, and Framer smartly animates between them.
The two variants of the key component.
The two variants of the key component.
The two variants of the key component.
If you wanna dive deeper and see how you can build these interactive skeuomorphic illustrations in Framer, I highly recommend watching this tutorial.
If you wanna dive deeper and see how you can build these interactive skeuomorphic illustrations in Framer, I highly recommend watching this tutorial.
If you wanna dive deeper and see how you can build these interactive skeuomorphic illustrations in Framer, I highly recommend watching this tutorial.
