Glass Halo 5
Glass HaloA modern, organic shader effect featuring a soft, glowing circular form centered on a gradient background. The composition consists of three layered components: a base lime-green solid color (#7eb518) providing the foundational hue, a central animated blob with warm yellow tones (#fff990 to #e4d71b) that creates an organic, flowing shape with soft edges and internal luminosity, and a glass overlay with an SVG-based circular ring shape that adds dimensional depth and subtle refraction. The blob component features a highlight positioned at coordinates (0.3, -0.3, 0.4) with bright yellow (#ffe11a) at 50% intensity, creating a three-dimensional appearance. The glass element applies a subtle fresnel effect (0.1 intensity) with edge softness of 0.15, producing a smooth transition between the inner and outer surfaces. The overall effect is warm and inviting, with the yellow-green color palette creating a fresh, natural aesthetic. The background gradient transitions smoothly from yellow-green in the center to deeper green at the edges, with soft focus and transparent edges creating a vignette effect. The lighting appears to come from the upper left, enhanced by the highlight positioning and fresnel calculations. The blend mode uses normal-oklab for the blob, preserving color relationships in perceptual space.
Code
<script setup lang="ts">
import {
Shader,
Blob,
Glass,
SolidColor
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#7eb518" />
<Blob blend-mode="normal-oklab" color-a="#fff990" color-b="#e4d71b" :seed="2" :size="0.65" :softness="1" />
<Glass :aberration="0" :edge-softness="0.15" :fresnel-softness="0.56" :inner-zoom="0.5" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/rc0tyyfP7vSZ_sdf.bin" :thickness="1" />
</Shader>
</template>