Hex Path 8

A futuristic hexagonal grid pattern displayed on a dark background with an intricate layering of glowing effects. The hexagons are arranged in a honeycomb structure with varying line thicknesses that respond to mouse position through a circular mask. The grid features bright white and cyan-blue glowing edges that create a luminous outline effect. A radial gradient background transitions from dark charcoal (#121314) to nearly black (#0a0808), establishing depth. Ripple effects with soft gray-blue tones (#656e78) emanate from the right side, creating subtle wave distortions across the hex grid. A chromatic flow effect adds directional color gradients with cyan, blue, and purple hues that follow the grid structure. The entire composition is enhanced with an intense glow effect (intensity: 21) that creates bright halos around the illuminated hexagon edges, producing a neon-like appearance. Fine film grain texture (0.05 strength) adds subtle noise for visual texture. The overall mood is technological and ethereal, with the glowing elements suggesting energy flow or data visualization. The effect responds dynamically to mouse movement with momentum and smoothing parameters, creating an interactive, responsive visual experience.

<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, y: 0.5 }" color-a="#121314" color-b="#0a0808" :radius="1.4" />
    <Ripples :center="{ x: 1, y: 0.5 }" color-a="#656e78" color-b="#1a1f24" :frequency="10.3" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#248aff" down-color="#b09edb" :intensity="1.5" left-color="#d9d3ab" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.8" right-color="#e39ab7" up-color="#9de0cc" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>