Halftone Swirl

A gradient shader effect transitioning from deep purple on the left to bright cyan-blue on the right. The base layer is a solid dark purple color (#200452) that provides the foundation. Overlaid on top is a halftone pattern with a 45-degree angle creating a regular dot matrix texture across the entire surface. The halftone dots are small and evenly distributed at 100 frequency with minimal smoothness (0.1), giving a crisp, technical appearance. Within the halftone structure, a swirl effect blends two colors - a vibrant electric blue (#1580ed) and a deep purple (#3d0b59) - creating a subtle color shift and movement across the composition. The swirl effect has balanced parameters (50 on all axes) creating a uniform, non-directional distortion. The overall mood is modern and digital with a tech-forward aesthetic. The halftone dots become progressively more visible and lighter as they transition toward the right side of the image, following the color gradient. The effect creates depth through the layering of the solid color base, the geometric halftone pattern, and the color-blending swirl effect, resulting in a sophisticated, multi-dimensional appearance suitable for contemporary digital design.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#200452" />
    <Halftone :smoothness="0.1">
      <Swirl :coarse-x="50" :coarse-y="50" color-a="#1580ed" color-b="#3d0b59" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" />
    </Halftone>
  </Shader>
</template>