Introducing Focus Time! 🧠 Excited to

Introducing Focus Time! 🧠 Excited to share my submission for the Figma × Contra Makeathon.

Focus Time turns your focus sessions into a game. It's designed with neurodiversity accessibility in mind, especially for ADHD users, but works for anyone who struggles with distraction, motivation, or just getting started.

Live URL: https://hazy-cost-79611241.figma.site

Figma Community link: https://www.figma.com/community/file/1649657429531880491/focus-time

What it does

You build a personal pinboard: a mood board with sticky notes, bullet lists, checklists, stickers, and up to 3 images that stays visible while you work. The checklist you add there automatically connects to the timer. When you're done designing your pinboard, you click Done and a snapshot is saved locally that same image appears as your wallpaper during the focus session, keeping your goals in sight.

The timer runs in two modes: standard count-up (better for ADHD no interruptions, no pressure) and Pomodoro (25 min focus / 5 min rest, for neurotypicals or structured workers). During the session, motivational pixel-art speech bubbles appear on screen every 20 minutes reminders to hydrate, stretch, rest your eyes, and avoid your phone with a subtle retro sound. Every time you complete a task, a celebration bubble appears too.

Scoring system

When you stop the timer, you're asked how you're feeling. That mood, combined with your focus time, task completion rate, and session behavior, generates a full stat breakdown:

HP: Health balance (hydration, rest, session length)

MP: Focus quality (work/rest/distraction balance)

STR: Strength (how well you managed distractions)

MOT: Motivation (mood balance throughout)

WIS: Wisdom (how much of your checklist you finished)

DET: Determination (the sum of STR + MOT + WIS)

Sessions under 20 minutes get heavily penalized. The scoring is intentionally designed to reward sustained, balanced work over quick bursts.

Power-ups

You can earn power-ups during and after a session things like 😊 Good Mood Task, ⚡ Fast & Successful, 🎯 Checklist Champion, and the rare ❓ Super Rare Box (finish all tasks, no distractions, balanced HP and MP). When you earn one mid-session, a retro victory sound plays and an animated popup appears on screen.

Body doubling

For ADHD users who work better with someone else "in the room," there's a body doubling panel with three modes: Lofi Girl (music and ambient animation), ADHD Focus (task-focused, no break videos), and Pomodoro for Neurotypicals (structured cycles). The panel supports fullscreen and lets you switch between videos.

Sharing

After each session you get an overall score card. You can export it as PDF, download it as an image, copy a plain-text summary, or share directly to X, Bluesky, LinkedIn, WhatsApp, Telegram, Reddit, Threads, Discord, TikTok, and more. You can also send it by email — it opens your mail client with the subject and body pre-filled with all your metrics.

Tech

Built with Figma Make using React + Vite + TypeScript. No backend, no database, everything runs locally in the browser using localStorage. Images are drawn to canvas for download. Audio uses the Web Audio API (no external libraries). Fully client-side.