Retro Pop

A dynamic gradient shader effect featuring warm color transitions from yellow to red-orange. The composition displays diagonal striped patterns at approximately -14 degrees angle, creating a sense of directional movement across the canvas. The stripes are rendered with a dithered texture using 4-pixel blocks, creating a grainy, pixelated appearance that transitions smoothly between the primary colors. A stretch distortion effect is applied with center point at coordinates (0.2, 0.52), creating a subtle warping that pulls the striped pattern toward the left-center area with a falloff radius of 0.49. The overall effect produces curved, flowing lines that bend and stretch across the composition. The color balance heavily favors yellow (77% balance), with red-orange dominating the upper right and background areas. The dithering threshold of 0.66 creates visible color banding and pixelation, giving the effect a retro, digital aesthetic. The softness value of 0.57 on the stripes creates semi-transparent blending between the stripe bands, resulting in smooth color transitions rather than hard edges. The linear color space ensures accurate color representation throughout the gradient.

<script setup lang="ts">
import {
  Shader,
  Dither,
  Stretch,
  Stripes
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="-14" :balance="0.77" :density="4" :softness="0.57" />
    <Stretch :center="{ x: 0.2, y: 0.52 }" :falloff="0.49" />
    <Dither color-a="#f01d1d" color-b="#f7ce19" :threshold="0.66" />
  </Shader>
</template>