1import {
 2  ShaderMount,
 3  meshGradientFragmentShader,
 4  getShaderColorFromString,
 5  ShaderFitOptions
 6} from '@paper-design/shaders';
 7
 8export function initHeroShader() {
 9  const container = document.getElementById('hero-shader');
10  if (!container) return;
11
12  // Respect user's motion preferences
13  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
14    container.style.display = 'none';
15    return;
16  }
17
18  // Liquid ink mesh gradient
19  const shader = new ShaderMount(
20    container,
21    meshGradientFragmentShader,
22    {
23      // Colors - liquid ink effect (grayscale tones for editorial look)
24      u_colors: [
25        getShaderColorFromString('#ffffff'),
26        getShaderColorFromString('#e8e4df'),
27        getShaderColorFromString('#b5b0a8'),
28        getShaderColorFromString('#1a1a1a'),
29      ],
30      u_colorsCount: 4,
31
32      // Effect parameters
33      u_distortion: 1.0,
34      u_swirl: 0.2,
35      u_grainMixer: 0,
36      u_grainOverlay: 0,
37
38      // Sizing uniforms (required by mesh gradient)
39      u_fit: ShaderFitOptions.cover,
40      u_scale: 1,
41      u_rotation: 0,
42      u_offsetX: 0,
43      u_offsetY: 0,
44      u_originX: 0.5,
45      u_originY: 0.5,
46      u_worldWidth: 0,
47      u_worldHeight: 0,
48    },
49    undefined,
50    1.0 // speed
51  );
52
53  // Cleanup
54  window.addEventListener('beforeunload', () => {
55    shader.dispose();
56  });
57}