02 / Media & Entertainment
Entertainment
Platform
Frontend engineering for an entertainment platform's official website. Delivered a scroll-driven hero animation system with GSAP, lifted the Lighthouse performance score from 38 to 73, and implemented a three-layer GDPR/CCPA compliance architecture for age-gated users.
entertainment platform
Role
Title
Frontend Engineer
Sector
Media & Entertainment
Scope
Performance · Animation · Compliance
Context
The client is a major entertainment group's official gaming hub, showcasing games across its IP portfolio. The site is built on Next.js with Contentful as the CMS, and runs a complex hero section driven by GSAP animations synchronized with native scroll events.
My engagement covered three distinct workstreams: performance engineering (Core Web Vitals), scroll-driven animation refinement, and a compliance architecture to suppress ad and analytics tracking for users under 18, a requirement driven by GDPR and CCPA obligations.
Contributions
Core Web Vitals
Audited and resolved the root causes behind a Lighthouse score of 38. Applied targeted fixes, video preload strategy, CLS elimination via inline opacity, and deferred third-party scripts, bringing the score to 73 without touching the animation design.
GSAP Hero Animation
Worked within a complex scroll-driven animation system using GSAP and native scroll listeners. The hero layout uses a computed font-size and video-height system (computeHeroLayout) that adapts to both viewport width and height constraints simultaneously.
Age Gate Compliance
Designed and implemented a three-layer system to suppress ad and analytics tracking for under-18 users: (1) boot-time CMP audience via the CMP command queue, (2) in-session call on form submission via a dedicated CMP helper, (3) GTM dataLayer fallback before any tag fires.
Contentful CMS Integration
Wired the hero video and poster image to Contentful, video is served via YouTube embed, poster via Contentful Assets. This eliminated the original 41 MB local video bottleneck and made content fully editable without a deploy.
Bundle Optimization
Removed four unused dependencies (shadcn, sonner, base-ui, next-themes) and their associated CSS imports. Ran full bundle analysis identifying 180 KB of over-bundled Radix UI (umbrella package) and 129 KB of framer-motion as the next optimization targets.
Tealium & Adobe Analytics
Extended the utag_data initialization script to read the age-gate localStorage flag on every page load, ensuring Tealium and Adobe Analytics receive the u18 signal consistently across sessions, not just at form submission.
Performance Results
All metrics measured with Lighthouse v13 against a local production build (pnpm build && pnpm start), with 4x CPU throttling simulating a mid-range device. The LCP ceiling of ~10 s is a known trade-off of the opacity-0 intro animation, not a network or asset issue.
Metric
Before
After
Performance Score
38
73/ 100
Total Blocking Time
830 ms
160 ms
Cumulative Layout Shift
0.452
0
Speed Index
9.7 s
1.6 s
First Contentful Paint
1.3 s
1.4 s
Key Engineering Decisions
Decision
preload="none" + poster instead of autoPlayOutcome
TBT dropped from 830 ms to 160 ms. Browsers ignore preload hints when autoPlay is set, removing autoPlay was the critical fix. GSAP calls video.play() via JS after the intro sequence, so behavior is identical to the user.
Decision
optanon SDK moved to afterInteractiveOutcome
The platform's CMP SDK (~260 ms execution) was loading beforeInteractive, blocking FCP on every page. Moving it to afterInteractive removed it from the critical path with no user-visible compliance impact.
Decision
CLS fix via inline opacity: 0 on gradient divsOutcome
The hero gradients were causing a 0.452 CLS score because they rendered opaque before GSAP animated them in. Setting opacity: 0 inline (matching GSAP's starting state) eliminated the shift entirely, CLS went to 0.
Decision
CMP cmd queue for age-gate complianceOutcome
The CMP SDK loads asynchronously. Rather than waiting for it, the boot script pushes setAudience(CHILD_DIRECTED) onto the cmd queue immediately on page load when the under-18 flag is active, the SDK processes it whenever it's ready.