Shaders
header.lightDarkMode D
Gallery

A spherical celestial body rendered against a deep black void, positioned in the upper-left portion of the frame. The sphere displays a gradient surface transitioning from dark navy and deep blue tones on the illuminated side to near-black on the shadowed regions. The lighting is subtle and sophisticated, with a cool-toned light source positioned in the upper-right area creating a soft rim light effect along the sphere's edge. The sphere appears to have atmospheric depth with a slight blue-green atmospheric glow near the horizon line. Floating particles with a purple-lavender hue (#c5b7ed) drift slowly across the surface, creating a sense of cosmic dust or stellar phenomena. A lens flare effect with subtle chromatic aberration and halo rings is visible near the light source, adding photorealistic quality. The background features a sophisticated studio lighting setup with a dark vignette that gradually darkens toward the edges, creating dimensional depth. A barely perceptible film grain texture overlays the entire composition, enhancing the cinematic quality. The overall mood is serene, mysterious, and scientifically rendered, evoking the appearance of a gas giant or ice planet in deep space.

Code

vue
<script setup lang="ts">
import {
  Shader,
  CursorRipples,
  FilmGrain,
  FloatingParticles,
  LensFlare,
  Spherize,
  StudioBackground,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <StudioBackground :ambient-intensity="32" :ambient-speed="0.3" back-color="#1a0f2e" :back-intensity="34" :back-softness="61" :brightness="5" :center="{ x: 0.57, y: 0.94 }" color="#17171c" :fill-angle="84" fill-color="#ffffff" :fill-intensity="55" :fill-softness="100" key-color="#ffffff" :key-intensity="15" :key-softness="70" :light-target="64" :seed="42" :vignette="25" :wall-curvature="42" />
    <Spherize :center="{ x: 0, y: 1 }" :depth="1.1" light-color="#a9cbe8" :light-intensity="0.3" :light-position="{ x: 0.43, y: 0.15 }" :light-softness="0.2" :radius="2">
      <Swirl color-a="#0a0a0d" color-b="#0f0f1a" color-space="oklab" :detail="1.2" :speed="0.5" />
      <LensFlare :ghost-chroma="0" :ghost-intensity="0.35" :ghost-spread="0.78" :glare-intensity="0.15" :glare-size="0.15" :halo-chroma="2" :halo-intensity="0.27" :halo-radius="0.38" :halo-softness="1.1" :light-position="{ x: 0.76, y: 0.3 }" :speed="0.9" :starburst-intensity="0.05" :starburst-points="4" :streak-intensity="0" :streak-length="0.21" />
      <FloatingParticles :angle="188" :angle-variance="77" :opacity="0.49" particle-color="#c5b7ed" :particle-size="0.6" :randomness="0.3" :speed="0.1" :speed-variance="0.6" :twinkle="1" />
      <CursorRipples :chromatic-split="3" :decay="4" />
    </Spherize>
    <FilmGrain :strength="0.05" :visible="true" />
  </Shader>
</template>