Shaders
header.lightDarkMode D
Gallery

A 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

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="#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>