Shaders
header.lightDarkMode D
Gallery

A retro pixel-art style alien invader character rendered with a glossy glass material effect. The character features a symmetrical design with a blocky, geometric silhouette characteristic of 1980s arcade games. The shape consists of a central rectangular body with two large square eye cutouts, four protruding angular limbs extending outward (two upper arms with bent joints, two lower legs), and a crown-like top with four pointed protrusions. The entire form is rendered in a vibrant gradient transitioning from deep red-orange at the top to warm golden-orange at the bottom. The glass shader creates a luminous, translucent appearance with visible refraction and fresnel effects along the edges, giving the character a glowing, three-dimensional quality despite its flat pixel-art design. The surface exhibits subtle chromatic aberration (0.45 intensity) creating slight color fringing at edges. A soft highlight runs along the upper portions, enhancing the glossy, wet appearance. The background is a soft, diffused gradient of light lavender and pale blue tones with gentle vignetting, creating atmospheric depth. A subtle film grain texture (0.1 strength) adds a slight vintage quality. The overall mood is nostalgic and playful, evoking classic arcade gaming aesthetics with modern shader rendering techniques.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <StudioBackground :ambient-intensity="65" :back-intensity="25" :brightness="100" :center="{ x: 0.5, y: 0.88 }" color="#e6e6ff" :fill-angle="53" :fill-intensity="9" :fill-softness="94" :key-intensity="11" :key-softness="100" :light-target="42" />
    <Glass :aberration="0.45" :cutout="true" :edge-softness="0.05" :fresnel="0.2" :fresnel-softness="0.31" :highlight="0.3" :inner-zoom="1.15" :refraction="0.35" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/OcAv2bFTPVug_sdf.bin" :thickness="1">
      <Swirl :blend="55" color-a="#e83215" color-b="#f5a623" color-space="oklch" :speed="0.8" />
    </Glass>
    <FilmGrain :strength="0.1" />
  </Shader>
</template>