Shaders
header.lightDarkMode D
Gallery

A complex ASCII art visualization rendered on a dark background featuring a 3D torus shape mapped with falling animated lines. The composition shows multiple diagonal and vertical line patterns in magenta and orange hues creating a sense of motion and depth. The ASCII characters (┉╳┉╳) are densely packed and arranged to form the 3D geometry, with the characters themselves colored in magenta (#ff088c) and orange (#ffb14a) gradients. The falling lines effect creates streaking trails that move downward at varying speeds, producing a dynamic, almost digital rain-like appearance. The background is very dark (nearly black #0e1214) with subtle studio lighting effects. The overall composition has a cyberpunk aesthetic with the 3D torus rotating slowly while the ASCII overlay and falling line effects create layers of visual complexity. The gamma correction is set low (0.25), creating high contrast between the bright line elements and the dark background. Multiple diagonal patterns emerge from the torus geometry, suggesting a wireframe or matrix-like visualization with approximately 17 density lines creating the flowing effect.

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="#0e1214" :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="#ff088c" color-b="#ffb14a" :density="17" :speed="0.25" :speed-variance="0.55" :stroke-width="0.38" :trail-length="0.49" />
      </Form3D>
    </Ascii>
  </Shader>
</template>