Shaders
header.lightDarkMode D
Gallery

A futuristic digital interface featuring a hexagonal grid pattern with cyan/turquoise glowing edges arranged in a rectangular formation against a dark background. The hexagons have bright cyan (#19ffff) outlines with varying thickness, creating a luminous neon effect. The grid is centered in the composition with approximately 8x8 cells. Behind the grid, there's a radial gradient background transitioning from a dark forest green (#0a2418) at the top to nearly black (#050a07) at the edges, creating depth. Ripple effects with green tones (#1f5e3d) emanate from the top center, creating subtle wave patterns that interact with the hexagonal structure. A chromatic flow effect adds directional color shifts with greens (#3fa86a, #5cc47e, #7fe8a3) and cyan accents flowing through the grid. The entire composition has a strong glow effect with high intensity (21), causing the bright cyan lines to bloom and create halos around the hexagon edges. A subtle film grain texture overlays the entire image, adding a slight noise pattern. The overall mood is technological, cybernetic, and ethereal, with a cool color temperature dominated by cyan and green hues against deep dark backgrounds. The effect suggests a digital network, data visualization, or advanced technological interface.

Code

vue
<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: 0 }" color-a="#0a2418" color-b="#050a07" :radius="0.9" />
    <Ripples :center="{ x: 0.5, y: 0 }" color-a="#1f5e3d" color-b="#0d1a13" :frequency="11" mask-source="idmoz40cq9qk5jrget0" :softness="1.8" :thickness="0" />
    <ChromaFlow base-color="#19ffff" down-color="#1a4d2e" left-color="#3fa86a" mask-source="idmoz40cq9qk5jrget0" :momentum="15" :radius="3.8" right-color="#5cc47e" up-color="#7fe8a3" />
    <Glow :intensity="21" :size="6" :threshold="0.1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>