Collapsing Grid 9
A gradient-based shader effect displaying a smooth tonal transition from black at the bottom to white at the top, rendered through a pixelated circular dot pattern. The composition features approximately 16x8 grid of rounded circles with varying opacity levels, creating a halftone-like appearance. The circles transition from solid black on the left and bottom edges, through medium gray tones in the middle sections, to pure white in the upper-right quadrant. The pixelation scale of 18 with 0.03 gap spacing creates distinct circular cells with rounded corners (roundness mapped from 0.13 to 1.0). The overall effect produces a smooth luminosity gradient despite the discrete pixel structure, with a dark background (#121212) providing contrast. The swirl component beneath adds subtle color blending between white and black in oklab color space, creating smooth tonal transitions. The effect has a technical, data-visualization quality with precise geometric spacing and mathematical gradient progression.
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.
