Broken Panel

Open in editor

A dark, atmospheric shader effect featuring a central glass morphism element with a complex SVG-based shape. The composition displays a black background (#000000) with a frosted glass component at the center that has a magenta highlight color (#ef40ff) creating luminous edges. Within and around the glass shape, diagonal falling lines animate from upper-left to lower-right, transitioning between magenta (#f21cd2) and pale yellow (#cdd68c) colors with a 0.25 speed creating a sense of motion. The pixelation effect (scale 50) creates a blocky, retro-digital aesthetic that breaks up the smooth glass surfaces into discrete square units. A dither pattern with white (#ffffff) adds fine-grain noise texture across the composition. Below the main glass element, a reflective plane effect creates a blurred mirror reflection with significant blur (4.7) and falloff (1.91), stretching the reflection downward with reduced opacity to create depth. The overall mood is cyberpunk and ethereal, combining glossy glass refraction properties with digital degradation effects. The fresnel effect is minimal (0), but the highlight intensity (0.8) creates bright spots on the glass edges. The composition uses normal blend modes throughout with consistent alpha masking, creating a layered, translucent appearance.

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="#ef40ff" :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="272" color-a="#f21cd2" color-b="#cdd68c" :density="60" :rounding="0" :speed="0.25" :speed-variance="0.8" :stroke-width="0.76" :trail-length="0.15" />
      <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>