Polynesian Waves

Open in editor

A mesmerizing blue abstract shader effect featuring concentric geometric patterns with a strong three-dimensional depth illusion. The composition displays nested squares and diamond shapes that appear to recede into the background, creating a tunnel-like perspective. The primary color palette consists of bright electric blue (#0873ff) transitioning to deeper pure blue (#0000ff), with accent highlights in cyan (#1faede). Wave distortion effects create organic, flowing undulations across the geometric grid, softening the sharp edges of the squares and producing a rippling, liquid-like quality. The distortion has a sine wave pattern at 163 degrees with moderate strength (0.09), giving the rigid geometry a fluid, breathing appearance. A subtle dither effect with linear dodge blending adds fine-grained texture and luminosity, creating micro-variations in brightness that enhance the three-dimensional quality. The overall effect combines mathematical precision with organic fluidity, producing a hypnotic, tech-forward aesthetic with strong visual depth and movement. The lighting appears to come from multiple angles, creating subtle shadow gradients within the nested shapes that enhance the embossed, layered appearance.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Dither,
  LinearGradient,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#0873ff" color-space="oklch" edges="wrap" :end="{ x: 0.5, y: 0.5 }" :start="{ x: 0.59, y: 0.52 }" :transform="{ edges: 'mirror', rotation: 131, scale: 0.25 }" />
    <WaveDistortion :angle="163" edges="mirror" :frequency="1.6" :strength="0.09" />
    <Dither blend-mode="linearDodge" color-b="#1faede" :pixel-size="1" />
  </Shader>
</template>