Shaders
header.lightDarkMode D
Gallery

Two isometric hexagonal wireframe structures stacked vertically against a pure black background. Each hexagon features a hollow center creating a 3D cube-like appearance. The structures are rendered with a vibrant chromatic aberration effect displaying a rainbow gradient that shifts across the geometry. The primary colors transition smoothly from purple on the left edges through magenta, cyan, light-green, yellow, and orange on the right edges, creating a neon-like iridescent quality. The glass material has a subtle glossy finish with light refraction and fresnel effects that enhance the dimensional appearance. The edges exhibit a soft glow with chromatic separation, giving the impression of light bending through transparent material. The overall aesthetic is modern and digital, with a cyberpunk-inspired color palette. The shapes maintain sharp geometric precision while the color gradients flow organically across the surfaces, creating visual depth and movement despite the static composition.

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="#8315cb" color-b="#48f79b" color-space="oklch" :detail="4.2" :speed="0.1" />
      <FlowField :detail="1" :evolution-speed="1.5" :speed="1.8" :strength="0.5" />
    </Glass>
  </Shader>
</template>