Broken Panel 3
Broken PanelA dark, atmospheric shader effect dominated by a pure black background (#000000) with glowing magenta and purple elements scattered throughout. The composition features a glass morphism effect with a pixelated overlay creating a retro-digital aesthetic. Vertical falling lines in vibrant magenta (#f808ff) and deep purple (#7c18f3) cascade downward at a 90-degree angle with a speed of 0.25, creating a sense of motion and energy. Two prominent pixelated square blocks in bright magenta appear in the upper-left and center-left areas, rendered with a 50-scale pixelation effect. Additional smaller magenta geometric shapes and fragments are distributed across the composition, including a triangular form on the right side and circular glowing orbs at the bottom center. A reflective plane effect at the base creates a subtle mirrored distortion with a 4.7 blur and 0.59 distance, producing a glass-like reflection that grounds the floating elements. The overall mood is cyberpunk and neon-inspired, with high contrast between the dark background and luminous purple-magenta accents. A dither pattern with a bayer2 algorithm adds subtle noise texture throughout, enhancing the digital, low-resolution aesthetic. The glass component's highlight color (#ca66ff) creates subtle pink-purple reflective accents on the geometric shapes.
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="#ca66ff" :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 color-a="#7c18f3" color-b="#f808ff" :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>