AuroraStrip

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