Focus mode as a purple moon mascot — tap to toggle DND and watch the expression shift. Makes a utilitarian setting feel a little human.
Free · copy & paste ready
Components / Docs
Activity
7 components you can copy and paste into your React or Next.js project. Each includes setup steps, source code, and a live preview.
Components
7 ready to copy — open any card for full setup and source.
inhale
Breathe
A breathing guide that pulses between inhale and exhale every four seconds. One tap to start — useful in wellness or focus flows.
Free · copy & paste ready
72
BPM
Heart rate in the DND face layout — mascot at the bottom, BPM above the dial, soft pulse on the ring.
Free · copy & paste ready
Tall bottle card — count at the top, water level rises inside a simple bottle outline. Tap to log a glass.
Free · copy & paste ready
Dark pomodoro timer — thin ring, split monospace time, tap to start or pause. Polished to match the DND card size and proportions.
Free · copy & paste ready
87
Good Sleep
7h 24m
Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below.
Free · copy & paste ready
Today
8,432
steps today
Goal 10,00084%
Editorial step stat — light wide card, large number, goal in a quiet footer row. No progress bars or icons.
Free · copy & paste ready