Shaders
header.lightDarkMode D
Gallery

A modern, minimalist logo design featuring four stacked horizontal bars arranged in a cascading pattern against a dark background. The bars have a frosted glass appearance with a subtle blue-gray metallic sheen, created through the Glass shader component with high refraction (1.74) and fresnel effects. Each bar is offset slightly, creating a dynamic, flowing composition that suggests movement or progression. The shapes have smooth, rounded edges with a thickness of approximately 0.22 units. Behind the glass elements, a subtle plasma effect with dark purple (#2c2c42) and black tones creates atmospheric depth and subtle color variation. The glass surfaces exhibit strong specular highlights in light blue (#8dacd9) along the edges, enhanced by the fresnel effect at 0.17 intensity. Godrays with a pale lavender tint (#b5b5eb) emanate from the right side, adding volumetric light and dimension. Wave distortion at 0.55 strength creates subtle undulating movement across the surfaces. A minimal chromatic aberration effect (0.1 strength) adds a slight color separation at the edges. Film grain at 0.04 strength provides subtle texture without overwhelming the clean aesthetic. The overall mood is sleek, professional, and contemporary with a hint of technological sophistication. The dark background (approximately #000000-#141405) creates maximum contrast, making the luminous glass elements appear to float in space.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaticAberration,
  FilmGrain,
  Glass,
  Godrays,
  Plasma,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Plasma color-a="#2c2c42" :density="0.8" />
    <Glass :aberration="1" :cutout="true" :edge-softness="0.15" :fresnel="0.17" :fresnel-softness="0.46" :highlight="0.85" highlight-color="#8dacd9" :highlight-softness="0.77" :light-angle="271" :refraction="1.74" :scale="0.8" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/PqaAxy0OWZeW_sdf.bin" :thickness="0.22" :tint-preserve-luminosity="false">
      <Godrays background-color="#141405" :center="{ x: 0.78, y: 0.56 }" :density="0.1" ray-color="#b5b5eb" :speed="0.7" />
      <WaveDistortion :angle="125" :frequency="0.1" :speed="0.8" :strength="0.55" />
      <ChromaticAberration :angle="190" :strength="0.1" />
    </Glass>
    <FilmGrain :strength="0.04" />
  </Shader>
</template>