Pistons 4
PistonsA dynamic shader effect featuring vertical ASCII characters (▄, ║, █) arranged in a dense grid pattern against a dark brown background (#361f1f). The characters are rendered in varying shades of tan, beige, and light cream colors, creating a textured, monochromatic appearance with subtle depth. Overlaid on this ASCII grid is a godray effect emanating from the bottom center, producing luminous cyan (#6feafe) light rays that radiate upward and outward, creating a sense of volumetric light penetrating through the character grid. The godrays have an orange-tinted background (#e66f1d) that creates warm glowing halos around the light rays. The overall effect combines a retro terminal aesthetic with modern volumetric lighting, enhanced by a subtle paper texture grain that adds tactile roughness and visual noise throughout. The composition creates a sense of depth and movement, with the godrays suggesting light streaming through a dense matrix of data or code. The gamma correction (1.35) brightens the mid-tones, making the ASCII characters pop against the dark background while maintaining atmospheric depth.
Code
<script setup lang="ts">
import {
Shader,
Ascii,
Godrays,
Paper,
SolidColor
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#361f1f" />
<Ascii :cell-size="54" characters="▄║█" font-family="Geist Mono" :gamma="1.35">
<Godrays background-color="#e66f1d" :center="{ x: 0.5, y: 1 }" :density="0.2" :intensity="0.9" ray-color="#6feafe" :spotty="0" />
</Ascii>
<Paper :displacement="0" :grain-scale="3" :roughness="0.85" />
</Shader>
</template>