Component
Magic Folder Animation in Framer
This is a Framer recreation of the magic folder animation from Seb Cornelius's work. Feel free to remix the project to explore how this animation was built — all without writing a single line of code.
Created by
About the resource
To create this Magic Folder animation in Framer, I set up two variants of the card — one for the default state and one for hover. I built the 3D folder by masking the front and back SVGs inside separate frames, then applied a 3D transform to the wrapper to add depth. The folder and text were stacked together inside the card.
On hover, I scaled the card up slightly — and then came the fun part. I created a separate component for the light rays animation, with two variants — one for the default state and one for hover. Inside it, I used a conic mask on an angled frame, added the god rays component, and customized it to match the look I was going for. To enhance the effect, I also layered in a particles component for a soft, scattered light feel. The glow grows on hover using linear masking between the two variants — and that’s it!
About the resource
To create this Magic Folder animation in Framer, I set up two variants of the card — one for the default state and one for hover. I built the 3D folder by masking the front and back SVGs inside separate frames, then applied a 3D transform to the wrapper to add depth. The folder and text were stacked together inside the card.
On hover, I scaled the card up slightly — and then came the fun part. I created a separate component for the light rays animation, with two variants — one for the default state and one for hover. Inside it, I used a conic mask on an angled frame, added the god rays component, and customized it to match the look I was going for. To enhance the effect, I also layered in a particles component for a soft, scattered light feel. The glow grows on hover using linear masking between the two variants — and that’s it!
About the resource
To create this Magic Folder animation in Framer, I set up two variants of the card — one for the default state and one for hover. I built the 3D folder by masking the front and back SVGs inside separate frames, then applied a 3D transform to the wrapper to add depth. The folder and text were stacked together inside the card.
On hover, I scaled the card up slightly — and then came the fun part. I created a separate component for the light rays animation, with two variants — one for the default state and one for hover. Inside it, I used a conic mask on an angled frame, added the god rays component, and customized it to match the look I was going for. To enhance the effect, I also layered in a particles component for a soft, scattered light feel. The glow grows on hover using linear masking between the two variants — and that’s it!
The default and hover variant of the magic folder card component.
The default and hover variant of the magic folder card component.
The default and hover variant of the magic folder card component.
