About Flow Ribbons
✦ Give your page a pulse.
Flow Ribbons is a GPU-powered background of layered, silky ribbons made of hundreds of fine lines. They drift, swell and catch the light, and the glow follows your cursor. Drop it behind a hero, a pricing section or a footer, and a flat page starts to feel alive.
⚙ What you can customize
Background ✦ Two ribbon colors ✦ Number of ribbons ✦ Strands per ribbon ✦ Wave amplitude ✦ Ribbon thickness ✦ Wave frequency ✦ Line sharpness ✦ Glow ✦ Angle ✦ Animation speed ✦ Hover lift ✦ Pause when offscreen
🎯 Perfect for
Hero sections ✦ SaaS and AI landing pages ✦ Product launches ✦ Portfolios ✦ Event pages ✦ Section dividers ✦ Footers
🖱 Interaction
Move your cursor across the canvas and the ribbons lift and bend toward it, with a smooth, eased response.
⚡ Built to stay light
Runs on WebGL2 and pauses when it scrolls out of view. It follows the reduced-motion preference and shows a clean still frame on the Framer canvas, so your editor stays fast.
📐 Fits any layout
It fills whatever frame you place it in, at any size or ratio. Stack your content on top and you're done.
Quick start: drop the component in, set your two colors, and tune the ribbons to taste.
