Halftone Swirl 3

A gradient shader effect transitioning from deep purple on the left to cyan-blue on the right. The base layer is a solid dark purple (#3c0452) that establishes the foundation. Overlaid on top is a halftone pattern with a 45-degree angle that creates a subtle dotted texture throughout the entire composition. The halftone dots are small and evenly distributed, becoming more visible toward the edges while maintaining transparency. Beneath the halftone sits a swirl effect that blends two colors - a bright cyan-blue (#1593ed) and a deep magenta-purple (#4d054d) - creating a smooth, organic color transition. The swirl effect uses oklch color space for smooth interpolation between the two hues. The overall mood is modern and digital, with a cool, atmospheric quality. The blend of the swirl at 50% opacity creates a balanced color gradient that flows diagonally from the warm purple tones on the left to the cool blue tones on the right. The halftone texture adds a subtle graininess that prevents the gradient from appearing too smooth, giving it a slightly textured, technical appearance.

<script setup lang="ts">
import {
  Shader,
  Halftone,
  SolidColor,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#3c0452" />
    <Halftone :smoothness="0.05">
      <Swirl :coarse-x="50" :coarse-y="50" color-a="#1593ed" color-b="#4d054d" color-space="oklch" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" />
    </Halftone>
  </Shader>
</template>