New
New
New
Guide
- 2D
- Animations
Guide
- 2D
- Animations
Guide
- 2D
- Animations
How to Add Beautiful 2D Animations to Your Framer Websites
In this Framer blog, I'm showing you how to use a secret weapon: Hana. You'll learn how to create and embed stunning interactive animations that take your Framer projects from good to extraordinary. You’ll be able to add beautiful 2D animations to your site with your eyes closed.
Posted by
Nandi
Table of contents
What is HANA?
HANA is a browser-based design tool for creating interactive 2D effects. You can start from scratch or grab one of the 12+ ready-to-use community interactions, things like animated arrows that follow your cursor, text highlights, or progressive blurs.
Everything you make can be exported as an embed link that drops right into Framer. No code. No setup headaches.
What is HANA?
HANA is a browser-based design tool for creating interactive 2D effects. You can start from scratch or grab one of the 12+ ready-to-use community interactions, things like animated arrows that follow your cursor, text highlights, or progressive blurs.
Everything you make can be exported as an embed link that drops right into Framer. No code. No setup headaches.
What is HANA?
HANA is a browser-based design tool for creating interactive 2D effects. You can start from scratch or grab one of the 12+ ready-to-use community interactions, things like animated arrows that follow your cursor, text highlights, or progressive blurs.
Everything you make can be exported as an embed link that drops right into Framer. No code. No setup headaches.
HANA ready to use interactions.
HANA ready to use interactions.
HANA ready to use interactions.
How the example works
For this demo, we’ll recreate a simple but striking effect:
A block of text that reacts to your cursor by highlighting certain areas in color, with a soft gradient and an outline for depth. The trick?
We create a “window” layer that cuts shapes out of a solid rectangle, revealing a colored layer underneath. Then we animate that colored layer to follow the cursor. It’s like looking through a stencil, except the stencil moves with your mouse.
How the example works
For this demo, we’ll recreate a simple but striking effect:
A block of text that reacts to your cursor by highlighting certain areas in color, with a soft gradient and an outline for depth. The trick?
We create a “window” layer that cuts shapes out of a solid rectangle, revealing a colored layer underneath. Then we animate that colored layer to follow the cursor. It’s like looking through a stencil, except the stencil moves with your mouse.
How the example works
For this demo, we’ll recreate a simple but striking effect:
A block of text that reacts to your cursor by highlighting certain areas in color, with a soft gradient and an outline for depth. The trick?
We create a “window” layer that cuts shapes out of a solid rectangle, revealing a colored layer underneath. Then we animate that colored layer to follow the cursor. It’s like looking through a stencil, except the stencil moves with your mouse.
2D interaction example.
2D interaction example.
2D interaction example.
Building the animation in HANA
Here’s the step-by-step:
Set Up Your Canvas
Create a 500×500 frame.
Add a text layer and fill it with repeated words (e.g., “HANA” multiple times).
Adjust the font, weight, and spacing until it looks balanced.
Create the Windows
Draw a solid rectangle below your text.
Select both layers and use the Subtract boolean operation.
This “cuts” the text shapes out of the rectangle, creating see-through windows.
Add the Color Layer
Place another rectangle beneath the windows and give it your highlight color.
Round the corners for a softer feel.
Add a Gradient Layer
Duplicate the solid color layer and switch it to a radial gradient.
Set one side to 10% opacity and the other to 0% for a smooth fade.
Add an Outline Layer
Duplicate again, remove the fill, and add a stroke in your highlight color.
Animating the layers
This is where the magic happens.
Select the gradient, solid, and outline layers.
Add a Follow Cursor interaction in HANA’s event panel.
Set the damping (smoothness) to around 20 for a natural delay.
Tweak the hover-out speed so it gently returns to center when your cursor leaves.
Preview it, now the highlight smoothly follows your mouse across the text.
Embedding in Framer
Once you’re happy with the animation:
Select the final frame in HANA.
Choose Embed Link from the export options.
In Framer, insert an Embed component into your layout.
Paste the HANA link, set it to fill the space, and pin it as needed.
In seconds, your Framer site has an interactive, cursor-responsive animation baked in.
Building the animation in HANA
Here’s the step-by-step:
Set Up Your Canvas
Create a 500×500 frame.
Add a text layer and fill it with repeated words (e.g., “HANA” multiple times).
Adjust the font, weight, and spacing until it looks balanced.
Create the Windows
Draw a solid rectangle below your text.
Select both layers and use the Subtract boolean operation.
This “cuts” the text shapes out of the rectangle, creating see-through windows.
Add the Color Layer
Place another rectangle beneath the windows and give it your highlight color.
Round the corners for a softer feel.
Add a Gradient Layer
Duplicate the solid color layer and switch it to a radial gradient.
Set one side to 10% opacity and the other to 0% for a smooth fade.
Add an Outline Layer
Duplicate again, remove the fill, and add a stroke in your highlight color.
Animating the layers
This is where the magic happens.
Select the gradient, solid, and outline layers.
Add a Follow Cursor interaction in HANA’s event panel.
Set the damping (smoothness) to around 20 for a natural delay.
Tweak the hover-out speed so it gently returns to center when your cursor leaves.
Preview it, now the highlight smoothly follows your mouse across the text.
Embedding in Framer
Once you’re happy with the animation:
Select the final frame in HANA.
Choose Embed Link from the export options.
In Framer, insert an Embed component into your layout.
Paste the HANA link, set it to fill the space, and pin it as needed.
In seconds, your Framer site has an interactive, cursor-responsive animation baked in.
Building the animation in HANA
Here’s the step-by-step:
Set Up Your Canvas
Create a 500×500 frame.
Add a text layer and fill it with repeated words (e.g., “HANA” multiple times).
Adjust the font, weight, and spacing until it looks balanced.
Create the Windows
Draw a solid rectangle below your text.
Select both layers and use the Subtract boolean operation.
This “cuts” the text shapes out of the rectangle, creating see-through windows.
Add the Color Layer
Place another rectangle beneath the windows and give it your highlight color.
Round the corners for a softer feel.
Add a Gradient Layer
Duplicate the solid color layer and switch it to a radial gradient.
Set one side to 10% opacity and the other to 0% for a smooth fade.
Add an Outline Layer
Duplicate again, remove the fill, and add a stroke in your highlight color.
Animating the layers
This is where the magic happens.
Select the gradient, solid, and outline layers.
Add a Follow Cursor interaction in HANA’s event panel.
Set the damping (smoothness) to around 20 for a natural delay.
Tweak the hover-out speed so it gently returns to center when your cursor leaves.
Preview it, now the highlight smoothly follows your mouse across the text.
Embedding in Framer
Once you’re happy with the animation:
Select the final frame in HANA.
Choose Embed Link from the export options.
In Framer, insert an Embed component into your layout.
Paste the HANA link, set it to fill the space, and pin it as needed.
In seconds, your Framer site has an interactive, cursor-responsive animation baked in.
Embedding interaction into Framer.
Embedding interaction into Framer.
Embedding interaction into Framer.
Why this is so powerful
With HANA, you can:
Add custom animations without coding.
Blend 2D motion into your designs without heavy file sizes.
Stand out with playful, interactive touches your visitors will remember.
And because it’s all embed-based, you can swap out or update the animation without touching your Framer project again.
Bottom line: HANA is an easy win if you want to add personality and motion to your Framer site. Whether it’s cursor trails, animated highlights, or subtle gradients, you can make your site feel premium without spending hours animating.
If you haven’t tried it yet, check out the HANA community library, remix a few interactions, and drop them into your next Framer build. Your visitors (and your portfolio) will thank you.
Why this is so powerful
With HANA, you can:
Add custom animations without coding.
Blend 2D motion into your designs without heavy file sizes.
Stand out with playful, interactive touches your visitors will remember.
And because it’s all embed-based, you can swap out or update the animation without touching your Framer project again.
Bottom line: HANA is an easy win if you want to add personality and motion to your Framer site. Whether it’s cursor trails, animated highlights, or subtle gradients, you can make your site feel premium without spending hours animating.
If you haven’t tried it yet, check out the HANA community library, remix a few interactions, and drop them into your next Framer build. Your visitors (and your portfolio) will thank you.
Why this is so powerful
With HANA, you can:
Add custom animations without coding.
Blend 2D motion into your designs without heavy file sizes.
Stand out with playful, interactive touches your visitors will remember.
And because it’s all embed-based, you can swap out or update the animation without touching your Framer project again.
Bottom line: HANA is an easy win if you want to add personality and motion to your Framer site. Whether it’s cursor trails, animated highlights, or subtle gradients, you can make your site feel premium without spending hours animating.
If you haven’t tried it yet, check out the HANA community library, remix a few interactions, and drop them into your next Framer build. Your visitors (and your portfolio) will thank you.
