Shaders
header.lightDarkMode D
Gallery

A dithered image with a cream-yellow background (#f2eab3) overlaid with magenta-purple (#d324d4) stippled patterns creating a halftone effect. The composition shows a building or architectural structure in the center-right area, rendered in purple tones against the pale yellow backdrop. The dithering pattern uses blue noise with 3-pixel sizing, creating a grainy, textured appearance throughout. The image has a noisy, paper-like texture applied with subtle grain displacement (0.2 intensity) and roughness (0.21), giving it a vintage or printed quality. The purple elements form concentrated clusters in the upper portion and around the central structure, with scattered dots diminishing toward the edges. The overall effect is reminiscent of old newspaper printing or thermal imaging, with the threshold mapping creating variable density in the dithered areas. A subtle simplex noise layer adds additional texture variation with very low opacity white noise overlay.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  Dither,
  ImageTexture,
  Paper,
  SimplexNoise
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ChromaFlow id="idmostv5d9xi2rmvn45" base-color="#ffffff" down-color="#ffffff" :intensity="1.4" left-color="#ffffff" :momentum="10" :radius="4" right-color="#ffffff" up-color="#ffffff" :visible="false" />
    <Dither color-a="#f2eab3" color-b="#d324d4" pattern="blueNoise" :pixel-size="3" :threshold="{ type: 'map', source: 'idmostv5d9xi2rmvn45', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.79, outputMin: 0.1 }">
      <ImageTexture url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/gZx9yjLKI7VJ.jpeg" />
      <SimplexNoise :balance="-0.5" color-a="#ffffff17" color-b="#00000000" />
    </Dither>
    <Paper :displacement="0.2" :grain-scale="0.1" :roughness="0.21" />
  </Shader>
</template>