Muhammed Mubashir V

Mubaan home
← Back to Work

Creative Development / Scroll Sequence

Dubai Skyline Sequence Hero

mubaan.online · 2026

Overview

Designed and engineered a 239-frame cinematic work-page sequence where a Dubai skyline grows out of motherboard circuitry through scroll-driven canvas rendering.

Problem

The work page needed a premium opening moment that felt aligned with the home-page cinematic language while still loading quickly, staying smooth on mobile, and supporting SEO, social previews, and accessible crawlable content.

Approach

Built a sticky canvas sequence powered by RAF-scheduled draws, progressive frame preloading, mathematically consistent contain-fit rendering, and a representative poster fallback for search engines and social crawlers. The visual treatment blends the skyline sequence into the site theme with starfield overlays, soft edge blending, and a themed handoff into the work archive.

Results

  • + A cinematic work-page entry that matches the site’s premium dark-tech language
  • + Smooth sequence playback across desktop and mobile with reduced flicker risk
  • + Search-friendly image discovery and metadata for the hero poster frame

Deliverables

  • - 239-frame scroll-driven work-page hero sequence
  • - Canvas renderer with frame fallback and no queued draws
  • - Sequence prewarming tied into the main intro experience
  • - Poster-image fallback, ImageObject schema, and image sitemap support
  • - Dedicated work case study page documenting the build system

Tools

Astro 4 React TypeScript Framer Motion HTML5 Canvas Tailwind CSS Vite

Languages

TypeScript TSX Astro CSS

Techniques

  • - requestAnimationFrame draw scheduling
  • - progressive image preloading
  • - sticky scroll pinning
  • - canvas contain-fit math
  • - blurred edge extension from the same frame source
  • - image fallback for crawlers and social previews
  • - scroll-synced motion values
  • - mobile-aware concurrency tuning
↗ Discuss a similar project ← All work

Explore More

Related case studies

Web App / Growth Ops

180 Degree - Healthy Meal Plans + Web App Plugin

Built a structured meal-planner system with plugin workflows and operational controls for plan management.

View case study →

Performance Marketing

bluemark Real Estate - Luxury Lead Gen System

Developed a real-estate lead engine using creative testing, segmented audience strategy, and WhatsApp-first follow-up flows.

View case study →

Service Context

Services connected to this project

If you are looking for the same type of outcome, start with the service pages that match this case study's execution model.

Technical SEO

Dubai Technical SEO and GEO, Site Architecture, and Search Visibility

Technical SEO and GEO for Dubai businesses that need clean crawl paths, strong internal linking, location-relevant content architecture, schema, AI-discovery readiness, and search visibility foundations that support long-term ranking.

Open service page →

Web Development

Dubai Web Development and Web App Systems

Dubai web development and web-app systems for businesses that need fast websites, lead-ready landing pages, WordPress workflows, plugin logic, operational dashboards, and conversion-focused build quality.

Open service page →

AI Systems

Dubai AI Systems, Automation, and GEO

AI systems, automation, and GEO for Dubai businesses that need AI-assisted workflows, operational automation, prompt-ready content systems, and stronger discoverability across AI-assisted search experiences.

Open service page →