Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
New
New
New
Component
This is a glowing skeuomorphic tabs interaction recreated in Framer, from Benjamin’s original design. Remix it to explore how the tabs switch with smooth lighting transitions, or copy the component directly into your own Framer project to use right away.
Created by
To create this glowing skeuomorphic tabs interaction, I made three tab components: each with pressed and light variants. Then, I combined all three tabs into a single main component.
When any tab is clicked, it switches to a variant where that tab shows its pressed state while the others display their light variants, depending on their position in the layout. Four such combined variants together create the smooth glowing tab animation.
To create this glowing skeuomorphic tabs interaction, I made three tab components: each with pressed and light variants. Then, I combined all three tabs into a single main component.
When any tab is clicked, it switches to a variant where that tab shows its pressed state while the others display their light variants, depending on their position in the layout. Four such combined variants together create the smooth glowing tab animation.
To create this glowing skeuomorphic tabs interaction, I made three tab components: each with pressed and light variants. Then, I combined all three tabs into a single main component.
When any tab is clicked, it switches to a variant where that tab shows its pressed state while the others display their light variants, depending on their position in the layout. Four such combined variants together create the smooth glowing tab animation.
The four variants of the skeuomorphic tabs in Framer.
The four variants of the skeuomorphic tabs in Framer.
The four variants of the skeuomorphic tabs in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
