Broken Panel 2
Broken PanelA 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
<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>