Stars and Stripes

A dynamic digital display featuring a pixelated ASCII art pattern rendered in perspective view. The composition shows a grid of characters (stars ★ and bars ▬▤) arranged in horizontal rows that recede into depth, creating a 3D tunnel effect. The left portion displays blue stars on a dark navy background, transitioning to red horizontal bars on the right side. A subtle striped pattern with black and white diagonal lines at 159 degrees overlays the ASCII characters, adding texture and movement. The tritone color mapping creates a gradient transition from deep blue (#1100ff) through white to bright red (#ff0000), with the white serving as the midpoint. A perspective transformation with 86-degree field of view tilts the plane at approximately 29.5 degrees, making the top-right area appear closer and more prominent. A tilt-shift depth-of-field effect is applied at a 115-degree angle, creating selective focus that keeps the center-right area sharp while gradually blurring the edges and corners. The overall atmosphere is futuristic and technological, with a sense of data visualization or digital matrix. The dark navy background (#00052e) provides strong contrast, making the colored elements pop. The effect suggests motion and dimensionality, as if viewing a digital landscape receding into space.

<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="32" characters="★▬★▤" :opacity="0.95">
      <Stripes :angle="159" :density="1" :softness="0.5" />
      <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="20.4" :tilt="29.5" :zoom="1.75" />
    <TiltShift :angle="115" :center="{ x: 0.67, y: 0.52 }" :falloff="0.39" :width="0.34" />
  </Shader>
</template>