Retro Pop 7
Retro PopA dynamic shader effect featuring diagonal parallel stripes that flow from upper-left to lower-right across the entire composition. The stripes are created by a dithered gradient transitioning between dark blue (#1a3d8f) and light blue (#8fb8f5) tones. The stripe pattern has a -115 degree angle with moderate density, creating evenly-spaced parallel bands. A stretch distortion effect is applied with a center point slightly offset to the right and middle of the frame, creating a subtle warping that makes the stripes appear to curve and stretch outward, particularly visible in the directional flow. The dither component adds a grainy, pixelated texture with 4-pixel blocks throughout, giving the effect a slightly noisy, digital quality. The overall mood is cool and technological, with a sense of motion and depth created by the combination of the linear stripe pattern and the radial stretch distortion. The opacity is fully opaque, and the blend mode is normal, allowing all three shader components to composite together seamlessly. The softness value of 0.57 on the stripes creates slightly feathered edges between the light and dark stripe bands, preventing harsh aliasing.
Code
<script setup lang="ts">
import {
Shader,
Dither,
Stretch,
Stripes
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Stripes :angle="-115" :balance="0.77" :density="4" :softness="0.57" />
<Stretch :angle="258" :center="{ x: 0.53, y: 0.53 }" :falloff="0.49" />
<Dither color-a="#1a3d8f" color-b="#8fb8f5" :threshold="0.66" />
</Shader>
</template>