Synthetic People
A cinematic, motion-forward landing page for an AI startup redefining synthetic media. The brief demanded an experience that felt as futuristic as the technology it represented using scroll-driven animation to guide visitors through a narrative rather than a page.
What We Built
Synthetic-People is a cutting-edge AI company operating in the synthetic media space creating AI-generated human personas for marketing, content, and training data pipelines. Their landing page needed to communicate a complex technological proposition in a visually arresting, immediately legible way.
We built a React-based landing page where GSAP ScrollTrigger drives the entire narrative. As the visitor scrolls, hero text morphs, sections animate into existence, and product demonstrations unfold cinematically. The result is a page that feels closer to an interactive film than a static website.
Problems We Solved
Communicating Abstract Technology
AI synthetic media is notoriously hard to explain. A text-heavy static page would fail to convey the capability — the animations needed to demonstrate the product, not just describe it.
Animation Performance on Mobile
Heavy GSAP timelines can destroy mobile battery and frame rates. Every animation had to be profiled and optimised to maintain 60fps on mid-range Android devices.
Scroll Jank Risk
Multi-layered parallax and pin-based scroll effects can create jarring jank if not engineered carefully. Integrating Lenis smooth scroll with GSAP's ScrollTrigger required precise synchronisation.
Accessibility Compliance
Scroll-dependent animations must respect prefers-reduced-motion to remain accessible. All animations were wrapped in media query checks with static fallbacks.
Technical Architecture
We architected the page as a sequence of GSAP timeline contexts — each section owns its own gsap.context() instance, ensuring clean teardown on route changes and preventing memory leaks in the React lifecycle.
ScrollTrigger pins were used sparingly and precisely: only three pinned sections in the entire scroll sequence, each releasing cleanly without leaving phantom space. We used CSS will-change: transform on animated elements to force GPU compositing, eliminating layout thrashing entirely.
Lenis handles smooth native scrolling, piping scroll events into GSAP's ticker to maintain perfect synchronisation between the smooth virtual scroll position and animation scrub progress — a setup that eliminated the jitter common in simpler parallax implementations.
What Was Built
Cinematic scroll-driven narrative sequences
GSAP timeline-based hero text animations
ScrollTrigger-powered section reveals
Custom cursor with magnetic hover states
Smooth Lenis scroll integration
Responsive layout with motion safe fallbacks
The Real Product
GPU-Composited Animations
All transforms forced to GPU via will-change and translateZ — zero layout paints.
Smooth Scroll Integration
Lenis feeds scroll velocity into GSAP's ticker at 60fps on desktop and mobile.
Reduced Motion Support
All scroll-triggered animations respect prefers-reduced-motion for accessibility.
Results & Impact
60fps
Animation Performance
GPU-composited transforms ensured buttery animations on all devices.
↑ 55%
Engagement Rate
Scroll-triggered storytelling dramatically increased time-on-page versus the previous static site.
92+
Lighthouse Score
Animation library loaded only on interaction — no render-blocking or CLS regression.
Need Motion-Forward Design?
Build a Cinematic Landing Page
Scroll-driven storytelling with GSAP, tailored to your brand's visual identity.