Collapsing Grid 8
A pixelated gradient shader effect displaying a smooth color transition across a 16x10 grid of rounded square cells with subtle gaps between them. The composition creates a diagonal gradient flowing from deep blue and purple tones in the upper-left corner, transitioning through magenta and pink in the center, and fading to cream and off-white in the lower-right corner. The pixelation effect uses rounded corners with variable roundness mapped to an invisible sine wave and chroma flow layer, creating organic softness despite the grid structure. The dark background (#1b1029) provides strong contrast, making the gradient cells appear to float. The swirl shader underneath generates subtle color interpolation between white (#ffffff) and deep blue (#271ec7) using OKLCH color space, creating smooth hue transitions. The overall effect combines geometric precision with fluid color blending, producing a modern, gradient-based aesthetic with a calm, meditative atmosphere. The spacing and roundness of cells increase subtly from left to right, enhancing the sense of depth and movement.
Usage
The preset as a Vue component. Paste it into a page, or open it in the editor to change it first.
Related Presets
See all- Collapsing Grid
A gradient-based shader effect displaying a smooth color transition across a pixelated grid structure. The image shows a diagonal gradient flowing from bright yellow (#ffe424) in the upper-left and lower-right corners to vibrant magenta (#ff47ff) in the center-right and lower-left areas. The pixelation effect creates rounded square cells with varying sizes, with a gap of 0.03 between them. The roundness of the pixels is dynamically mapped to an alpha channel, creating organic variation in cell corner radius from sharp (0.13) to fully rounded (1.0). A swirl pattern with dual-color interpolation (magenta to yellow-green) is blended at 50% opacity, creating a subtle turbulent distortion across the grid. The overall effect has a smooth, flowing quality despite the discrete pixelated structure, with the color space using oklab for perceptually uniform transitions. The atmosphere is vibrant and energetic, with warm yellows contrasting against cool magentas, creating visual depth and movement across the composition.

- Collapsing Grid 2
A gradient-based shader effect displaying a smooth color transition across a pixelated grid layout. The image shows 16 columns and 10 rows of rounded square tiles with dark navy blue (#160091) as the base background. The primary visual effect is a diagonal gradient flowing from the top-left to bottom-right, transitioning from bright lime green (#0fff5b) in the upper-left quadrant through cyan and teal tones in the middle sections, to deep blue (#0d47ba) in the lower-right quadrant. Each tile has subtle rounded corners with a gap of approximately 3% between them, creating a clean, modular appearance. The gradient appears to be generated by a Swirl component with a blend value of 50, creating smooth color interpolation across the pixelated surface. The overall effect suggests a heat map or data visualization with organic color flow, enhanced by the pixelation effect that maintains crisp tile boundaries while allowing the underlying gradient to create a sense of depth and directional movement. The lighting is even with no apparent shadows or highlights, maintaining a flat, digital aesthetic.

- Collapsing Grid 3
A gradient mesh of rounded square tiles arranged in a 18x10 grid pattern. The tiles transition smoothly from light purple (#e2a8ff) in the upper left to deep magenta/pink (#ce57bd) in the lower right, creating a diagonal color gradient. Each tile has slightly rounded corners with a subtle gap (0.03 units) between them, creating a clean, organized appearance. The roundness of the tiles varies based on an underlying swirl effect, with some tiles appearing more circular while others maintain sharper corners. The swirl effect blends two colors (magenta #ce57bd and blue-purple #b073ff) with a detail level of 1.3, creating subtle color variations within the pixelated structure. The overall effect is smooth and modern, with no harsh edges or distortion, maintaining a calm, gradient-focused aesthetic. The lighting appears even across the entire composition with no visible shadows or highlights, creating a flat, contemporary design feel.

- Collapsing Grid 4
A gradient shader effect displaying a 16x12 grid of rounded square tiles with smooth color transitions. The composition features a diagonal gradient flowing from tan/beige in the upper-left corner to vibrant magenta/purple in the lower-right corner. The tiles have a 0.03 unit gap between them with variable roundness that increases toward the right side of the composition. The underlying swirl effect creates a smooth color interpolation between tan (#d6ac82) and bright magenta (#b90cd5) using oklab color space, producing natural-looking intermediate hues including mauve, dusty rose, and orchid tones. A pale yellow background (#fff6a8) provides subtle contrast. The effect demonstrates a radial color mapping where the roundness of each tile increases based on an invisible alpha channel from a hidden group component, creating a subtle three-dimensional appearance. The overall mood is vibrant and modern with a smooth, organic color transition despite the geometric grid structure.

- Collapsing Grid 5
A gradient mesh composed of rounded square tiles arranged in a 16x10 grid pattern. The tiles transition smoothly from purple (#8145ff) on the left side to cyan and light-blue (#0273ef) on the right side, creating a horizontal color gradient. Each tile has subtle dark borders creating separation and depth. The top-left corner features the most saturated purple tones, while the bottom-right corner displays the most vibrant cyan-blue hues. The overall effect is a smooth, pixelated color transition with rounded corners on each tile element. The base layer appears to be a deep dark-blue (#160091) background. The pixelation creates a modern, digital aesthetic with a soft, glowing quality due to the rounded tile edges and the blend mode interactions between the swirl effect and the pixelate layer.

- Collapsing Grid 6
A gradient mesh composed of rounded square tiles arranged in a 16x10 grid pattern. The shader creates a smooth color transition from deep purple (#160091) in the top-left corner to soft pink (#f285ba) in the bottom-right corner, with intermediate purple and mauve tones throughout. Each tile has subtle rounded corners with a small dark border/gap (0.03 scale) separating them, creating a pixelated mosaic effect with scale factor of 18. The roundness of each tile varies dynamically, controlled by an invisible sine wave and chroma flow effect mapped to the alpha channel, creating organic variation in corner radius across the grid. The color interpolation uses the OKLAB color space for perceptually smooth transitions. The overall effect produces a soft, gradient-based pixelated appearance with a gentle, modern aesthetic. The tiles transition smoothly from highly saturated deep purple on the left to desaturated pale pink on the right, with the gradient flowing diagonally across the composition. The effect has a calm, minimalist mood with smooth color blending and geometric precision.
