Hex Path 5

A sophisticated hexagonal grid shader effect displayed against a dark background. The composition features a central cluster of illuminated hexagons with a warm yellow-to-orange gradient that transitions outward to cyan-green tones at the edges. The hexagonal cells vary in brightness intensity, creating a radial glow pattern emanating from the center. The grid structure is overlaid with dynamic chromatic flow effects that produce color separation along directional axes - warm orange and red tones flowing upward and rightward, while cyan and teal tones appear on the right edge. A subtle ripple effect with soft cyan coloration masks through the hexagon geometry, creating wave-like distortions. The background features a radial gradient transitioning from a dark teal-blue (#0a1f24) at the upper right to near-black (#080808) at the lower left, establishing atmospheric depth. The entire composition is enhanced with a pronounced glow effect that creates halos around the bright hexagonal elements, with intensity set to maximum (21), producing a luminous, almost neon-like quality. A fine film grain texture is subtly applied across the entire image, adding subtle noise and texture. The overall mood is technological and energetic, with a cyberpunk aesthetic. The hexagons themselves have varying stroke thickness controlled by a mouse-position-based circular mask, creating interactive responsiveness to cursor movement with momentum and smoothing applied.

<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  Circle,
  FilmGrain,
  Glow,
  HexGrid,
  RadialGradient,
  Ripples
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmoz4cglxvtm21v60i" :center="{ type: 'mouse-position', originX: 0.5, originY: 0.5, momentum: 0.35, smoothing: 0.2 }" :softness="0.5" :visible="false" />
    <HexGrid id="idmoz40cq9qk5jrget0" color-a="#00000000" :thickness="{ type: 'map', source: 'idmoz4cglxvtm21v60i', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 3, outputMin: 0.4 }" :visible="true" />
    <RadialGradient :center="{ x: 1, y: 0 }" color-a="#0a1f24" color-b="#080808" :radius="1.4" />
    <Ripples :center="{ x: 1, y: 0 }" color-a="#04695f" color-b="#111114" :frequency="6.3" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#3fd9c4" down-color="#ff8a4a" left-color="#ffb347" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.8" right-color="#fa9d7d" up-color="#ff5a3c" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>