Shaders
header.lightDarkMode D
Gallery

A modern, minimalist logo design featuring four horizontally stacked curved rectangular shapes arranged in a cascading pattern, creating a stylized 'F' or forward-facing arrow aesthetic. The shapes have a frosted glass appearance with a subtle metallic gradient that transitions from warm beige-gray on the left to cool blue-gray on the right. Each shape is outlined with a thin glowing edge that creates a luminous border effect. The background is deep black with subtle noise texture, creating high contrast. The glass effect includes internal refraction and fresnel highlights that give the shapes dimensional depth and a polished, premium quality. Subtle chromatic aberration adds a slight color separation at the edges. The overall composition has a sleek, tech-forward aesthetic with soft lighting that suggests a light source from the upper left, creating gentle highlights along the top edges of each shape. The wave distortion effect creates subtle undulating movement across the surfaces, while god rays add atmospheric depth. Film grain overlay provides subtle texture without compromising the clean, modern appearance.

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.18" :fresnel-softness="0.46" :highlight="0.85" highlight-color="#8dacd9" :highlight-softness="0.77" :inner-zoom="3" :light-angle="271" :refraction="2" :scale="0.8" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/PqaAxy0OWZeW_sdf.bin" :thickness="0.11" :tint-preserve-luminosity="false">
      <Godrays background-color="#141405" :center="{ x: 0.52, y: 0.8 }" :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>