Shaders
header.lightDarkMode D
Gallery

A three-dimensional isometric composition featuring three interconnected geometric structures set against a warm gradient background transitioning from deep red to orange. The primary structure is a large diamond-shaped lattice grid rendered in golden-yellow lines with a diamond crosshatch pattern, positioned in the upper-right area. Two smaller identical structures flank it on the left and lower-right, creating a symmetrical spatial arrangement. Each structure contains vertical linear elements that create a ribbed or corrugated appearance, suggesting depth and dimensionality. The golden-yellow grid lines (#c8ff24 and #d1811f tones) have a luminous quality with subtle glow effects. The background exhibits a smooth warm color gradient with slight atmospheric depth. The overall composition demonstrates wave distortion effects applied to the grid elements, creating subtle undulations and perspective shifts. The hard-light blend mode of the grid components creates enhanced luminosity where the yellow lines intersect with the warm background. The geometric structures appear to float in three-dimensional space with careful attention to isometric perspective and spatial relationships. Fine detail in the lattice work shows consistent line thickness and regular geometric spacing throughout all three structures.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Grid,
  GridDistortion,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :coarse-x="26" :coarse-y="24" color-a="#d1811f" color-b="#d93030" color-space="oklab" :detail="0.7" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :speed="1.5" />
    <WaveDistortion :angle="125" edges="mirror" :frequency="2.1" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="16" color="#c8ff24" :thickness="1.5" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" :swirl="0.1" />
  </Shader>
</template>