Web Visualization Developer

About

• Build a single‑page interactive experience that visualizes the structure of Surah Al‑Kawthar from the Qur’an.
• The page will guide viewers through a sequence of animations showing structural patterns in the text, using a minimal, elegant, cinematic style.

Responsibilities

• Design and develop a scroll‑driven narrative with approximately six sections:
  • Intro text display
  • Syllable‑growth visualization
  • Center verse highlight
  • Ring / arc diagram animation
  • Structural‑layer explanation
  • Closing section
• Implement large Arabic typography with responsive resizing to represent syllable growth.
• Create a circular/arc diagram that reveals the mirrored structure of the verses.
• Add subtle geometric layers (rings, arcs, radial guides) to illustrate structural relationships.
• Ensure smooth, scroll‑driven animations that feel cinematic and minimal.
• Optimize for performance and cross‑browser compatibility on a dark‑background layout.

Requirements

• Proven experience building web‑based visualizations and scrollytelling pages.
• Strong proficiency in HTML, CSS, and JavaScript (e.g., GSAP, ScrollTrigger, D3, or similar animation libraries).
• Ability to work with Arabic typography and right‑to‑left (RTL) layouts.
• Familiarity with design aesthetics of Apple product pages, Stripe interactive pages, and NYTimes data visualizations.
• Good eye for minimal, cinematic design and subtle geometric visual elements.

Design Style

• Minimal, cinematic aesthetic.
• Dark background throughout the experience.
• Arabic typography as the primary visual focus.
• Subtle geometric visuals (rings, arcs, radial guides) that enhance the storytelling without overwhelming the content.

Key Elements

• Dark background.
• Large, high‑quality Arabic typography.
• Smooth, scroll‑driven animations.
• Subtle geometric layers (rings, arcs, radial guides).
• Six‑section narrative flow guiding the viewer through the structural analysis.