[BUG]: animations/laser-flow aspect ratio breaks verticalSizing on portrait/mobile

[LeoPuntus]

Summary

LaserFlow behaves inconsistently on portrait/mobile aspect ratios (e.g. 9:16). With the same props used on desktop (16:9), parameters like verticalSizing (and partially verticalBeamOffset) produce a different visual result: the beam starts too low / does not fill the expected vertical extent.

Expected behavior

Sizing and offsets should be aspect-ratio independent:

• verticalSizing and horizontalSizing should represent consistent relative scaling on any canvas size/orientation.
• A value like verticalSizing={0.9} should look equivalent on 16:9 and 9:16 containers.

Actual behavior

On portrait canvases, the beam is vertically “mis-scaled” because the shader uses a single scalar scale derived from the width (iResolution.x) and applies it to both axes. This makes Y scaling depend on canvas width, breaking the semantics of the sizing props.

Root cause

In mainImage, the shader computes:

• sc = 512.0 / iResolution.x * 0.4
  and then does:
• uv = (frag - C) * sc (same sc for X and Y)

On portrait ratios, smaller width ⇒ larger sc ⇒ incorrect vertical mapping.

Fix (applied & verified)

Use an aspect-correct vec2 sc (independent scaling per axis) and update offsets accordingly:

vec2 C = iResolution.xy * 0.5;
float invW = 1.0 / max(C.x, 1.0);

// aspect-correct scale (X by width, Y by height)
vec2 sc = (512.0 / iResolution.xy) * 0.4;

vec2 uv  = (frag - C) * sc;

// offsets converted consistently to uv units
vec2 off = vec2(
  uBeamXFrac * iResolution.x * sc.x,
  uBeamYFrac * iResolution.y * sc.y
);

vec2 uvc = uv - off;

Reproduction Link

N/A (local reproduction)

Steps to reproduce

1. Render LaserFlow inside a portrait container (9:16), e.g. width: 360px; height: 640px.
2. Use the same props you would use on desktop, for example:
   • verticalSizing={0.9}
   • horizontalSizing={0.5}
   • verticalBeamOffset={0.0}
3. Render the same component inside a landscape container (16:9), e.g. width: 1024px; height: 576px.
4. Compare results:
   • Before fix: portrait canvas shows inconsistent vertical sizing (beam starts too low / reduced vertical coverage).
   • After fix: sizing and offsets match across aspect ratios.

Minimal snippet:

<div style={{ width: 360, height: 640 }}>
  <LaserFlow verticalSizing={0.9} horizontalSizing={0.5} verticalBeamOffset={0.0} />
</div>

<div style={{ width: 1024, height: 576, marginTop: 24 }}>
  <LaserFlow verticalSizing={0.9} horizontalSizing={0.5} verticalBeamOffset={0.0} />
</div>

Validations

• I have checked other issues to see if my issue was already reported or addressed