Liquid Stripes 3
Liquid StripesA vibrant shader effect featuring a bright lime-green background (#b6f10c) with evenly-spaced diagonal stripes running at 45 degrees in a teal-cyan color (#0ac193). The stripes create a consistent linear pattern across the entire canvas with a density of 9 lines. Overlaid on this striped foundation is a central glass morphism effect featuring a star or burst-like SVG shape with multiple pointed rays emanating from the center. This glass element exhibits significant chromatic aberration and refraction properties, creating a prismatic, translucent appearance with subtle rainbow-like color separation along the edges. The glass shape has a frosted, diffused quality with a blur radius of 11.3 pixels, giving it a soft, glowing appearance while maintaining visibility of the underlying stripe pattern through its semi-transparent surface. The shape is centered in the composition and features fresnel reflections and highlights that enhance its three-dimensional glass-like quality. A subtle film grain texture is applied across the entire image with 0.3 strength, adding a slight noise pattern for texture. Interactive cursor ripples with chromatic split effects are present, creating concentric wave distortions that respond to mouse movement. The overall mood is energetic and modern, with a strong sense of depth created by the layered glass effect against the dynamic 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="#0ac193" color-b="#b6f10c" :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>