Hover Chroma Backgrounds in Framer

Copy component

Hover Chroma Backgrounds in Framer

Copy component

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

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

  • Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

  • 3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component