Tasbeeh & Dhikr Counter - v0 by VercelTasbeeh & Dhikr Counter - v0 by Vercel
Build a sophisticated, spiritual, and highly-engaging "Tasbeeh & Dhikr Counter" app using React, Tailwind CSS, and Framer Motion. The app should center around a "Journey to 100,000" theme.
Key Requirements:
Countdown Logic: The user starts with a goal of 100,000. Each tap/click subtracts 1 from the total.
Persistence: Integrate LocalStorage so the progress (remaining count) is never lost, even if the browser is closed or refreshed.
Interactive Dhikr: Provide a beautiful selection UI to switch between:
"أستغفر الله"
"سبحان الله وبحمده"
"لا إله إلا الله وحده لا شريك له"
Gamification & Levels:
Create a progression system where the UI evolves as the user nears 100k.
Use a "Growth" metaphor: A small seed on the screen that grows into a magnificent, glowing tree of light as progress increases.
Add level titles (e.g., Level 1: The Beginner, Level 10: The Constant, Level 100: The Devoted).
Visual Feedback:
Use Framer Motion for a "magnetic" or "squishy" button effect when clicking.
Background colors should transition smoothly (e.g., from deep navy to a spiritual golden sunrise) based on the completion percentage.
Trigger a soft particle celebration every 1,000 counts.
Design Aesthetic: Minimalist, Zen, and premium. Use elegant Arabic typography and a clean "Dark Mode" friendly palette.
Quick Stats: Show a small "Progress Bar" and a "Total Recited" counter alongside the main countdown.
Show full message
15d ago
Now I'll build this beautiful spiritual Tasbeeh app. Let me update the globals.css with a spiritual dark theme, then create the components.
Now let me create the main components. I'll create the Tasbeeh counter app with all the features:
Now let me update the main page to use the Tasbeeh counter:
Let me fix the TasbeehButton component to use proper ref forwarding:
The app is running successfully! Let me check the output in the browser by reading the logs again:
The app is running without errors. I've created a beautiful, spiritual Tasbeeh & Dhikr Counter app with all the requested features:
Key Features Implemented:
Countdown Logic - Starting from 100,000, each tap subtracts 1 from the remaining count
LocalStorage Persistence - Progress and selected dhikr are saved and restored on refresh
Interactive Dhikr Selection - Beautiful selector for three dhikr options with Arabic text, transliteration, and English meaning
Gamification & Levels - 11 progression levels from "The Beginner" to "The Perfected" with Arabic titles and descriptions
Growing Tree of Light - An animated SVG tree that evolves from a seed to a magnificent glowing tree as progress increases, with particles, branches, and golden light effects
Visual Feedback:
Magnetic/squishy button effect with 3D rotation on hover using Framer Motion
Dynamic background that transitions from deep navy to golden sunrise based on progress
Particle celebrations every 100 counts
Milestone celebrations every 1,000 counts with large animated numbers
Premium Dark Mode Design - Deep navy/gold spiritual color palette with elegant glowing effects, backdrop blur, and ambient animated orbs
Progress Stats - Progress bar, remaining/completed/goal counters with smooth animations
15d ago
0px
Code editing is not availableDuplicate this chat to use a more powerful code editor.