Grainient is a sophisticated background component designed to provide rich, visual depth without sacrificing performance. Powered by raw WebGL2, it offers a level of organic motion and texture that traditional CSS gradients simply can't match.
Whether you're looking for a subtle, slow-moving atmospheric glow or a highly energetic, distorted liquid flow, Grainient provides the controls to achieve it.
Features:
WebGL2 Performance: High-performance rendering with a low memory footprint.
Liquid Warping: Advanced displacement logic creates natural, fluid-like motion.
Artistic Grain: Integrated film grain overlay with adjustable scale and animation.
Breakpoint System: Automatically adapts parameters like Zoom, Warp, and Grain for Mobile, Tablet, and Desktop.
Standard Blend Modes: Choose between Normal, Multiply, Screen, and Overlay for internal layer mixing.
Comprehensive Post-Processing: Fine-tune the final output with Contrast, Gamma, and Saturation settings.
Portrait Optimized: Specialized zoom multiplier for mobile portrait orientation.
Customisation Options:
Color Palette:
Color 1, 2, & 3: Define the core three-point gradient system.
Dynamics:
Time Speed: Global animation tempo.
Color Balance: Bias the mix toward specific color layers.
Rotation: Organic underlying rotation of the noise field.
Warping:
Strength & Amplitude: Control the intensity and distance of the liquid "push".
Frequency & Speed: Tune the waviness and evolution rate.
Refinement:
Blend Angle: Rotate the gradient vector.
Softness: Control how blurred or sharp the color transitions are.
Finish:
Grain: Adjust density, size (scale), and toggle animation.
Post-Effects: Precise Contrast, Gamma, and Saturation sliders.
Set up
1. Drag the Grainient component into your Framer frame.
2. Set it to Fill the container for a full-background effect.
3. Use the Colors panel to match your brand.
4. If Responsive is on, check the Mobile and Tablet breakpoints to ensure the Zoom and Warp levels look great on smaller screens.
5. Adjust Time Speed for the desired mood - lower for calm, higher for energetic scenes.
MotionIQ Studio
