Shaders
header.lightDarkMode D
Gallery

A warm-toned gradient shader effect transitioning from a burnt orange-red base color (#b83e24) to lighter peachy-orange tones (#e8724f) toward the upper portion. The composition features a sophisticated dithering pattern using an 8x8 Bayer matrix with a pixel size of 4, creating a subtle grainy texture across the entire surface. This dithering effect uses a threshold of 0.41, producing a mottled, organic appearance that breaks up the solid color into a stippled pattern of varying opacity. Overlaid on this textured base is a subtle sine wave element positioned at coordinates (0.35, 0.42) with a white color, angled at 312 degrees, creating gentle undulating lines with low amplitude (0.15) and moderate frequency (0.5). The sine wave moves at a speed of 0.4 with soft edges (softness: 1) and a thickness of 0.8, adding a delicate wave-like distortion that flows diagonally across the composition. The overall effect creates a warm, textured, and slightly animated appearance with depth achieved through the layering of solid color, dithering noise, and wave distortion. The atmosphere is warm and organic, with a subtle visual complexity that prevents the gradient from appearing flat or monotonous.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#b83e24" />
    <Dither color-b="#e8724f" pattern="bayer8" :threshold="0.41">
      <SineWave :angle="312" :frequency="0.5" :position="{ x: 0.35, y: 0.42 }" :softness="1" :speed="0.4" :thickness="0.8" />
    </Dither>
  </Shader>
</template>