I'm on Day 19 of building MicroHabit AI in public. 30 days. Daily shipping. ProductHunt launch on March 29.
Today, I completely transformed the Habits tab from "functional" to "futuristic."
What is MicroHabit AI?
TL;DR: A habit tracker with AI coaching that predicts which habits you'll break and nudges you before you do.
The problem: Most habit trackers just track. They don't help you STAY consistent.
My solution:
- 📊 Track daily habits with streaks
- 🤖 AI analyzes your patterns and predicts failures
- 💬 Get personalized nudges BEFORE you break your streak
- ⏰ Smart reminders at optimal times
- 📅 Visual calendar showing your consistency
- 💀 Weekly "roast" feature (savage but supportive feedback)
Free tier: 5 AI predictions/day, current month calendar
Premium: Unlimited AI, full history, custom scheduling
Traction so far: 25 active users. 8 countries. 64% guest-to-signup conversion. $0 MRR (launching payments this week).
The Challenge
Yesterday, my UI looked... functional. It worked. But it didn't feel premium.
Users couldn't find features (they were hidden in a ⋮ menu). The calendar was plain HTML tables.
Browser alerts were ugly white boxes breaking the dark theme.
I needed to fix this before ProductHunt.
What I Shipped Today
✨ 1. Breathing Glow Buttons
The buttons literally pulse with life.
**Key decisions:
Multi-layer drop-shadows for depth
2.8s duration (feels natural, not rushed)
infinite alternate creates the breathing effect
Cyan + green for calendar, purple + violet for schedule
📅 2. Glowing Calendar History
Replaced HTML tables with a custom grid that shows:
✅ Completed days (green glow with pulsing animation)
❌ Missed days (subtle red highlight)
📆 Today (cyan ring)
.cal-day.done {
background: rgba(0,255,157,0.08);
border-color: rgba(0,255,157,0.5);
box-shadow: 0 0 14px rgba(0,255,157,0.2);
animation: glowGreen 2.5s ease-in-out infinite alternate;
}
@keyframes glowGreen {
from {
box-shadow: 0 0 10px rgba(0,255,157,0.2);
}
to {
box-shadow: 0 0 22px rgba(0,255,157,0.4);
}
}
The completed days literally breathe. It's mesmerizing.
💎 3. Dark Glassmorphism Modals
Goodbye ugly browser alerts. Hello custom modals:
.modal-content {
background: #0d0b1e !important;
backdrop-filter: blur(20px);
border: 1px solid rgba(0,229,255,0.3);
border-radius: 18px;
}
Now when you delete a habit or set a reminder, you get:
Dark themed modal (not white!)
Yes/No buttons (not just OK)
Color-coded by action (red for delete, cyan for confirm)
Smooth slide-up animation
🎯 4. Visible Action Buttons
Hidden ⋮ menu → Visible buttons with icons:
[⏰ Remind] [🎯 Goal] [📅 History] [📝 Note] [🗑️ Delete]
Each color-coded:
Purple for reminders
Cyan for goals
Green for history
Blue for notes
Red for delete
Mobile-friendly. No hover required. Discoverable.
Technical Stack
100% Vanilla:
No frameworks
Pure CSS animations (GPU accelerated)
Custom SVG icons
Responsive design
Why vanilla?
Fast (no bundle size)
Simple (no build step)
Educational (anyone can read the code)
Portable (works anywhere)
Performance
All animations run at 60fps because:
CSS animations (not JavaScript)
GPU accelerated (transform, filter)
No layout thrashing
Optimized drop-shadows
Lighthouse score: Still 95+ 🚀
What I Learned
- Multi-layer drop-shadows create depth One shadow = flat. Four shadows = dimensional.
- Breathing animations need the right timing Too fast (1s) = anxiety Too slow (5s) = boring Sweet spot: 2.5-3s
- Color psychology matters Cyan/green = growth, success (calendar) Purple/violet = wisdom, planning (schedule)
- !important isn't always evil When modals inherit conflicting styles, !important saves you.
- Users need Yes/No, not just OK Browser confirms have no cancel. Custom modals do. Before → After Before: Hidden features (⋮ menu) Static design Ugly white alerts Plain HTML tables After: Visible action buttons Breathing animations Dark glassmorphism modals Glowing calendar grid What's Next Tomorrow or today (Day 20 or Day 19): AI Coach tab redesign March 29: ProductHunt launch 🚀 Live now: Try MicroHabit AI Questions for You What's your favorite CSS animation technique? Do breathing/pulsing effects annoy you or draw you in? Should I open-source the UI components? Building in public. Shipping daily. 10 days until launch. Follow along: Twitter: MicroHabitAI Linkedin: Fancy Treaz
See before and after
Top comments (0)