Ascii Tunnel 3
Ascii TunnelA complex digital matrix effect rendered in ASCII characters on a dark background. The composition features a 3D torus shape that serves as the structural foundation, with falling diagonal lines creating a cascading data stream effect. The ASCII characters (┉╳┉╳) are arranged in geometric patterns that follow the contours of the underlying 3D torus, creating multiple diagonal streams that flow from upper-left to lower-right and upper-right to lower-left, forming an X-pattern across the canvas. The color palette transitions from golden-yellow (#ffc800) to bright green (#3dca5f), with the yellow dominating the upper-left and right edges while green concentrates in the center and lower portions. The background is a very dark forest green (#0c1c0c), providing high contrast for the glowing character elements. The falling lines have a trail effect with variable speeds creating depth perception. The overall atmosphere is reminiscent of digital rain or a hacking interface, with a cyberpunk aesthetic. The ASCII characters appear to have slight transparency and glow, creating a luminous quality against the dark background. The 3D rotation of the torus (rotX: -90, spinY: 0.5) creates a dynamic perspective where the character patterns appear to wrap around a three-dimensional form.
Code
<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="#0c1c0c" :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="#ffc800" color-b="#3dca5f" :density="17" :speed="0.25" :speed-variance="0.55" :stroke-width="0.38" :trail-length="0.49" />
</Form3D>
</Ascii>
</Shader>
</template>