Liquid Stripes
Liquid StripesA vibrant neon shader effect featuring diagonal yellow-green stripes (#e5f83b) at 45-degree angles running across a vivid magenta background (#b817e6). The stripes are evenly spaced with a density of 9, creating a rhythmic linear pattern. Overlaid in the center is a radial glass morphism effect shaped like a starburst or sun icon with translucent purple-tinted glass panels arranged in a circular pattern. The glass shape features chromatic aberration and refraction properties, creating iridescent edge highlights and a frosted glass appearance with subtle light refractions. The glass element has a blur of 11.3 pixels and includes fresnel effects that create rim lighting around the edges. Interactive cursor ripples with chromatic split distortion respond to mouse movement, creating concentric wave patterns that disrupt the striped background. A subtle film grain texture (0.3 strength) overlays the entire composition, adding a slight analog noise quality. The overall aesthetic is cyberpunk/synthwave with high contrast between the neon yellow lines and deep magenta base, enhanced by the translucent glass morphism effect in the center that creates depth and dimensionality against the flat striped background.
Code
<script setup lang="ts">
import {
Shader,
CursorRipples,
FilmGrain,
Glass,
Stripes
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Stripes :balance="0.1" color-a="#e5f83b" color-b="#b817e6" :density="9" />
<CursorRipples />
<Glass :blur="11.3" :fresnel="0.11" :fresnel-softness="0.38" :refraction="0.51" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/DODKZwnr2rPw_sdf.bin" :thickness="0.13" />
<FilmGrain :strength="0.3" />
</Shader>
</template>