Skip to content

fix(laserflow): correct aspect-ratio scaling in shader#903

Open
EunHyeokJung wants to merge 1 commit intoDavidHDev:mainfrom
EunHyeokJung:fix/laserflow-aspect-ratio
Open

fix(laserflow): correct aspect-ratio scaling in shader#903
EunHyeokJung wants to merge 1 commit intoDavidHDev:mainfrom
EunHyeokJung:fix/laserflow-aspect-ratio

Conversation

@EunHyeokJung
Copy link
Contributor

@EunHyeokJung EunHyeokJung commented Feb 28, 2026

Summary

Fixes inconsistent verticalSizing / verticalBeamOffset behavior in LaserFlow on portrait/mobile aspect ratios.

Fixes #896

Root Cause

mainImage used a single scalar scale derived from width:

float sc = 512.0 / iResolution.x * 0.4;

That scalar was applied to both X/Y, so Y mapping changed incorrectly when aspect ratio changed (especially portrait).

Changes

Applied the same shader fix across all 4 variants:

  • src/content/Animations/LaserFlow/LaserFlow.jsx
  • src/tailwind/Animations/LaserFlow/LaserFlow.jsx
  • src/ts-default/Animations/LaserFlow/LaserFlow.tsx
  • src/ts-tailwind/Animations/LaserFlow/LaserFlow.tsx

Updated from scalar scale to axis-aware scale:

  • float sc -> vec2 sc = (512.0 / iResolution.xy) * 0.4
  • offset mapping updated to use sc.x / sc.y

Regenerated registry artifacts:

  • public/r/LaserFlow-JS-CSS.json
  • public/r/LaserFlow-JS-TW.json
  • public/r/LaserFlow-TS-CSS.json
  • public/r/LaserFlow-TS-TW.json

Verification

  • Reproduced with the same props across aspect ratios:
    • horizontalSizing={0.5}
    • verticalSizing={0.9}
    • verticalBeamOffset={0.0}
  • Compared behavior between landscape (16:9) and portrait (9:16)
  • Ran:
    • npm run registry:build
    • npm run build

Visual Comparison

360x640

Before (main) After (fix)
before-360x640 after-360x640

1024x576

Before (main) After (fix)
before-1024x576 after-1024x576

Scope

  • Bug fix only
  • No API/prop changes

- apply axis-aware uv scaling for portrait/landscape consistency

- regenerate LaserFlow registry artifacts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant