Shaders
header.lightDarkMode D
Gallery

Liquid Stripes 9

Liquid Stripes

A dynamic shader effect featuring diagonal yellow and orange stripes at a 45-degree angle creating a rhythmic pattern across the entire composition. The stripes have a balance of 0.1, creating thin yellow lines (#ffdc12) against a warmer orange background (#ff8200). Centered in the composition is a sun-like radial burst shape with glass refraction properties, featuring 3D extruded petals that appear to emanate outward. The glass element has a blur of 11.3 pixels with chromatic aberration of 0.5, creating iridescent edge distortion and light refraction effects. The shape exhibits fresnel effects with a 0.11 intensity and 0.38 softness, producing subtle white highlights along the edges. A film grain overlay with 0.3 strength adds texture and noise throughout. Cursor ripples with 10 intensity and 0.5 radius create interactive distortion waves that emanate from user interaction points. The overall mood is energetic and warm, with the striped background suggesting motion and the central glass element providing a focal point of visual interest with its translucent, refractive properties.

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="#ffdc12" color-b="#ff8200" :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>