Front-End Developer for Interactive Data Visualization Project
I am building a web-based visualization that helps people visually understand the structure of a short text (Surah Al-Kawthar from the Qur’an). The goal is not a typical website or dashboard. It is closer to an interactive data story similar to modern scrollytelling pages used by the New York Times, Apple product pages, or interactive academic visualizations.
The page will guide the viewer through a sequence of animations showing structural patterns in the text.
Example flow:
Arabic verses appear on screen (large typography).
The verses resize to represent syllable growth.
The center verse becomes highlighted.
A circular / arc diagram appears showing the mirrored structure.
Subtle geometric layers appear representing structural relationships.
The experience should feel minimal, elegant, and cinematic.
This is a single-page interactive experience, not a full web application.
Build a single-page scroll experience with approximately 6 sections:
Intro text display
Syllable growth visualization
Center verse highlight
Ring / arc diagram animation
Structural layer explanation
Closing section
Design Style
Minimal, cinematic style similar to:
• Apple product pages
• Stripe interactive pages
• NYTimes data visualizations
Key elements:
• Dark background
• Arabic typography as the main visual focus
• Subtle geometric visuals (rings, arcs, radial guides)
• Smooth scroll-driven animations
Apply tot his job
Apply To this Job
The page will guide the viewer through a sequence of animations showing structural patterns in the text.
Example flow:
Arabic verses appear on screen (large typography).
The verses resize to represent syllable growth.
The center verse becomes highlighted.
A circular / arc diagram appears showing the mirrored structure.
Subtle geometric layers appear representing structural relationships.
The experience should feel minimal, elegant, and cinematic.
This is a single-page interactive experience, not a full web application.
Build a single-page scroll experience with approximately 6 sections:
Intro text display
Syllable growth visualization
Center verse highlight
Ring / arc diagram animation
Structural layer explanation
Closing section
Design Style
Minimal, cinematic style similar to:
• Apple product pages
• Stripe interactive pages
• NYTimes data visualizations
Key elements:
• Dark background
• Arabic typography as the main visual focus
• Subtle geometric visuals (rings, arcs, radial guides)
• Smooth scroll-driven animations
Apply tot his job
Apply To this Job