Wave Frame

Elevate your web layouts with Wave Frame, a premium, scroll-driven fluid component for Framer.

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.

Fluid scroll-driven wave frame