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
Drop it on your canvas and pin it to the edge of a section.
Swap the palette colors to match your brand.
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
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
Drop it on your canvas and pin it to the edge of a section.
Swap the palette colors to match your brand.
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
