Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect dominated by a pure black background (#000000) with a glass morphism component featuring a complex SVG shape outline. The glass element has a subtle white tint with golden-amber highlights (#ffc15c) creating a luminous edge effect around the geometric shape. Within the glass container, falling lines animate diagonally with a gradient transitioning between golden-yellow (#dfc61e) and pink (#f06383), creating a sense of motion and energy. The pixelation effect (scale 50) creates a blocky, retro digital aesthetic that overlays the falling lines, giving them a chunky, low-resolution appearance. A reflective plane at the bottom creates a blurred mirror effect with significant falloff, extending the visual depth downward. The dither pattern with a bayer2 algorithm adds subtle noise texture throughout. The overall mood is cyberpunk and futuristic, with a strong emphasis on glass-like transparency, neon-colored motion elements, and digital degradation. The composition uses centered alignment with the glass shape occupying the upper-middle portion of the frame, while the reflective plane extends below, creating vertical visual balance.

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="#ffc15c" :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="0" color-a="#dfc61e" color-b="#f06383" :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>