Shaders
header.lightDarkMode D
Gallery

A dark, high-tech interface displayed against a pure black background. The composition features a central glass-morphism panel with a subtle rectangular outline at the top containing a small blue pixelated grid pattern. Below this is a prominent bright green square element positioned in the middle of the frame, serving as a focal point. The glass panel exhibits a purple-tinted highlight effect (#9040ff) along its edges, creating a luminous border. Falling green lines (#35e947) cascade downward through the glass component with a slight diagonal angle, creating a digital rain effect with varying speeds and trail lengths. The entire scene is overlaid with a dithering pattern using a bayer2 algorithm, adding a grainy, retro-digital texture. At the bottom of the frame, a reflective plane effect creates a blurred mirror image of the green element, with significant blur (4.7) and falloff distance (1.91), producing a glowing reflection that fades into the darkness. The overall aesthetic is cyberpunk/sci-fi with neon green accents against deep blacks and subtle purple highlights, creating a sense of depth and technological sophistication.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  FallingLines,
  Glass,
  Pixelate,
  ReflectivePlane,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#000000" />
    <Glass :aberration="0" :cutout="true" :edge-softness="0.2" :fresnel="0" :fresnel-softness="0" :highlight="0.8" highlight-color="#9040ff" :inner-zoom="1.2" :refraction="2" :scale="0.65" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/UGhd-3-7xDaU_sdf.bin" :thickness="0.24">
      <FallingLines :angle="178" color-a="#35e947" color-b="#461c81" :density="60" :rounding="0" :speed="0.25" :speed-variance="0.8" :stroke-width="0.76" :trail-length="0.03" />
      <Pixelate :visible="true" />
    </Glass>
    <Dither color-mode="source" pattern="bayer2" :pixel-size="2" />
    <ReflectivePlane :blur="4.7" :blur-distance="0.14" :distance="0.59" :falloff="1.91" :height="0.75" />
  </Shader>
</template>