Broken Panel 6
Broken PanelA sleek, modern shader effect displaying three stacked rounded rectangular containers against a pure black background. The composition features a glass morphism aesthetic with frosted glass panels outlined in cyan/turquoise borders. Inside each container, pixelated blocks of color are arranged horizontally - combinations of coral/salmon red (#ff6440), light green (#0affd2), tan/beige, and cyan tones create a retro-digital aesthetic. The glass components have a subtle refractive quality with highlights in bright cyan (#40fff9). Falling diagonal lines in coral and cyan colors stream through the glass at approximately 234 degrees, creating motion and energy. A reflective plane beneath the containers creates a soft, blurred mirror effect with falloff, suggesting depth and dimensionality. The overall mood is cyberpunk-inspired with a blend of retro pixel art and contemporary glass UI design. Fine dithering patterns add texture and visual noise throughout. The pixelation effect (scale 50) gives the colored blocks a chunky, 8-bit video game quality, while the glass blur and refraction parameters create a sophisticated, layered depth effect.
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="#40fff9" :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="234" color-a="#ff6440" color-b="#0affd2" :density="60" :rounding="0" :speed="0.25" :speed-variance="0.8" :stroke-width="0.76" :trail-length="0.3" />
<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>