Crystal Ball

Open in editor

A perfectly spherical 3D object rendered against a deep black background with subtle vignetting. The sphere features a highly reflective, polished surface with a cool-toned color palette dominated by dark blue and teal gradients. The sphere's surface exhibits sophisticated lighting with a bright specular highlight positioned in the upper right area, creating a sharp, bright white point of reflection. The overall sphere transitions from darker navy blue tones on the left and bottom portions to lighter blue-gray tones toward the top and right side. A subtle lens flare effect is visible near the highlight, with a soft halo and chromatic aberration creating iridescent blue and purple fringing. The background features a studio lighting setup with warm amber-brown tones subtly visible on the right edge, contrasting with the cool sphere. Floating particles with a purple-lavender tint (approximately #c5b7ed) are scattered around the sphere with low opacity and gentle twinkling motion. The entire composition has a cinematic quality with film grain texture applied at low strength (0.05 opacity), adding subtle noise throughout. The sphere appears to have a depth of approximately 1.1 units with a radius of 0.9, creating a convincing three-dimensional appearance. The lighting setup includes a key light positioned at coordinates (0.624, 0.012) with soft falloff, creating the primary specular highlight, while ambient and fill lights contribute to the overall illumination with warm undertones visible on the periphery.

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.49, y: 0.95 }" 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 :depth="1.1" light-color="#a9cbe8" :light-intensity="0.3" :light-position="{ x: 0.62, y: 0.01 }" :light-softness="0.2" :radius="0.9">
      <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.57, y: 0.25 }" :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>