LED Flow 4

A dark, atmospheric shader effect dominated by deep navy and black tones with subtle dimensional distortion. The composition features a swirling twirl effect centered in the lower-right portion of the canvas, creating a vortex-like distortion that warps the space around it with an intensity of 2.6. The background is a near-black solid color (#0c061a) providing a deep, void-like foundation. Overlaid on this is a diagonal linear gradient transitioning from magenta (#ff00b2) to cyan (#85fbff) at a 141-degree angle, creating a neon-like color shift that's visible primarily through the luminance mask applied by the invisible swirl and dot grid group. The gradient uses OKLCH color space for smooth perceptual transitions. Subtle white dots arranged in a grid pattern (60 density, 0.12 dot size) are masked and invisible but influence the gradient's visibility through luminance masking, creating an underlying structure. A fine film grain texture with 0.03 strength adds subtle noise and texture throughout, enhancing the cinematic quality. The overall effect is moody, dark, and ethereal with a sense of dynamic motion from the twirl distortion, while the magenta-to-cyan gradient provides striking color contrast against the predominantly black canvas. The edges wrap around the twirl effect, creating a seamless distortion field.

<script setup lang="ts">
import {
  Shader,
  DotGrid,
  FilmGrain,
  Group,
  LinearGradient,
  SolidColor,
  Swirl,
  Twirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Group id="idmjrnv6c0pom01tg0f" :visible="false">
      <Swirl :blend="100" color-a="#ffffff" color-b="#000000" :detail="1.6" mask-source="idmjrnuq8x4whbsr7v9" />
      <DotGrid id="idmjrnuq8x4whbsr7v9" :density="60" :dot-size="0.12" :visible="false" />
      <Twirl :center="{ x: 0.64, y: 1 }" edges="wrap" :intensity="2.6" :visible="true" />
    </Group>
    <SolidColor color="#0c061a" />
    <LinearGradient :angle="141" color-a="#ff00b2" color-b="#85fbff" color-space="oklch" edges="mirror" :end="{ x: 0.37, y: 0.26 }" mask-source="idmjrnv6c0pom01tg0f" mask-type="luminance" :start="{ x: 0.41, y: 0.4 }" />
    <FilmGrain :strength="0.03" />
  </Shader>
</template>