Part 1: Introduction & Layout Overview
What is the Content Creator?
What it does: A high-performance in-browser studio to produce cinematic Quranic videos (TikTok, Instagram Reels, YouTube Shorts, Landscape) and high-resolution posters with zero software installation.
How to use: Everything runs directly on your device GPU via WebCodecs hardware acceleration. Zero server uploads, completely private, and ultra-fast.
Interface Anatomy
What it does: The left sidebar houses 5 categorized settings drawers (Buttons 1 to 5). The right canvas provides a live interactive preview screen.
How to use: Click any drawer to expand settings, sliders, and color controls. Press the Play button on the canvas toolbar to preview motion and audio sync.
Part 2: Drawer 1 — Surah & Verse Selection
Surah Selection Dropdown
What it does: Choose any of the 114 Surahs from the Holy Quran.
How to use: Click the dropdown and type the Surah name or number to filter instantly.
From Verse & To Verse Range
What it does: Specify the starting and ending verse numbers for the video sequence.
How to use: Set From Verse to 1 and To Verse to 3 to generate a multi-verse sequence that transitions seamlessly.
Watermark & Branding
What it does: Add your social handle, channel logo, or page watermark to the canvas.
How to use: Toggle the switch ON, enter your brand text (e.g. @QuranicReminders), and adjust opacity.
Canvas Margins & Spacing
What it does: Fine-tune the inner safe padding of the video canvas.
How to use: Drag the slider to expand or contract spacing around text.
Part 3: Drawer 2 — Arabic Typography & Fonts
Arabic Font Family
What it does: Select the calligraphy and script style for the Quranic verses.
How to use: Choose from official Madinah Mushaf King Fahad Complex V1 (QCF), classical Amiri, or modern Scheherazade New.
Font Size & Color Picker
What it does: Adjust verse font size and color hue.
How to use: Slide the size controller and pick custom hex colors or color presets.
Text Stroke & Shadow
What it does: Add an outline border around Arabic letters to ensure high contrast over any background.
How to use: Turn ON the stroke switch, choose a contrasting color (e.g., dark charcoal), and set width to 1.5px-2px.
Positional Offsets (X & Y Margins)
What it does: Shift the Arabic text block left, right, up, or down.
How to use: Use the numeric controls to adjust vertical and horizontal offsets.
Part 4: Drawer 3 — Backgrounds & Visual Effects
Solid Colors & Aesthetic Gradients
What it does: Choose from deep minimal solids or curated multi-tone aesthetic gradient presets.
How to use: Click any palette thumbnail to apply instantly to the preview canvas.
Islamic Geometric Patterns
What it does: Add sacred arabesque architectural geometry overlays.
How to use: Select a pattern preset and adjust opacity between 15% and 30%.
Custom Image & Video Loop Upload
What it does: Upload your own imagery or high-definition looping cinematic nature/sky video backgrounds.
How to use: Click "Upload" and choose any JPG, PNG, or MP4 file from your device.
Background Blur & Dark Overlay
What it does: Apply Gaussian blur and translucent dark tinting over background media.
How to use: Set blur to 4px-8px and dark overlay to 40%-60%.
Ken Burns Cinematic Motion
What it does: Add dynamic camera zoom-in or panning movements to static photos.
How to use: Select "Zoom In" or "Pan Left" from the Ken Burns dropdown.
Part 5: Drawer 4 — Audio Reciters & Word Sync
Reciter Selection
What it does: Choose recitation audio from legendary world-class Qaris.
How to use: Select from Mishary Rashid Alafasy, Abdul Basit, Abdur-Rahman as-Sudais, Mahmoud Khalil Al-Husary, Saad Al-Ghamdi, and more.
Word-by-Word Synced Highlighting
What it does: Illuminates each Arabic word in golden accents in real-time exact synchronization with the recitation audio.
How to use: Keep the toggle switch ON. Highlighting triggers automatically during playback and export.
Silence Trimmer & Gap Eliminator
What it does: Eliminates redundant pauses and silent gaps between verses.
How to use: Activate the switch to ensure a continuous, tight, and engaging recitation rhythm.
Part 6: Drawer 5 — Multilingual Translations
Show Translation Toggle
What it does: Display or hide translated verse meanings below the Arabic text.
How to use: Toggle ON for translated content, or OFF for pure Arabic recitation videos.
Language Selection
What it does: Access authentic translations in 30+ international languages (Bengali, English, Hindi, Urdu, Turkish, French, etc.).
How to use: Select your preferred language from the dropdown menu.
Translation Typography & Positioning
What it does: Customize translation font family, font size, stroke, and vertical offset margin.
How to use: Set size between 16px and 22px and adjust spacing from the Arabic verse.
Part 7: Aspect Ratios & Screen Dimensions
9:16 Vertical (Reels / Shorts / TikTok)
What it does: Full-screen mobile vertical format (1080 x 1920 pixels).
How to use: Click "9:16" in the aspect ratio selector.
16:9 Landscape (YouTube Widescreen)
What it does: Standard desktop widescreen format (1920 x 1080 pixels).
How to use: Click "16:9" in the aspect ratio selector.
1:1 Square & 4:5 Portrait Feed
What it does: Square (1080x1080) and portrait feed (1080x1350) for Instagram and Facebook timelines.
How to use: Click "1:1" or "4:5" for timeline image posts.
Part 8: HD Video Export & Poster Download
Resolution Selector
What it does: Select output quality (720p HD, 1080p Full HD, or 4K).
How to use: Choose 1080p for optimal quality and fast rendering balance.
Export Video Button
What it does: Renders the complete animated video with audio sync directly to MP4.
How to use: Click "Export Video". Watch the live progress percentage bar. The MP4 file downloads automatically when complete.
Download Poster Button
What it does: Instantly captures and saves a crystal-clear PNG image of the current frame.
How to use: Click "Download Poster". Downloads in under 1 second without video rendering.
Creator Pro Tips for Maximum Engagement
💡 For viral shorts: Always use 9:16 vertical ratio, dark aesthetic background, Mishary Alafasy audio, and Word-by-Word sync.
💡 Beginners: Start with 1 verse, test the live preview, and download a poster first to verify typography.
💡 Browser performance: Close heavy background apps before exporting long videos for maximum GPU speed.
Want to read offline?
Save as PDF or Word document for instant offline reference.