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.
Aathif Thajudeen
