Shaders
header.lightDarkMode D
Gallery

Cracked Crystal 3

Cracked Crystal

A glowing neon-style abstract shape composed of nested rounded rectangular loops arranged horizontally, reminiscent of a stylized paperclip or chain link. The shape features warm golden-orange luminescence with internal faceted crystal-like surfaces that refract light, creating a translucent glass appearance. The outer edges glow with a bright warm white-yellow halo effect that bleeds into the dark background. The interior surfaces display warm amber and peachy tones with subtle orange-red highlights that suggest internal light sources and 3D depth. The background is pure black, creating maximum contrast. A soft warm glow radiates outward from the entire form, with the brightest illumination concentrated at the top-right edge of the shape. The crystal component creates faceted reflections and refractions, while the godrays effect adds subtle red-tinted light rays emanating from the center. The overall aesthetic is luxurious and modern, with a warm color temperature dominated by orange and gold tones against deep darkness.

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="#140805" color-b="#26110a" :deformation="0.6" highlight-color="#ff6a1f" :highlight-x="0.4" :highlight-y="0.2" :seed="22" :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="321" :shadows="0.5" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/isQWoyQoe0qA_sdf.bin" tint-color="#d63a11" :tint-intensity="0.32">
      <Godrays background-color="#ffd45c" :center="{ type: 'mouse-position', reach: 0.05, originX: 1, originY: 0, momentum: 0.15, smoothing: 0.25 }" :density="0.5" :intensity="1" ray-color="#cf0700" :speed="2" :spotty="0.7" />
    </Crystal>
    <Glow :intensity="0.5" :size="33" :visible="true" />
  </Shader>
</template>