Qira - Quran App
A quiet Quran reading and listening app built with Expo and React Native, featuring a vertical chapter carousel, Arabic calligraphy typography, audio recitation with a progress ring, and a restrained design system.
Role
Designer & Developer
Duration
Ongoing
Team Size
1
Qira is a Quran reading and listening app designed around a single principle: get out of the way of the content. The home screen is almost entirely empty, with a vertical snap carousel of all 114 chapters, each card showing the surah name in a custom Arabic calligraphy font, metadata pill badges, and an icon tray for favorites, notes, tafsir, and audio. Audio playback is accompanied by a canvas-drawn gradient progress ring. Cards flip with a 3D perspective animation to reveal the chapter introduction. The color system is deliberately restrained, with a single green accent and carefully stepped grays for both light and dark mode. Every icon comes from the Solar BoldDuotone set for visual consistency. Animations run on the UI thread via Reanimated, keeping gesture response immediate and physical.
- Rendering Arabic calligraphy glyphs faithfully at any size
- Building a snap carousel with physical spring physics
- Designing a dark mode with its own palette rather than inverted light mode values
- Keeping the interface calm while still surfacing all necessary actions
- Loaded custom surah glyph font for calligraphic names, plus Amiri for body Arabic text
- Used Reanimated on the UI thread with interpolated scale, opacity, and spring snapping
- Designed light and dark palettes in parallel with distinct accent tones and contrast steps
- Restricted the accent color to a single green and grouped actions in a compact icon tray
