Shaders
header.lightDarkMode D
Gallery

A dynamic swirling shader effect dominated by vibrant magenta and deep purple tones. The composition features organic, flowing swirl patterns that create a sense of fluid motion across the frame. The base layer consists of smooth, curved wave-like formations in bright magenta (#de6dc8) contrasting sharply against dark purple shadows (#2e0533). A grid distortion effect overlays the swirls, creating subtle warping and bending of the underlying patterns with a grid size of 75 pixels and intensity of 5, producing a slightly faceted appearance. The dither effect with bright violet (#b20ff) is applied in overlay blend mode, adding a grainy, textured quality with a threshold of 0.45 and pixel size of 5, which creates a subtle stippled texture across the surface. A fine film grain with 0.05 strength adds additional micro-texture and visual noise. The overall atmosphere is ethereal and dreamlike, with soft focus areas and sharp detail variations. The lighting creates depth through the interplay of bright magenta highlights against deep purple shadows, producing a three-dimensional, undulating surface quality. The edges fade to transparency, creating a soft boundary effect.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  FilmGrain,
  GridDistortion,
  Sharpness,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="34" color-a="#2e0533" color-b="#de6dc8" color-space="oklab" :detail="3.6" :speed="0.6" />
    <Dither blend-mode="overlay" color-b="#b20fff" :pixel-size="5" :threshold="0.45" />
    <GridDistortion edges="mirror" :grid-size="75" :intensity="5" :radius="2" />
    <Sharpness :sharpness="1" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>