Shaders
header.lightDarkMode D
Gallery

A 3D isometric composition featuring two interconnected hollow cube structures rendered with a glass material shader. The cubes are positioned diagonally against a pure black background, creating strong contrast. The primary visual effect is a vibrant magenta/pink neon glow emanating from the glass edges and surfaces, with the color #ec54fd (hot magenta) being the dominant accent. The glass material exhibits high refraction (1.09) and chromatic aberration (0.89), creating subtle rainbow-like color separation along the edges. The cubes have a translucent quality with internal swirling patterns that blend magenta and black colors using an oklab color space, creating organic flowing distortions within the glass geometry. A flow field effect adds secondary motion patterns with mirrored edges, contributing to the dynamic, liquid-like appearance within the transparent structures. The fresnel effect creates bright white highlights along the top edges and corners where light reflects most intensely. The overall mood is futuristic and cyberpunk, with the neon magenta glow suggesting energy or data flow. The thickness of the glass material (0.27) creates visible depth and dimensionality. Edge softness (0.2) prevents harsh transitions, while the highlight softness (0.5) creates smooth, glowing reflections rather than sharp specular points. The composition has a tech-forward aesthetic with smooth, polished surfaces and a sense of three-dimensional depth.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0a0a" />
    <Glass :aberration="0.89" :cutout="true" :edge-softness="0.2" :fresnel="0.01" :fresnel-softness="0.14" :refraction="1.09" :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.27">
      <Swirl :blend="56" color-a="#ec54fd" color-b="#0a0a0a" color-space="oklab" :detail="4.2" :speed="0.1" />
      <FlowField :detail="1" :evolution-speed="1.5" :speed="1.8" :strength="0.5" />
    </Glass>
  </Shader>
</template>