Wave Frame

Elevate your web layouts with Wave Frame, a premium, scroll-driven fluid component for Framer. Designed to break away from rigid grid sections, this element maps highly fluid mathematical curves that react organically to user scroll progress. Engineered with off-screen anchor expansion and hardware acceleration, it delivers a flawless, ultra-smooth editorial motion profile with absolutely zero distortion or awkward lines across all breakpoints.

Key Properties & Customization Options

Customize the motion behavior directly from Framer’s right-hand property panel with no coding required:

• Wave Color: Fully compatible with solid hex values, global design system color styles, and theme variables.

• Top Depth (px): Controls the steepness and curvature amplitude of the top boundary wave.

• Top Speed: Adjusts how rapidly or subtly the top wave shifts and rolls relative to page scrolling.

• Top Invert (Toggle): Instantly flips the horizontal scrolling direction of the top wave curve.

• Bottom Depth (px): Independently adjusts the boundary amplitude and thickness of the lower wave area.

• Bottom Speed: Sets an independent scroll rate for the bottom shape to create custom parallax depth.

• Bottom Invert (Toggle): Flips the wave cycle direction on the bottom boundary.

Performance & Setup Benefits

• 100% Fluid Scaling: Automatically expands to fill any designated parent layout stack box layout seamlessly.

• Smart Canvas Fallback: Automatically freezes at a balanced mid-scroll state on your design artboard so you can design content blocks with zero visual guessing.

• GPU Accelerated: Employs absolute transform layers to erase vector edge aliasing and sub-pixel stuttering.