Discover How to Use Shaders in Framer for Stunning Animations

Discover How to Use Shaders in Framer for Stunning AnimationsDiscover How to Use Shaders in Framer for Stunning Animations

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Akin Gundogan

• May 26

I'm sure everyone's one of the most favorite features in Framer is shaders, after figuring out a way to use shaders for a circular progress animation, used them in an autoplaying slider, here's the tutorial link (including a link for the free remix), if you'd like to check! https://youtu.be/izpxQZ5Qiys?si=9yF7CC0GEJAZKqgN

Framer framerfile framertutorial

Atolani Adegbesan

• May 27

This is functional and persuassive

Akin Gundogan

• May 27

Thank you @Atolani Adegbesan, glad you liked it! 🙌

Alex Prokhorov

max

• Jun 1

These emails from Framer are the best thing on Monday morning

Framer

Božidar / SneR85 Ćalić

• Jun 1

Wow how this works? Any tutorial?

Ansh Jamdagni

pro

• Jun 1

Most websites tell you what a service does.

The good ones show you what it feels like to be inside it.

For Wilson's, the brief was to make invisible work visible. Not through just copy. But through design as well!

Four steps in their process, the voice interview, the framework build, the intent signals, the outreach conversation, each needed a graphic that could communicate without a word of explanation. So I built four custom UI cards inside Framer from scratch. Animated, brand-native, each one a small window into a real moment in the service.

No stock widgets. No imported assets. Just the constraint that makes Framer work interesting: make it feel like a real product interface without actually being one.