Resources

Thermal Image Component in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Thermal Image Component in Framer

View demo

Copy component

Remix project

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

Thermal Image Component in Framer

This is a customizable Thermal Image component for Framer that recreates the look of infrared style visuals, built based on a paper shader. You can adjust the heatmap colors, contrast, sensitivity, and animation speed to achieve different visual moods from subtle gradients to intense thermal patterns. Simply copy it into your project and fine tune the effect with the controls in the right panel.

image of Nandi Muzsik
profile image of Emanuele
image of Prianca S.
Image of Stephen

Created by

Nandi

,

,

,

and

Thermal image UI with glowing heat-map effect
Thermal image UI with glowing heat-map effect
Thermal image UI with glowing heat-map effect

About the resource

To use the Thermal Image component in Framer, start by uploading a black on white or black on transparent image as the base. You can then fine tune the thermal effect with controls for speed, contour intensity, angle, noise, and glow. The scale property lets you resize the effect, while the color palette system gives you complete freedom to build gradients with up to eight colors along with a custom background. This makes it easy to create anything from subtle heatmap visuals to bold, glowing thermal patterns, all directly adjustable from the right panel.

About the resource

To use the Thermal Image component in Framer, start by uploading a black on white or black on transparent image as the base. You can then fine tune the thermal effect with controls for speed, contour intensity, angle, noise, and glow. The scale property lets you resize the effect, while the color palette system gives you complete freedom to build gradients with up to eight colors along with a custom background. This makes it easy to create anything from subtle heatmap visuals to bold, glowing thermal patterns, all directly adjustable from the right panel.

About the resource

To use the Thermal Image component in Framer, start by uploading a black on white or black on transparent image as the base. You can then fine tune the thermal effect with controls for speed, contour intensity, angle, noise, and glow. The scale property lets you resize the effect, while the color palette system gives you complete freedom to build gradients with up to eight colors along with a custom background. This makes it easy to create anything from subtle heatmap visuals to bold, glowing thermal patterns, all directly adjustable from the right panel.

Heatmap UI panel with customizable glow settings

The heatmp component properties in Framer.

Heatmap UI panel with customizable glow settings

The heatmp component properties in Framer.

Heatmap UI panel with customizable glow settings

The heatmp component properties 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.

Join waitlist

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.

Join waitlist

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.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Circular AI image gallery with hover interaction prompt

    Smooth Circle Hover Interaction in Framer

    Component

    Circular AI image gallery with hover interaction prompt

    Smooth Circle Hover Interaction in Framer

    Component

    Circular AI image gallery with hover interaction prompt

    Smooth Circle Hover Interaction in Framer

    Component

  • Split screen slider showing person in red and wooden structure

    Squishing Slider Animation in Framer

    Component

    Split screen slider showing person in red and wooden structure

    Squishing Slider Animation in Framer

    Component

    Split screen slider showing person in red and wooden structure

    Squishing Slider Animation in Framer

    Component