I just released a new Framer component: Animated Ribbons.

It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer.

You can control:

• Ribbon colors

• Multi-color gradients

• Position, rotation, and scale

• Stroke width

• On-load animation

• In-view animation

• Scroll-driven drawing

• Animation timing and easing

• Staggering

• Grain texture

• Background color

The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize.

Great for portfolios, creative studios, hero sections, product pages, and experimental websites.

I just released a new Framer component: Animated Ribbons.

It turns handcrafted SVG paths into a flexible animated background that can be customized directly inside Framer.

You can control:

• Ribbon colors

• Multi-color gradients

• Position, rotation, and scale

• Stroke width

• On-load animation

• In-view animation

• Scroll-driven drawing

• Animation timing and easing

• Staggering

• Grain texture

• Background color

The idea was simple: create a visual effect that feels expressive and premium without making the design difficult to customize.

Great for portfolios, creative studios, hero sections, product pages, and experimental websites.