Shaders
header.lightDarkMode D
Gallery

A striking digital visualization featuring a dark, deep space-like environment with a dominant dark navy-black background (#0c151c). The composition is built around a 3D torus structure that creates a tunnel or vortex effect, with radiating lines of ASCII characters (┉╳┉╳) extending outward in multiple directions from the center. The lines are composed of falling vertical strokes rendered in a gradient that transitions from bright blue (#6d82f5) to vibrant purple (#8137d3), creating a luminous, neon-like quality. The ASCII characters form diagonal bands that converge toward a central vanishing point, creating a strong sense of depth and perspective. The lines have a pixelated, retro-digital aesthetic with slight transparency and glow effects. The overall mood is cyberpunk and futuristic, with the purple-blue color palette evoking a sense of digital energy and movement. The falling lines effect adds animation-like motion trails, while the 3D torus provides structural geometry beneath the ASCII layer. The composition uses radial symmetry with lines radiating outward from the center both horizontally and vertically, creating a kaleidoscopic, tunnel-like effect. The lighting is minimal with no traditional illumination, relying instead on the self-emissive quality of the colored lines against the dark background.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Ascii,
  FallingLines,
  Form3D,
  RadialGradient,
  StudioBackground
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
    color-space="srgb"
  >
    <RadialGradient :center="{ x: 0.5, y: 1 }" color-a="#180726" color-b="#0f0f17" :radius="0.8" :visible="false" />
    <StudioBackground :ambient-intensity="98" :ambient-speed="5" :brightness="100" :center="{ x: 0.5, y: 1 }" color="#0c151c" :fill-intensity="0" :key-intensity="5" :light-target="0" />
    <Ascii :alpha-threshold="0.14" :cell-size="12" characters="┉╳┉╳" :gamma="0.25" :preserve-alpha="false">
      <Form3D :glossiness="0" :lighting="0" :shape3d="{ type: 'torus', outerRadius: 102, tubeRadius: 100, rotX: -90, rotY: 0, rotZ: 0, spinX: 0, spinY: 0.5, spinZ: 0 }" shape3d-type="torus" :zoom="92">
        <FallingLines color-a="#6d82f5" color-b="#8137d3" :density="17" :speed="0.25" :speed-variance="0.55" :stroke-width="0.38" :trail-length="0.49" />
      </Form3D>
    </Ascii>
  </Shader>
</template>