Stars and Stripes 2

A dynamic digital shader effect displaying a perspective-distorted grid of ASCII characters (stars ★, dashes ▬, and bars ▤) arranged in a receding plane. The left side features a gradient transition from white/light-gray stars and dashes at the bottom-left corner, progressing through blue striped patterns in the middle section, to solid dark-blue squares at the top-left. The right side displays a uniform field of red/orange stars against a dark background. A subtle diagonal striping pattern (black and white at 159 degrees) underlays the ASCII characters, creating texture and depth. The entire composition is viewed through a perspective transformation with a field of view of 86 degrees, creating a 3D receding effect that makes the grid appear to extend away from the viewer. A tilt-shift blur effect is applied with a focal band running diagonally across the composition, creating selective focus that enhances the depth perception. The color palette transitions from cool blue tones on the left to warm red/orange tones on the right, with a tritone color mapping (blue #1100ff to white to red #ff0000) applied across the luminance values. The overall mood is futuristic and digital, reminiscent of retro computer graphics or data visualization displays.

<script setup lang="ts">
import {
  Shader,
  Ascii,
  Perspective,
  SolidColor,
  Stripes,
  TiltShift,
  Tritone
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#00052e" />
    <Ascii :cell-size="20" characters="★▬★▤" :opacity="0.95">
      <Stripes :angle="159" :density="1" :softness="0.5" :speed="0.1" />
      <Tritone color-a="#1100ff" color-b="#ffffff" color-c="#ff0000" color-space="oklab" />
    </Ascii>
    <Perspective :fov="86" :offset="{ x: 0.39, y: 0.33 }" :pan="-8.1" :tilt="-16.2" :zoom="2.1" />
    <TiltShift :angle="190" :center="{ x: 0.67, y: 0.52 }" :falloff="0.39" :intensity="26" :width="0.34" />
  </Shader>
</template>