Shaders
header.lightDarkMode D
Gallery

A large spherical celestial body dominates the right side of the composition, rendered with a sophisticated 3D spherize effect that creates dimensional depth and curvature. The sphere features prominent horizontal striations and bands that flow across its surface in warm orange and coral tones (#ffa929), contrasting against cooler blue and purple undertones (#4c71fc, #0d193d). The surface exhibits a glossy, reflective quality with a bright highlight positioned in the upper-left quadrant of the sphere, creating a luminous focal point. Multiple layers of godrays emanate from the sphere's surface, with orange rays moving outward at varying speeds and intensities (0.82 intensity), creating a dynamic atmospheric effect. Darker blue-toned rays (#010640) add depth and shadow definition. The background is a deep, nearly black space (#0e0724) with subtle star-like particles scattered throughout, enhanced by a floating particles effect with minimal opacity (0.05) and high twinkle (0.77). A wave distortion effect (strength 0.21, frequency 7.9) subtly warps the surface details, creating organic movement across the bands. Chromatic aberration (0.02 strength) adds a slight color fringing effect, particularly visible along the edges of the bright regions. The overall mood is cosmic and ethereal, with a balance between cool deep space tones and warm energetic light emissions. Film grain (0.03 strength) provides subtle texture throughout, enhancing the cinematic quality.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  FilmGrain,
  FloatingParticles,
  Godrays,
  SolidColor,
  Spherize,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0e0724" :visible="true" />
    <Blob :center="{ x: 0.29, y: 0.41 }" color-a="#0d193d" color-b="#0a0526" color-space="oklch" :deformation="1" :highlight-intensity="0" :size="0.65" :softness="1" :visible="true" />
    <FloatingParticles blend-mode="linearDodge" :opacity="0.05" :particle-size="1" :particle-softness="0.15" :randomness="0.01" :speed="0" :twinkle="0.77" />
    <ChromaticAberration :angle="29" :red-offset="1" :strength="0.02">
      <Spherize :center="{ x: 0.8, y: 0.66 }" :depth="1.49" light-color="#4c71fc" :light-intensity="0.98" :light-position="{ x: 0.17, y: 0.1 }" :light-softness="0" :radius="1.3">
        <Godrays background-color="#050208" :center="{ x: 0.5, y: 1 }" :density="0.05" :intensity="0.74" ray-color="#010640" :speed="-1" :visible="true" />
        <Godrays blend-mode="normal-oklch" :density="0.58" :intensity="0.82" ray-color="#ffa929" :speed="0.25" :visible="true" />
        <WaveDistortion :angle="314" edges="mirror" :frequency="7.9" :speed="0.3" :strength="0.21" :visible="true" />
      </Spherize>
    </ChromaticAberration>
    <FilmGrain :strength="0.03" :visible="true" />
  </Shader>
</template>