Shaders
header.lightDarkMode D
Gallery

An aerial landscape photograph of mountainous terrain with dramatic chromatic aberration effects applied. The image shows rocky peaks and ridges with brown and tan coloring in the foreground, transitioning to darker green forested valleys in the middle distance. The sky above is moody with dark gray and blue storm clouds, with a bright white break in the clouds creating atmospheric depth. The chromatic aberration effect creates distinctive rainbow-colored fringes (red, green, blue separation) particularly visible on the rocky outcrops and mountain edges, with the red channel offset to the left and blue to the right, creating a glitchy, digital aesthetic. The grid distortion effect adds subtle warping and undulation across the entire composition, creating a sense of movement and instability. The overall mood is cinematic and surreal, with high contrast between the warm earth tones and cool sky tones. The effect creates a VHS or analog video glitch appearance overlaid on a naturalistic landscape photograph.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaticAberration,
  CursorTrail,
  GridDistortion,
  ImageTexture
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <ImageTexture url="https://rgqpsgmnzmniyzelfbfx.supabase.co/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/NweYsjkAwAjy.jpeg" />
    <CursorTrail id="idmi61gnmkxf1citdd1" color-a="#ffffff" color-b="#ffffff" :opacity="0" :radius="1.15" :shrink="0.5" :visible="false" />
    <ChromaticAberration mask-source="idmi61gnmkxf1citdd1" :strength="0.08">
      <ImageTexture url="https://rgqpsgmnzmniyzelfbfx.supabase.co/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/NweYsjkAwAjy.jpeg" />
    </ChromaticAberration>
    <GridDistortion :grid-size="30" :intensity="3" :radius="2" :swirl="0" />
  </Shader>
</template>