Shaders
header.lightDarkMode D
Gallery

A perfectly spherical orb rendered against a dark navy background with diagonal striped texture. The sphere features a sophisticated multi-layered lighting system with a primary light source positioned in the upper-left quadrant, creating warm peachy-orange highlights that transition smoothly across the sphere's surface. The color palette flows from deep blue tones on the left side through warm orange and peachy-pink hues in the center, to soft purple-blue tones on the upper right. The sphere exhibits a glossy, polished appearance with subtle chromatic aberration creating slight color fringing at the edges. Internal wave distortions create subtle undulating patterns across the surface, while a ChromaFlow effect adds radial color gradients flowing from the center outward with blue, orange, and purple directional color shifts. The overall effect is enhanced by fine film grain texture overlay, giving it a slightly vintage or cinematic quality. The lighting creates a three-dimensional depth with soft shadows and highlights that emphasize the spherical form. The background diagonal stripes at 45 degrees provide visual contrast and movement, rendered in near-black tones with very subtle purple undertones.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  ChromaticAberration,
  FilmGrain,
  SineWave,
  SolidColor,
  Spherize,
  Stripes,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-b="#100b21" :density="3" :softness="0.68" :speed="-0.1" />
    <Spherize :depth="1.79" light-color="#a761ff" :light-position="{ x: 0.4, y: 0.26 }" :radius="0.97">
      <SolidColor color="#08071a" />
      <SineWave :amplitude="0.36" :angle="177" blend-mode="normal-oklch" color="#0567e8" :frequency="0.1" :position="{ x: 0.22, y: 0.27 }" :softness="0.55" :speed="0.4" :thickness="0.72" />
      <SineWave :amplitude="0.03" :angle="2" blend-mode="normal-oklch" color="#f0960e" :frequency="0.3" :position="{ x: 0.6, y: 0.51 }" :softness="0.54" :speed="0.5" :thickness="0.35" />
      <WaveDistortion :angle="149" :frequency="1.9" :speed="0.2" :strength="1" />
      <ChromaFlow down-color="#0000ff" :intensity="1.5" left-color="#ff6600" :momentum="10" :radius="1.68" right-color="#9000ff" up-color="#ff6e00" />
    </Spherize>
    <ChromaticAberration :strength="0.02" />
    <FilmGrain :strength="0.08" />
  </Shader>
</template>