Hello Kodular Community!
I am excited to introduce WaveLayout, a dynamic UI styling extension created to generate modern layered wave cards, fluid gradients, and realistic 3D paper-cut drop shadows.
A Little Note About This Extension:
I am not a professional or seasoned extension developer
. This extension was created out of pure necessity, learning curiosity, and passion, with the help of AI collaboration. I hope the community finds it useful, and I appreciate your understanding and feedback!
Key Features
- Dynamic Layer System: Simply pass a list of colors; the extension automatically calculates and creates that exact number of fluid layers.
- Dual Color Support: Supports native Kodular Color Blocks as well as Hex color strings (#RRGGBB).
- Vibrant Multi-Stop Gradients: Colors transition smoothly from rich, sharp tones to soft, ambient blurred fades.
- Adjustable 3D Depth Shadows: Fine-tune the layer shadow spread (shadowRadius) and darkness (shadowOpacity) to achieve a realistic paper-cut effect.
- 10 Unique Organic Styles: Choose from flowing waves, cubic fluid curves, circular ripples, and rose petal shapes.
- Corner Radius & Stroke: Add rounded corners and border strokes to any layout seamlessly.
10 Built-In Styles
- StyleRosePetals — Floral curved petal layers.
- StyleCubicFluid — Smooth organic liquid curves.
- StyleRoundConcentric — Soft concentric circular rings.
- StylePaperCutDrip — 3D dripping paper-cut waves.
- StyleDeepValley — Deep wavy valley curves.
- StyleCornerAurora — Corner-sweeping ambient flow.
- StyleDiagonalFlow — Modern diagonal fluid slices.
- StyleSCurve — Classic S-curve flow.
- StyleDynamicBlob — Liquid blob shapes.
- StyleCrescentSweep — Crescent sweep waves.
Blocks Overview
Main Function:
- ApplyVibrantDesign(component, colors, style, radius, strokeWidth, strokeColor, shadowRadius, shadowOpacity)
- component: Any VerticalArrangement, HorizontalArrangement, or CardView.
- colors: make a list of colors or hex codes.
- style: Choose from the style property blocks (or integer 1–10).
- radius: Corner rounding in pixels (e.g., 20).
- strokeWidth: Outline border thickness (set 0 for none).
- strokeColor: Border color block or hex string.
- shadowRadius: Spread of the 3D layer shadow (e.g., 15–30). Set 0 to disable shadow.
- shadowOpacity: Shadow darkness (0 to 100).
Utility Block:
- ClearDesign(component) — Clears any custom background styling from the view.
Information & Credits
Package: com.supertech.wawelayout.wavelayout
Version: 1.0
Author: Oham Kumar
Price: FREE
Aix
com.supertech.wawelayout.wavelayout.aix (15.8 KB)
A big thank you to the creator of FAST for making extension development accessible and smooth! FAST
