UUbaidullah
  • Work
  • About
  • Writing
  • Now
  • Uses
  • Playground
Let's build something that actually ships.

I take on a small number of product engineering engagements at a time. If you're building something AI-shaped and need someone who can own end-to-end, that's where I'm useful.

Start a conversation
Sitemap
  • Work
  • About
  • Writing
  • Now
  • Uses
  • Playground
  • Contact
Elsewhere
  • GitHub
  • LinkedIn
  • Instagram
  • Email
© 2026 Ubaidullah. Built in Pakistan.
Next.js · React 19 · Tailwind v4 · Vercel
All work
ShippedSide projectFrontend Engineer

Animated Landing

A landing page that proves you can have complex motion and still hit a 95+ Lighthouse score.

95+
Lighthouse score
performance band with full motion intact
60fps
Scroll & parallax
GPU-only transforms
0
Layout thrash
no measure→mutate in the hot path
The problem

Most 'animated' marketing pages either run at 30fps and feel like syrup, or strip themselves down to nothing to look good on PageSpeed. There's a sweet spot where the page feels alive AND scores well — and most teams stop trying after the first regression.

The approach

Treated every animation as a budget question. GPU-composited transforms only; no layout thrash. Framer Motion for orchestration, GSAP for the timeline-heavy bits. Heavy scroll work goes through `requestAnimationFrame` so it can't block the main thread. Critical CSS, deferred everything else.

The outcome

A landing that breathes — scroll-triggered reveals, parallax depth, glass panels that don't feel like 2014 — while still hitting the green Lighthouse bands.

What I owned
  • 01Architected the motion layer — Framer Motion + GSAP combined for orchestration vs. timelines.
  • 02Implemented scroll-triggered effects, parallax interactions, and glassmorphism design at 60fps.
  • 03Performance-engineered the page to hit 95+ Lighthouse while keeping the motion intact.
Stack
ReactTailwind CSSFramer MotionGSAP
Previous
Crown Kabab