Shaders
header.lightDarkMode D
Gallery

Liquid Stripes 4

Liquid Stripes

A diagonal striped background pattern with 45-degree angled lines in alternating yellow-green (#b8c911) and coral-red (#d06755) colors. The stripes are evenly spaced with a density of 9, creating a rhythmic linear pattern across the entire composition. Overlaid on this striped foundation is a central frosted glass effect featuring a radial starburst or flower-like shape composed of translucent rectangular segments arranged in a circular pattern. The glass element exhibits significant refraction and chromatic aberration effects, creating a prismatic quality with subtle rainbow-like color shifts along the edges. The glass shape has a blur value of 11.3 pixels, producing a soft, diffused appearance with visible fresnel highlights and edge softness of 0.1. The overall composition is enhanced with cursor ripple distortions that create concentric wave patterns emanating from interaction points, with a decay of 10 and intensity of 10. A subtle film grain texture with 0.3 strength is applied across the entire image, adding a fine noise texture that enhances the tactile quality. The lighting angle is set to 300 degrees, creating directional highlights on the glass element. The atmosphere is modern and digital, with a warm coral-to-yellow color palette suggesting energy and motion.

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="#b8c911" color-b="#d06755" :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>