Case study
Signature Hero — fullscreen GLSL shader behind the home headline
Visit the live site — it is the proof; this page is the story.
The problem
This portfolio’s hero was static text: it proved nothing about front-end craft at the shader level, while the brief asked for a signature visual — without hurting readability or performance.
What I built, and the key decision
A fullscreen GLSL shader behind the home headline — raw WebGL, no new dependency — with u_time / u_resolution / u_mouse uniforms, a light palette guard so the ink headline stays readable, a static-frame fallback for reduced motion, a capped pixel ratio and a pause when the tab is hidden.
Outcome
The hero is live on the home page with the headline fully readable and the animation calm: no new dependency shipped for it, and the shader component is the only addition to the home bundle. Lighthouse (mobile, Moto G Power, Slow 4G, 5 Nov 2026) measured 100 Performance / 96 Accessibility / 100 Best Practices / 100 SEO, with LCP 0.9s, CLS 0 and TBT 20 ms.
Role & timeline
Designed and built end to end by Ahmed Iqbal — shader, hero integration, QA — in November 2026.