Shaders
header.lightDarkMode D
Gallery

Magnified Pixels 2

Magnified Pixels

A dark, sophisticated shader effect featuring multiple layered glass morphism elements arranged vertically against a near-black background (#0e0b14). The composition displays three rounded rectangular shapes with varying sizes, creating a stacked, offset arrangement. Each shape exhibits a luminous glass effect with chromatic aberration, creating iridescent color fringes along the edges in cyan, yellow, and magenta hues. The primary visual effect combines a halftone pattern (138 frequency at 45-degree angle) with an aurora shader that generates flowing, wave-like light patterns in cyan (#33d4f8) and golden yellow (#eebb22) tones. The aurora effect creates 4 curtain-like light formations that appear to flow and shimmer across the glass surfaces. A CRT screen effect overlays the entire composition with scanlines and pixel distortion, adding a retro-digital aesthetic with chromatic color shifting. The glass elements feature strong refraction (value 2) and aberration (0.5), creating a prismatic, light-bending quality. Fresnel highlights create bright edge accents, particularly visible on the upper portions of each shape. The light source appears to come from approximately 300-313 degrees, creating dimensional highlights and shadows. The overall mood is futuristic and ethereal, with a cyberpunk aesthetic enhanced by the glitch-like CRT effects and the flowing aurora patterns.

Code

vue
<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 :center="{ x: 0.53, y: 0.57 }" :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 :balance="47" :center="{ x: 0.44, y: 0.3 }" color-a="#33d4f8" color-b="#eebb22" color-c="#ff0000" color-space="oklab" :height="200" :ray-density="100" :speed="10" :waviness="82" />
      </Glass>
    </Halftone>
    <Glass :center="{ x: 0.43, y: 0.47 }" :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>