New
New
New
Guide
- How-to
- Shiny
- Elements
Guide
- How-to
- Shiny
- Elements
Guide
- How-to
- Shiny
- Elements
How to Create Shiny Elements in Framer
In this Framer blog, 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.
Posted by
Nandi
Table of contents
What we’re building
We’re going to recreate a shiny text effect where the shine moves as you hover. It’s not just eye candy, you can apply this to buttons, titles, cards, illustrations, basically anything.
What we’re building
We’re going to recreate a shiny text effect where the shine moves as you hover. It’s not just eye candy, you can apply this to buttons, titles, cards, illustrations, basically anything.
What we’re building
We’re going to recreate a shiny text effect where the shine moves as you hover. It’s not just eye candy, you can apply this to buttons, titles, cards, illustrations, basically anything.
Shiny text on book.
Shiny text on book.
Shiny text on book.
Step 1: Design your text in Figma and export as SVG
Unfortunately, you can’t turn text into SVG directly in Framer. So here’s what you do:
Open Figma.
Use the Text tool (press T) and type out your title or word (e.g. “Realm of the Public”).
Match the font and size to your design.
Right-click the text and choose Flatten, this turns your text into SVG paths.
Export it as an SVG file.
Now you’ve got a vector version of your text, perfect for masking.
Step 1: Design your text in Figma and export as SVG
Unfortunately, you can’t turn text into SVG directly in Framer. So here’s what you do:
Open Figma.
Use the Text tool (press T) and type out your title or word (e.g. “Realm of the Public”).
Match the font and size to your design.
Right-click the text and choose Flatten, this turns your text into SVG paths.
Export it as an SVG file.
Now you’ve got a vector version of your text, perfect for masking.
Step 1: Design your text in Figma and export as SVG
Unfortunately, you can’t turn text into SVG directly in Framer. So here’s what you do:
Open Figma.
Use the Text tool (press T) and type out your title or word (e.g. “Realm of the Public”).
Match the font and size to your design.
Right-click the text and choose Flatten, this turns your text into SVG paths.
Export it as an SVG file.
Now you’ve got a vector version of your text, perfect for masking.
Creating SVG text in Framer.
Creating SVG text in Framer.
Creating SVG text in Framer.
Step 2: Set up the mask in Framer
Back in Framer:
Create a frame where your title will sit.
Set a base fill color (this will be the “shine” behind the text).
Apply the SVG as a mask on that frame:
In the right panel, find the Mask setting.
Upload your exported SVG file.
Set the mask to Fit so it covers the text area perfectly.
Now your base color is only visible through the shape of the text, it’s essentially your canvas for the shiny animation.
Step 3: Create the shine layer
This is where the magic starts.
Inside the masked title frame, add a new frame. This will be your light source.
Name it something like “Light”.
Give it a radial gradient fill:
Use a mix of bright whites and transparent darks.
Add several gradient stops to create that glowy transition.
Tweak the gradient points and size until you get a nice soft spotlight effect.
You can move this gradient layer around and see how it highlights parts of the text in a satisfying way.
Step 4: Make it move (Parallax hover)
To make the light move with your cursor, we’ll use a Parallax Floating component.
Copy the component and paste it into your Framer file.
Place it inside the Light frame (use Cmd+X, select the Light layer, then Cmd+V to paste it inside).
Set the component to absolute positioning so it doesn’t affect layout.
Adjust the settings:
Enabled: Yes
Direction: Away (or Toward, depending on the vibe you want)
Speed: Start with 30, tweak as needed
Smoothing: Try 50–70 for a subtle but fluid motion
Boom. Your light now follows the cursor, creating a slick shine effect on the text.
Step 5 (Optional): Add a 3D Hover Effect
Want to take it even further? Add a 3D Look effect.
Use my 3D Look component.
Copy the component and paste it into your project.
Connect it to the outer frame of your element (e.g. the book cover or card).
Tweak the settings:
Enable perspective then, adjust sensitivity and rotation and finally enable dragging for a draggable 3D effect Now your shiny text not only reacts to the cursor but also moves in 3D space.
Step 2: Set up the mask in Framer
Back in Framer:
Create a frame where your title will sit.
Set a base fill color (this will be the “shine” behind the text).
Apply the SVG as a mask on that frame:
In the right panel, find the Mask setting.
Upload your exported SVG file.
Set the mask to Fit so it covers the text area perfectly.
Now your base color is only visible through the shape of the text, it’s essentially your canvas for the shiny animation.
Step 3: Create the shine layer
This is where the magic starts.
Inside the masked title frame, add a new frame. This will be your light source.
Name it something like “Light”.
Give it a radial gradient fill:
Use a mix of bright whites and transparent darks.
Add several gradient stops to create that glowy transition.
Tweak the gradient points and size until you get a nice soft spotlight effect.
You can move this gradient layer around and see how it highlights parts of the text in a satisfying way.
Step 4: Make it move (Parallax hover)
To make the light move with your cursor, we’ll use a Parallax Floating component.
Copy the component and paste it into your Framer file.
Place it inside the Light frame (use Cmd+X, select the Light layer, then Cmd+V to paste it inside).
Set the component to absolute positioning so it doesn’t affect layout.
Adjust the settings:
Enabled: Yes
Direction: Away (or Toward, depending on the vibe you want)
Speed: Start with 30, tweak as needed
Smoothing: Try 50–70 for a subtle but fluid motion
Boom. Your light now follows the cursor, creating a slick shine effect on the text.
Step 5 (Optional): Add a 3D Hover Effect
Want to take it even further? Add a 3D Look effect.
Use my 3D Look component.
Copy the component and paste it into your project.
Connect it to the outer frame of your element (e.g. the book cover or card).
Tweak the settings:
Enable perspective then, adjust sensitivity and rotation and finally enable dragging for a draggable 3D effect Now your shiny text not only reacts to the cursor but also moves in 3D space.
Step 2: Set up the mask in Framer
Back in Framer:
Create a frame where your title will sit.
Set a base fill color (this will be the “shine” behind the text).
Apply the SVG as a mask on that frame:
In the right panel, find the Mask setting.
Upload your exported SVG file.
Set the mask to Fit so it covers the text area perfectly.
Now your base color is only visible through the shape of the text, it’s essentially your canvas for the shiny animation.
Step 3: Create the shine layer
This is where the magic starts.
Inside the masked title frame, add a new frame. This will be your light source.
Name it something like “Light”.
Give it a radial gradient fill:
Use a mix of bright whites and transparent darks.
Add several gradient stops to create that glowy transition.
Tweak the gradient points and size until you get a nice soft spotlight effect.
You can move this gradient layer around and see how it highlights parts of the text in a satisfying way.
Step 4: Make it move (Parallax hover)
To make the light move with your cursor, we’ll use a Parallax Floating component.
Copy the component and paste it into your Framer file.
Place it inside the Light frame (use Cmd+X, select the Light layer, then Cmd+V to paste it inside).
Set the component to absolute positioning so it doesn’t affect layout.
Adjust the settings:
Enabled: Yes
Direction: Away (or Toward, depending on the vibe you want)
Speed: Start with 30, tweak as needed
Smoothing: Try 50–70 for a subtle but fluid motion
Boom. Your light now follows the cursor, creating a slick shine effect on the text.
Step 5 (Optional): Add a 3D Hover Effect
Want to take it even further? Add a 3D Look effect.
Use my 3D Look component.
Copy the component and paste it into your project.
Connect it to the outer frame of your element (e.g. the book cover or card).
Tweak the settings:
Enable perspective then, adjust sensitivity and rotation and finally enable dragging for a draggable 3D effect Now your shiny text not only reacts to the cursor but also moves in 3D space.
Adding 3D interaction.
Adding 3D interaction.
Adding 3D interaction.
And that’s a wrap!
With just a few simple steps, an SVG mask, a gradient light, and a touch of interactivity, you can add shiny, eye-catching effects to any element in your Framer project. It’s an easy way to make your designs feel more dynamic and polished without writing a single line of code. Whether you’re working on a hero section, product card, or interactive cover, this technique brings that extra level of detail that makes people stop and say, “Whoa, how’d they do that?”
And that’s a wrap!
With just a few simple steps, an SVG mask, a gradient light, and a touch of interactivity, you can add shiny, eye-catching effects to any element in your Framer project. It’s an easy way to make your designs feel more dynamic and polished without writing a single line of code. Whether you’re working on a hero section, product card, or interactive cover, this technique brings that extra level of detail that makes people stop and say, “Whoa, how’d they do that?”
And that’s a wrap!
With just a few simple steps, an SVG mask, a gradient light, and a touch of interactivity, you can add shiny, eye-catching effects to any element in your Framer project. It’s an easy way to make your designs feel more dynamic and polished without writing a single line of code. Whether you’re working on a hero section, product card, or interactive cover, this technique brings that extra level of detail that makes people stop and say, “Whoa, how’d they do that?”
