Shaders
header.lightDarkMode D
Gallery

A sophisticated dark theme interface featuring a glossy, three-dimensional spherical object on the left side with metallic reflections and subtle internal lighting. The sphere exhibits a glass-like quality with visible refraction and fresnel effects, creating bright highlights along its curved edges. The background is a very dark navy-black color (#130f1a) that provides high contrast. The word 'Galileo' appears in large, outlined metallic text to the right of the sphere, rendered in a silver-gray color with subtle depth and dimensionality. The overall composition has a premium, technological aesthetic with carefully controlled lighting that emphasizes the three-dimensional qualities of the sphere. A subtle film grain texture overlays the entire image, adding a cinematic quality. The lighting angle appears to come from the upper left, creating dramatic shadows and highlights on the glass sphere. The color palette is predominantly cool-toned with dark backgrounds and bright metallic accents, creating a sleek, modern appearance suitable for a premium brand or technology interface.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  FilmGrain,
  Glass,
  SolidColor,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#130f1a" :visible="true" />
    <Glass :cutout="true" :fresnel="0.04" :fresnel-softness="0.05" :highlight="0.5" :highlight-softness="0.21" :inner-zoom="1.5" :light-angle="237" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/Fo7ahNLZwqrY_sdf.bin" :thickness="1">
      <Swirl color-a="#26262b" color-b="#0d111a" :detail="5" :speed="0.2" />
      <ChromaFlow base-color="#11ff00" down-color="#a6ff00" left-color="#00ff15" :momentum="10" :radius="2" right-color="#4cff00" up-color="#00ffa6" />
    </Glass>
    <FilmGrain :opacity="0.1" />
  </Shader>
</template>