Hex Path 9

A dark, sophisticated shader effect featuring a hexagonal grid pattern rendered in deep magenta/crimson lines (#8a0633) against an almost pure black background (#050204, #1a0612). The hexagons are arranged in a regular tessellation pattern with approximately 8 cells across, creating a honeycomb-like structure. The grid lines have varying thickness, appearing to respond to an invisible circular mask centered on the screen with momentum-based mouse tracking. A radial gradient emanates from the bottom-center, transitioning from deep burgundy tones to near-black, creating subtle depth. Ripple effects with high frequency (11.9) and soft edges (1.8 softness) propagate through the hexagonal structure, creating subtle wave distortions masked to the grid itself. A ChromaFlow effect adds directional color bleeding with magenta (#ff1a4d) highlights and deep red (#d12a6b, #a8004a) accents that respond to movement momentum (15). The entire composition is wrapped in a glow effect (intensity 21, size 6) that creates a subtle luminous halo around the brighter grid lines. Fine film grain (0.05 strength) adds subtle texture and analog warmth. The overall aesthetic is cyberpunk/tech-noir with a pulsing, interactive quality driven by mouse position tracking.

<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="#1a0612" color-b="#050204" :radius="1.4" />
    <Ripples color-a="#8a0633" color-b="#0a0508" :frequency="11.9" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#3d0518" down-color="#6b0033" left-color="#a8004a" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.8" right-color="#d12a6b" up-color="#ff1a4d" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>