Hover Chroma Backgrounds in Framer

Copy component

Copy component

Hover Chroma Backgrounds in Framer

Copy component

Component

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.

image of Nandi Muzsik

Created by

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

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.

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.

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

Absolute positioning with layout pins.

framer absolute positioning with layout pins

Absolute positioning with layout pins.

framer absolute positioning with layout pins

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!

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!

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

Chroma background styles in Framer.

chroma background styles in Framer

Chroma background styles in Framer.

chroma background styles in Framer

Chroma background styles in Framer.

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 resources

More resources

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Scroll Stopper Component in Framer

    Scroll Stopper Component in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component

    Add to Calendar Button in Framer

    Add to Calendar Button in Framer

    Component