---
title: "Hero BG Animation — Framer component · Best of Framer"
description: "$15.00 · Framer component · by NOMAN · Sections. Live Preview Hero BG Animation is an interactive hero background component designed to turn static images into an immersive visual experience."
canonical: "https://framer.elliotli.dev/component/hero-bg-animation"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Hero BG Animation

# Hero BG Animation

Cinematic Hero Image Transitions

[View on Framer](https://framer.com/marketplace/components/hero-bg-animation/?via=elliot-li)

![Hero BG Animation preview image 1](https://framer.elliotli.dev/og/component/hero-bg-animation/d31a5b486765335c/1600x1200.jpg)

## Summary

Live Preview Hero BG Animation is an interactive hero background component designed to turn static images into an immersive visual experience.

## Description

[**Live Preview**](https://herobg.framer.website/)

**Hero BG Animation** is an interactive hero background component designed to turn static images into an immersive visual experience. Add multiple images and transition between them using cinematic effects such as **Silk Wipe, Iris Zoom, Liquid Drift, Editorial Bands, and Chromatic Slide**.

## Key Features

-   Cinematic image transitions
    
-   5 built-in transition styles
    
-   Multiple image support
    
-   Smooth image scaling and motion
    
-   Adjustable transition duration
    
-   Adjustable animation speed
    
-   Transition intensity control
    
-   RGB split effect
    
-   Gloss sweep effect
    
-   Auto-play functionality
    
-   Custom auto-play delay
    
-   Resume-after interaction timing
    
-   Customizable image thumbnails
    
-   Interactive cursor lens
    
-   Multiple cursor lens modes
    

### Images

-   Add and manage multiple hero images.
    
-   Each image can be individually replaced or removed.
    

### Transition

Choose from:

-   **Silk Wipe**
    
-   **Iris Zoom**
    
-   **Liquid Drift**
    
-   **Editorial Bands**
    
-   **Chromatic Slide**
    

### Animation

-   **Duration** — Control transition length.
    
-   **Speed** — Adjust overall animation speed.
    
-   **Intensity** — Control the strength of the transition effects.
    
-   **Image Scale** — Adjust image zoom during transitions.
    
-   **RGB Split** — Control chromatic displacement.
    
-   **Gloss Sweep** — Adjust the glossy light sweep effect.
    

### Thumbnails

Customize the thumbnail navigation with:

-   **Size**
    
-   **Ratio**
    
-   **Gap**
    
-   **Radius**
    
-   **Padding**
    
-   **Position**
    
-   **Inset**
    
-   **Active State**
    
-   **Accent Color**
    
-   **Numbers**
    
-   **Frosted Rail**
    
-   **Rail Padding**
    

### Cursor Lens

Add an interactive lens effect with:

-   **Mode** — Blur, Frosted Glass, Clarity, or Chromatic
    
-   **Radius**
    
-   **Strength**
    
-   **Edge Softness**
    
-   **Glass Rim**
    

## How It Works

1.  Add your hero images to the **Images** property.
    
2.  Select your preferred **Transition** style.
    
3.  Adjust **Duration, Speed, and Intensity** to match your design.
    
4.  Customize the image scale and optional RGB/Gloss effects.
    
5.  Configure your **Thumbnails** and choose their position and appearance.
    
6.  Enable **Auto Play** if you want the images to transition automatically.
    
7.  Add **Cursor Lens, Overlay, Background, and Caption** effects as needed.
    
8.  Configure the mobile layout and publish.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6851

## Details

- **Author**: NOMAN
- **Price**: $15.00
- **Published**: 2026-08-13
- **Updated**: 2026-08-13
- **Added**: 2026-08-13
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes