Shaders
header.lightDarkMode D
Gallery

Liquid Stripes 6

Liquid Stripes

A dynamic shader effect featuring diagonal neon lime-green stripes (#80f820) at 45-degree angle running across a muted purple-gray background (#a09bbb). The stripes have a consistent density of 9 lines with a balance ratio of 0.1, creating thin bright lines against the darker background. Overlaid on this striped pattern is a central glass morphism effect with a complex SVG shape that appears as a crystalline or geometric form with multiple faceted surfaces. The glass element exhibits chromatic aberration with a 0.5 intensity, creating subtle color fringing around the edges. The glass has a blur of 11.3 pixels with a refraction value of 0.51, giving it a translucent, refractive quality that distorts the stripes beneath it. A fresnel effect with 0.11 intensity and 0.38 softness adds subtle edge highlights in white (#ffffff) to the glass shape, enhancing its three-dimensional appearance. Cursor ripples with an intensity of 10 and decay of 10 create interactive distortion waves that emanate from the mouse position. A film grain overlay with 0.3 strength adds subtle texture and analog quality to the entire composition. The overall mood is modern, tech-forward, and interactive with a cyberpunk aesthetic.

Code

vue
<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="#80f820" color-b="#a09bbb" :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>