Shaders
header.lightDarkMode D
Gallery

A dynamic candlestick chart visualization rendered with ASCII characters (▄, ║, █) on a dark navy blue background (#162b52). The chart displays vertical candlestick patterns arranged in columns, with light cyan/turquoise colored rectangular bodies representing price movements. The candlesticks vary in height and position, creating an organic wave-like pattern that suggests upward and downward market trends. Overlaid on the ASCII chart is a subtle godray effect emanating from the bottom center, featuring purple (#602692) rays that blend with cyan (#04c3d8) tones, creating a mystical volumetric light effect. The rays add depth and atmospheric quality to the composition. A fine paper texture grain is applied across the entire image with a roughness value of 0.85, adding subtle surface irregularity and tactile quality. The overall effect combines financial data visualization with artistic shader effects, creating a moody, tech-forward aesthetic with cool color temperature. The spacing between candlesticks is uniform at 1 unit, with each cell sized at 54 pixels, maintaining readable ASCII clarity while preserving the underlying alpha channel information.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Ascii,
  Godrays,
  Paper,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#162b52" />
    <Ascii :cell-size="54" characters="▄║█" font-family="Geist Mono" :gamma="0.95">
      <Godrays background-color="#04c3d8" :center="{ x: 0, y: 1 }" :density="0.2" :intensity="0.9" ray-color="#602692" :spotty="0" />
    </Ascii>
    <Paper :displacement="0" :grain-scale="3" :roughness="0.85" />
  </Shader>
</template>