Shaders
header.lightDarkMode D
Gallery

Cracked Crystal 4

Cracked Crystal

A luminous, crystalline geometric shape with nested curved rectangular forms rendered in translucent green tones against a deep black background. The primary shape consists of three concentric rounded rectangular outlines that create a flowing, wave-like pattern. The outermost and middle layers exhibit a bright, glowing mint-green color (#3ca37a tinted) with faceted crystal surface details that refract light, creating prismatic highlights and subtle rainbow-like edge effects. The innermost layer remains dark, creating negative space that emphasizes the hollow structure. A soft, diffused glow emanates from the crystalline surfaces, particularly bright at the upper-left edge where light appears to strike the faceted geometry. The crystal material shows high specularity with bright white highlights (#c8dbfa fresnel color) concentrated on the upper portions, while darker shadowed areas appear on the lower sections. The background features subtle blob-like atmospheric distortion in very dark green tones (#08120e to #123323), creating depth and subtle environmental lighting. A god-rays effect with dark green rays (#0a3a28) radiates from the center, adding volumetric depth. The overall mood is ethereal and technological, with a cool, calming energy enhanced by the glowing green luminescence and crystalline material properties.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  Crystal,
  Glow,
  Godrays,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0a0a" />
    <Blob :center="{ x: 0.52, y: 0.48 }" color-a="#08120e" color-b="#123323" :deformation="0.6" highlight-color="#9be8c4" :highlight-x="0.2" :highlight-y="-0.4" :seed="18" :size="0.6" :softness="1" />
    <Crystal :cutout="true" :dispersion="0.62" :edge-softness="0.05" :facets="3" :fresnel="0.28" fresnel-color="#c8dbfa" :fresnel-softness="0.52" :highlights="0.4" :light-angle="218" :shadows="0.5" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/isQWoyQoe0qA_sdf.bin" tint-color="#3ca37a" :tint-intensity="0.3">
      <Godrays background-color="#4dffa6" :center="{ type: 'mouse-position', reach: 0.05, originX: 1, originY: 0, momentum: 0.15, smoothing: 0.25 }" :density="0.5" :intensity="1" ray-color="#0a3a28" :speed="2" :spotty="0.7" />
    </Crystal>
    <Glow :intensity="0.5" :size="33" :visible="true" />
  </Shader>
</template>