---
title: "AuroraStrip — Free Framer component · Best of Framer"
description: "Free Framer component · by Grids & Giggles · Backgrounds. AuroraStrip is an ambient light band for the top or bottom edge of a page."
canonical: "https://framer.elliotli.dev/component/aurorastrip"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/AuroraStrip

# AuroraStrip

Scroll-Reactive Aurora Glow Strip

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

![AuroraStrip preview image 1](https://framer.elliotli.dev/og/component/aurorastrip/a669b09d9a5c8f02/1600x900.jpg)

## Summary

AuroraStrip is an ambient light band for the top or bottom edge of a page.

## Description

AuroraStrip is an ambient light band for the top or bottom edge of a page. Colored blobs drift behind a blur while the whole layer brightens in response to scroll speed. Built for hero edges, footers and section dividers.

**About Component**

-   Scroll velocity drives opacity live, smoothed by a spring so it ramps and decays instead of flickering
    
-   Rest Opacity acts as a floor, the glow never disappears when the page sits still
    
-   One drifting blob per palette color, up to 8 colors
    
-   Later blobs are larger and slower, which builds depth instead of a flat smear
    
-   Drift distance is set in pixels, so motion reads the same on a small card or a full-width hero
    
-   Built-in gradient mask fades the strip out toward its top edge
    
-   Five blend modes, Normal for light backgrounds and Screen for dark ones
    
-   Pointer events off, it never blocks buttons underneath
    
-   Freezes to a clean still frame on canvas and in static exports
    

**What's Included**

-   One code component, nothing to install
    
-   9 property controls for color, blur, speed, travel, height and scroll sensitivity
    
-   Light and dark theme handling through blend mode
    
-   Zero config, the defaults ship as a finished look
    

**How It Works**

1.  Drop it on your canvas and pin it to the edge of a section.
    
2.  Swap the palette colors to match your brand.
    
3.  Tune Sensitivity and Max Opacity to set how loudly it reacts to scroll.
    

**Use Cases**

-   Hero section top edge on SaaS landing pages
    
-   Footer glow above a dark contact section
    
-   Divider between two content sections
    
-   AI and developer tool sites needing an ambient feel
    
-   Pricing page headers
    
-   Portfolio case study covers
    

**Keywords**

framer, aurora, gradient background, scroll animation, scroll velocity, glow strip, ambient background, animated background, blur gradient, mesh gradient, hero background, footer glow, section divider, code component, light effect

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

-   All · #4455

## Details

- **Author**: Grids & Giggles
- **Published**: 2026-07-28
- **Updated**: 2026-07-28
- **Added**: 2026-07-28
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background