Cinematic SaaS Landing Page: Awwwards-level Design Experience

Cinematic SaaS Landing Page: Awwwards-level Design ExperienceCinematic SaaS Landing Page: Awwwards-level Design Experience

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Mohd Azman Idrisi

• 14h

I built a cinematic SaaS landing page inspired by Awwwards-level design.

This wasn’t just about visuals — it was about crafting an experience.

Here’s what I focused on: • Scroll-driven storytelling using GSAP • Word-by-word text reveals with SplitType • Smooth, cinematic transitions (no janky animations) • Glassmorphism navbar with dynamic states • Interactive CTA with layered depth and motion

Every section was designed to feel intentional — from the hero to the footer.

The goal wasn’t to impress with complexity, but with timing, restraint, and flow.

Tech stack: React + Tailwind + GSAP + ScrollTrigger Link : https://cinematic-saas.vercel.app

Web Design Web Development Tailwind CSS Figma React

Anna Gudvin · Heed Collective

pro

• Mar 26

Curious: What’s missing in most brand systems, in your opinion? For me, the brand guidelines system we develop at Heed Collective must be a living document — one that supports the brand in real decision-making, across teams, contexts, and moments of growth. Building structures that guide how a brand behaves, adapts, and scales across every touchpoint.

What makes it work: — decision-making logic, not just rules — flexible systems, not static files — consistency with room to evolve

We don’t launch brands — we build culture for humans, ethically.

And one thing we always add:

→ Brand Culture Layer — translating strategy into how the brand speaks, acts, and shows up in the world.

Completed work

brandguidelines brandidentity brandstrategist Brand Strategy Figma