How To Add Interactive Hover Background in Framer

How To Add Interactive Hover Background in Framer

  • Guide

  • Effects
  • Components
  • Guide

  • Effects
  • Components
  • Guide

  • Effects
  • Components

How To Add Interactive Hover Background in Framer

This is a Framer component that adds an interactive chroma background to your website. It's inspired by the Raycast and Lusion websites. Let me show you how to add this hover chroma background component in Framer and customize it using the properties in the right panel.

image of Nandi Muzsik

Posted by

Nandi

Interactive hover backgrounds: Liquid, Smoke, Pixel, and more
Interactive hover backgrounds: Liquid, Smoke, Pixel, and more
Interactive hover backgrounds: Liquid, Smoke, Pixel, and more

Table of contents

Copy the component

First things first, grab the hover chroma backgrounds component and drop it into your project.

You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.

Copy the component

First things first, grab the hover chroma backgrounds component and drop it into your project.

You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.

Copy the component

First things first, grab the hover chroma backgrounds component and drop it into your project.

You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.

Position it as a background

To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.

Here’s how:

  • Select the component.

  • Set its position to absolute in the right panel.

  • Activate all the layout pins (top, bottom, left, right) and set them to 0.

This makes the chroma background stretch across the full width and height of its parent frame.

Works like a charm on both dark and light backgrounds! :)

Position it as a background

To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.

Here’s how:

  • Select the component.

  • Set its position to absolute in the right panel.

  • Activate all the layout pins (top, bottom, left, right) and set them to 0.

This makes the chroma background stretch across the full width and height of its parent frame.

Works like a charm on both dark and light backgrounds! :)

Position it as a background

To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.

Here’s how:

  • Select the component.

  • Set its position to absolute in the right panel.

  • Activate all the layout pins (top, bottom, left, right) and set them to 0.

This makes the chroma background stretch across the full width and height of its parent frame.

Works like a charm on both dark and light backgrounds! :)

Precise positioning controls for top, left, right, and bottom

Absolute positioning with layout pins.

Precise positioning controls for top, left, right, and bottom

Absolute positioning with layout pins.

Precise positioning controls for top, left, right, and bottom

Absolute positioning with layout pins.

Layer it right

Okay, now let’s make sure it sits behind all your content:

  • Open the layers panel and adjust the layer ordering.

  • Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).

Super quick, and your content stays front and center while the background does its thing.

Layer it right

Okay, now let’s make sure it sits behind all your content:

  • Open the layers panel and adjust the layer ordering.

  • Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).

Super quick, and your content stays front and center while the background does its thing.

Layer it right

Okay, now let’s make sure it sits behind all your content:

  • Open the layers panel and adjust the layer ordering.

  • Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).

Super quick, and your content stays front and center while the background does its thing.

Pick your vibe

Here’s where it gets fun! The chroma component comes with six different styles:

  • Liquid

  • Folds

  • Smoke

  • Flow

  • Pixel

  • Ascii

Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!

Pick your vibe

Here’s where it gets fun! The chroma component comes with six different styles:

  • Liquid

  • Folds

  • Smoke

  • Flow

  • Pixel

  • Ascii

Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!

Pick your vibe

Here’s where it gets fun! The chroma component comes with six different styles:

  • Liquid

  • Folds

  • Smoke

  • Flow

  • Pixel

  • Ascii

Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!

Chroma Background style options

Chroma background styles in Framer.

Chroma Background style options

Chroma background styles in Framer.

Chroma Background style options

Chroma background styles in Framer.

Preview and tweak

Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.

Let’s see what you’ve got!

Preview and tweak

Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.

Let’s see what you’ve got!

Preview and tweak

Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.

Let’s see what you’ve got!

Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.

Can’t wait to see your work! <3

Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.

Can’t wait to see your work! <3

Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.

Can’t wait to see your work! <3

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

    Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

    Pro Site layout highlighting advanced design and interactive features for professionals

    10 Things to Do Before Publishing a Framer Website

    Tips & tricks

  • Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

    Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

    Comment section interface with input field and publish button

    How to Add Comments Section to a Framer Website

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback