Shaders
header.lightDarkMode D
Gallery

A predominantly dark, almost black background with a deep navy-to-black color (#0c061a) forming the base. The image features subtle geometric patterns created by a dot grid effect visible in the upper portion and edges, with small white dots arranged in a regular pattern at approximately 60% density. A twirl distortion effect is applied with negative intensity (-1.2), creating subtle spiral warping particularly noticeable in the lower-left and upper-right corners where the dot pattern appears to bend and curve inward. A linear gradient overlay using magenta (#ff00f6) to blue (#0000ff) is applied with luminance masking, creating a very subtle color shift that's barely perceptible against the dark background. The gradient runs diagonally from upper-right to lower-left. Fine film grain texture is overlaid at 3% strength, adding a subtle noise pattern across the entire surface. The overall effect is extremely dark and moody with minimal visible detail, creating an almost imperceptible visual experience dominated by deep blacks and navy tones with only faint hints of the underlying geometric and color effects.

Code

vue
<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="2.5" mask-source="idmjrnuq8x4whbsr7v9" />
      <DotGrid id="idmjrnuq8x4whbsr7v9" :density="60" :dot-size="0.12" :visible="false" />
      <Twirl :center="{ x: 0.27, y: 0.12 }" edges="wrap" :intensity="-1.2" :visible="true" />
    </Group>
    <SolidColor color="#0c061a" />
    <LinearGradient color-a="#ff00f6" color-space="oklch" edges="mirror" :end="{ x: 0.27, y: 0.76 }" mask-source="idmjrnv6c0pom01tg0f" mask-type="luminance" :start="{ x: 0.8, y: 0.18 }" />
    <FilmGrain :strength="0.03" />
  </Shader>
</template>