Shaders
header.lightDarkMode D
Gallery

Fluid Chrome 12

Fluid Chrome

A 3D isometric geometric composition featuring two interconnected hollow hexagonal cubes rendered with a sophisticated glass material shader. The primary cube is positioned in the upper portion, while a smaller secondary cube is offset below and to the right, connected by a solid pink bridging element. The glass material exhibits a warm gradient transitioning from pale cream (#f2f4df) on the lighter edges to a dusty rose-pink (#e4626e) on the darker surfaces, creating a luminous, translucent appearance. The shader demonstrates strong chromatic aberration (0.89) creating subtle color fringing at edges, particularly visible on the pink connector piece. A swirling gradient pattern flows dynamically across the glass surfaces with a blend intensity of 56, generating organic color transitions within the geometric structure. The fresnel effect (0.01) produces subtle edge highlights in white, enhancing the glass-like quality and creating a sense of depth. A flow field distortion effect (speed 1.8) adds subtle warping and movement to the surface details. The background is pure black (#0a0a0a), providing maximum contrast and making the luminous geometric forms appear to float in space. The overall mood is elegant and modern, with a balance between rigid geometric precision and fluid, organic material properties. Light appears to originate from approximately 300 degrees, creating highlights and depth perception across the hollow structures.

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="#f2f4df" color-b="#e4626e" 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>