Framer Tutorial: How To Create Interactive Shiny Elements

Описание: ✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account

In this Framer tutorial, I'm showing you how to create those mesmerizing interactive shine effects you've seen on modern websites. You'll learn how to add dynamic, cursor-following highlights to any element - from text to UI components. Perfect for adding that extra level of polish and interactivity to your designs, all without writing code.

→ Remix the tutorial project: https://framer.university/resources/3...
→ Tutorial for creating a 3D object setup: https://framer.university/lessons/3d-...

Mentioned links:

01:27 - Tutorial Video Link

00:00 - Introduction & Demo
00:39 - Inspiration: Stripe Press Example
01:19 - What We’ll Focus On (Shiny Effect, Not 3D)
02:52 - Preparing the Book Cover Image (ChatGPT, Pixelmator, Texture)
03:58 - Creating SVG Text in Figma
04:47 - Setting Up the Frame and Mask in Framer
06:19 - Building the Shine Effect with a Gradient Frame
09:35 - Making the Shine Interactive (Parallax Hover Component)
13:08 - Applying the Technique to Other Elements
14:09 - Adding 3D Interaction (3D Look Component)
16:10 - Publishing & Final Thoughts
16:40 - Outro, Resources, and Next Steps

Follow me on:
X:   / learnframer  
Instagram:   / framer.university