Shaders
header.lightDarkMode D
Gallery

A modern, minimalist logo design featuring four stacked horizontal bars arranged in a stylized 'F' formation against a dark background. The bars have a sophisticated 3D appearance with smooth, rounded edges and subtle beveled surfaces that catch light. The primary material appears to be frosted glass or brushed metal with a cool, bluish-white tone that creates a luminous quality. Each bar is slightly offset, creating visual rhythm and depth. The lighting is carefully controlled, with highlights concentrated on the upper surfaces of each bar, creating a subtle gradient from bright white at the peaks to darker gray-blue in the recessed areas. The background is nearly pure black with minimal ambient light, making the glowing bars stand out dramatically. A thin layer of film grain adds subtle texture without compromising the clean, premium aesthetic. The overall effect conveys sophistication, modernity, and technological advancement through the interplay of light, shadow, and carefully crafted geometry.

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" :blur="20" :cutout="true" :edge-softness="0.2" :fresnel="0.01" :fresnel-softness="0.73" :highlight="1.75" highlight-color="#8dacd9" :highlight-softness="0.55" :light-angle="234" :refraction="1.13" :scale="0.8" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/PqaAxy0OWZeW_sdf.bin" :thickness="1" :tint-preserve-luminosity="false">
      <Godrays background-color="#141405" :center="{ x: 0, y: 1 }" :density="0.2" ray-color="#b5b5eb" :speed="0.7" />
      <WaveDistortion :angle="341" :frequency="2.7" :speed="0.8" :strength="0.55" />
      <ChromaticAberration :angle="154" :strength="0.1" />
    </Glass>
    <FilmGrain :strength="0.04" />
  </Shader>
</template>