Shaders
header.lightDarkMode D
Gallery

A 3D isometric geometric composition featuring two hollow cube-like hexagonal structures rendered with a glass material effect. The upper cube displays a cyan-to-teal gradient with high transparency and refractive properties, creating a luminous, crystalline appearance. The lower cube is darker, rendered in deep teal and dark navy tones with reduced opacity, creating a shadow effect beneath the primary structure. Both shapes are outlined with smooth, beveled edges that catch light, producing subtle highlights along the top and left-facing surfaces. The background is pure black (#0a0a0a), providing maximum contrast. A delicate cyan-colored sine wave pattern animates across the glass surface, adding subtle motion and visual interest. The overall atmosphere is cool, technological, and ethereal, with a frosted glass aesthetic enhanced by fresnel effects that create a rim-light glow around the edges. The lighting angle appears to come from the upper left at approximately 300 degrees, casting soft shadows and creating depth perception. The composition has a minimalist, modern design sensibility with emphasis on transparency, refraction, and subtle luminescence.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0a0a" />
    <SmokeFill color-a="#7cbfc4" color-b="#06181f" :color-decay="0.2" :detail="4" :dissipation="0.1" :emit-from="{ type: 'mouse-position', originX: 0.5, originY: 0.5 }" :gravity="-2" :scale="0.7" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/EKiSRi_0Mh6g_sdf.bin" />
    <Glass :aberration="0" :cutout="true" :edge-softness="0.15" :fresnel="0.18" fresnel-color="#ff9b8c" :fresnel-softness="0.24" :refraction="1.5" :scale="0.7" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/EKiSRi_0Mh6g_sdf.bin" :thickness="0.6">
      <SineWave :amplitude="0.6" color="#5fe6f0" :frequency="0.1" :softness="0.3" :speed="0.6" />
    </Glass>
  </Shader>
</template>