Hex Path 2

A dark, futuristic shader effect featuring a hexagonal grid pattern as the primary structural element. The hexagons are arranged in a honeycomb formation across the canvas, with varying line thicknesses that create a sense of depth and dimensionality. The grid lines glow with neon colors - predominantly bright green (#1fff4c) and vibrant purple/magenta (#dd00ff, #570569) - creating a striking contrast against the nearly black background. The hexagons appear to follow a vertical axis with enhanced brightness in the center, suggesting a focal point of interaction. A radial gradient background transitions from deep purple-black (#1f1221) at the edges to pure black (#080808) toward the center, establishing atmospheric depth. Ripple effects with purple coloration (#570569) appear to emanate from or interact with the hex grid, creating wave-like distortions. A ChromaFlow effect adds directional color bleeding with magenta, purple, and green hues that follow the grid structure. The entire composition is enhanced with a strong glow effect (intensity: 21) that creates halos around the bright neon lines, making them appear to emit light. Fine film grain adds subtle texture and visual noise. The overall mood is cyberpunk and technological, with a sense of dynamic energy and interactivity, as if responding to mouse movement with momentum-based smoothing.

<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: 0.5, y: 1 }" color-a="#1f1221" color-b="#080808" :radius="1.4" />
    <Ripples color-a="#570569" color-b="#111114" :frequency="11.7" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#1fff4c" down-color="#9a26ff" left-color="#c20aff" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.5" right-color="#c87dfa" up-color="#dd00ff" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>