Shaders
header.lightDarkMode D
Gallery

Impression Trail 5

Impression Trail

A dithered pointillist effect rendered across a cream-colored background (#eef1db). The image displays a sophisticated blue noise dithering pattern with perlin noise texture overlays creating a grainy, stippled appearance. Blue dots (#5670f4) of varying density are scattered across the composition, forming loose clusters and patterns that suggest underlying geographic or topographic data. The dithering creates a halftone-like quality with pixel size of 3, producing a granular, almost newspaper-print aesthetic. A subtle paper texture overlay adds tactile roughness with displacement of 0.2 and grain scale of 0.1, enhancing the organic, hand-crafted feel. The blue noise pattern is dynamically mapped to an alpha channel with threshold values ranging from 0.1 to 0.79, creating areas of varying density and visual interest. The overall composition has a muted, academic quality with soft transitions between dense and sparse dot clusters, suggesting a data visualization or abstract geographic representation. The blend mode is set to normal with full opacity, allowing the underlying texture to remain visible while the dithering effect dominates the visual presentation.

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="#eef1db" color-b="#5670f4" 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>