Solarium: cómo construí un modo de estudio sin distracciones

Este es un experimento para probar el blog del portfolio. Todo lo que ves aquí está escrito en un fichero .mdx y renderizado con MDX + Next.js.

La idea

Lumma es una app de notas para estudiantes. Su pieza central es Solarium, un modo de estudio enfocado donde el progreso del día se representa con una metáfora solar: el sol amanece, llega al mediodía y se pone según los minutos que estudias.

El objetivo era simple: que estudiar se sintiera como ver amanecer, no como completar una barra de progreso más.

Decisiones que tomé

1. Sin sidebar en la sesión activa — todo lo que distrae desaparece.
2. Timer flotante colapsado por defecto en una esquina.
3. Pestañas multi-herramienta (editor, tareas, tablero) sobre tu material.

El temporizador

Soporta tres modos de sesión:

• Pomodoro — 25 min de foco, 5 de descanso.
• Sprint — duración fija que tú eliges.
• Libre — sin límite, el sol se pone cuando tú decides.

Código

El estado de la sesión se gestiona con un hook sencillo:

function useSessionTimer(mode: "pomodoro" | "sprint" | "libre", duration: number) {
  const [elapsed, setElapsed] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setElapsed((e) => e + 1), 1000);
    return () => clearInterval(id);
  }, []);

  return { elapsed, remaining: Math.max(duration - elapsed, 0) };
}