Shaders
header.lightDarkMode D
Gallery

Cracked Crystal 5

Cracked Crystal

A neon-glowing abstract shape composed of three concentric, rounded rectangular loops arranged horizontally with organic, flowing curves. The innermost loop is smallest, the middle loop is medium-sized, and the outermost loop is largest. All three loops glow with a vibrant pink-red luminescence (#ff2147, #c21434) against a very dark, nearly black background (#0a0a0a). The shape exhibits a crystalline, faceted surface texture with approximately 3 facets visible, creating a geometric, glass-like appearance with internal depth and refraction. The glow effect is intense and spreads outward with a soft halo, creating a luminous aura around the entire structure. The lighting appears to come from the upper left, creating subtle highlights and shadows that enhance the three-dimensional, translucent quality. The overall aesthetic is futuristic and ethereal, with the neon pink-red color dominating against the dark background. The shape has smooth, rounded edges with no sharp corners, and the internal surfaces show darker red tones (#14060a, #2e0b18) that contrast with the bright outer glow. Godrays with a dark red tint (#4d000f) emanate from the structure, adding atmospheric depth and movement. The entire composition has a high-contrast, high-saturation appearance typical of neon signage or advanced digital visualization.

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="#14060a" color-b="#2e0b18" :deformation="0.6" highlight-color="#ff2147" :highlight-x="-0.5" :highlight-y="0.1" :highlight-z="0.6" :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="165" :shadows="0.5" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/isQWoyQoe0qA_sdf.bin" tint-color="#c21434" :tint-intensity="0.75">
      <Godrays background-color="#ff5772" :center="{ type: 'mouse-position', reach: 0.05, originX: 1, originY: 0, momentum: 0.15, smoothing: 0.25 }" :density="0.5" :intensity="1" ray-color="#4d000f" :speed="2" :spotty="0.7" />
    </Crystal>
    <Glow :intensity="0.5" :size="33" :visible="true" />
  </Shader>
</template>