Gallery

Collapsing Grid 2

Collapsing Grid

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.

Code

vue