Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds in Framer

Component

Component

Component

Component

Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds in Framer

Hover Chroma Backgrounds 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. Feel free to copy the component to your project and customize it using the properties in the right panel.

This is a Framer component that adds an interactive chroma background to your website. It's inspired by the Raycast and Lusion websites. Feel free to copy the component to your project and customize it using the properties in the right panel.

This is a Framer component that adds an interactive chroma background to your website. It's inspired by the Raycast and Lusion websites. Feel free to copy the component to your project and customize it using the properties in the right panel.

This is a Framer component that adds an interactive chroma background to your website. It's inspired by the Raycast and Lusion websites. Feel free to copy the component to your project and customize it using the properties in the right panel.

Hover Chroma Backgrounds in Framer
Hover Chroma Backgrounds in Framer
Hover Chroma Backgrounds in Framer
Hover Chroma Backgrounds in Framer

Copy component

Copy component

Copy component

Copy component

About The Resource

Using the component is really simple. Just paste it into your Framer project and position it as a background layer. It works on both black and white backgrounds.

To position it as a background, I usually set it to absolute positioning and activate pins on all sides, setting them to 0, so it always takes up the full width and height of its parent frame.

framer absolute positioning with layout pins

To make sure it is below the content on your site, you can play with the z-index (which can be added to the element in the right panel under styles) or adjust the ordering in the layers panel.

Component properties

The component has a "Style" property, where you can switch between different types of effects (Liquid, Folds, Smoke, Flow, Pixel, ASCII). Pick the one you like the most!

chroma background styles in Framer
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

Copy the component.

Step 3 outline

Step / 03

Paste in your project, and customize it via properties.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.