Shaders
header.lightDarkMode D
Gallery

Three vertically stacked rounded rectangular pill-shaped objects against a pure black background (#0a0a0a). Each pill contains a vibrant pixelated pattern composed of vertical and horizontal stripes in cyan, magenta, and blue hues. The pixelation effect creates a blocky, digital aesthetic with approximately 47-pixel scale blocks. The pills feature a glossy glass material with subtle refraction (0.64 intensity) and a light gray edge highlight that gives them dimensional depth. A ripple effect with magenta (#8c19fd) to cyan (#12acdc) gradient emanates from the center, creating concentric wave patterns across the surface. The dither effect with a bayer4 pattern and colorDodge blend mode adds a grainy, analog quality that contrasts with the digital pixelation. A subtle VHS effect with wobble (0.61) and scanline noise (0.09) introduces slight vertical distortion and analog video artifacts, creating a retro-digital hybrid aesthetic. The overall composition has a cyberpunk, glitch-art quality with strong neon color saturation and a moody, dark atmosphere punctuated by bright, electric hues.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  Glass,
  Pixelate,
  Ripples,
  SolidColor,
  VHS
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0a0a" />
    <Glass :aberration="0" :cutout="true" :fresnel="0" :fresnel-softness="0" :highlight="0" :light-angle="232" :refraction="0.64" :scale="0.8" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/ihHF7QcQ1qcY_sdf.bin" :thickness="0.1">
      <Ripples :center="{ x: 0.7, y: 0.45 }" color-a="#8c19fd" color-b="#12acdc" :frequency="80" />
      <Pixelate :scale="47" :visible="true" />
      <Dither blend-mode="colorDodge" color-mode="source" :pixel-size="6" :threshold="0.8" />
    </Glass>
    <VHS :scanline-noise="0.09" :smear="0.3" :wobble="0.61" />
  </Shader>
</template>