Magnified Pixels

A striking digital composition featuring five horizontally stacked elongated rectangular shapes against a deep black background (#0e0b14). Each shape exhibits a distinct chromatic aberration effect with vibrant neon colors separated into distinct color channels. The top shape displays a rainbow gradient transitioning from red through yellow, green, to blue with a rounded right corner. The second shape is predominantly magenta with subtle color separation. The third shape features a bright white-blue left edge that transitions to cyan and green tones across its length, creating a strong light refraction effect. The fourth shape shows magenta and orange tones with color channel separation. The fifth shape displays green and orange chromatic aberration. All shapes are overlaid with a halftone dot pattern at 45-degree angle (frequency 138) that creates a pixelated, print-like texture throughout. A CRT screen effect with scanlines (intensity 0.2, frequency 200) and vignetting (intensity 0.6) is applied globally, creating a retro cathode-ray tube monitor aesthetic. The glass effect with high refraction (2.0) and aberration (0.5) creates a luminous, glowing quality with bright highlights. The overall mood is cyberpunk and digital, with strong neon aesthetics reminiscent of 1980s computer graphics and modern digital art.

<script setup lang="ts">
import {
  Shader,
  Aurora,
  CRTScreen,
  Glass,
  Halftone,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0e0b14" />
    <Halftone :frequency="138" :smoothness="0.3">
      <Glass :cutout="true" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/UGhd-3-7xDaU_sdf.bin" :thickness="0.14">
        <Aurora :center="{ x: 0.42, y: 0.22 }" color-space="oklab" :height="200" :intensity="88" :ray-density="100" :speed="10" :waviness="78" />
      </Glass>
    </Halftone>
    <Glass :fresnel="0" :highlight="0.15" :highlight-softness="0.03" :light-angle="313" :refraction="2" :scale="1.2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/UGhd-3-7xDaU_sdf.bin" :thickness="1" />
    <CRTScreen :color-shift="1.3" :pixel-size="27" :scanline-intensity="0.2" :vignette-intensity="0.6" />
  </Shader>
</template>