Focus Breath

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
"use client";
 
import {
  forwardRef,
  useEffect,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
 
export type FocusBreathWidgetProps = Readonly<
  {
    // Title shown below the breathing circle.
    label?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Guided breathing widget — circle grows on inhale and shrinks on exhale
export const FocusBreathWidget = forwardRef<
  HTMLDivElement,
  FocusBreathWidgetProps
>(({ className, label = "Breathe", ...props }, ref) => {
  // Alternates every 4 seconds between inhale and exhale
  const [phase, setPhase] = useState<"inhale" | "exhale">("inhale");
  // Circle scale: larger on inhale, smaller on exhale
  const [scale, setScale] = useState(0.85);
 
  // Flip inhale ↔ exhale on a fixed 4s rhythm
  useEffect(() => {
    const timer = globalThis.setInterval(() => {
      setPhase((p) => (p === "inhale" ? "exhale" : "inhale"));
    }, 4000);
    return () => globalThis.clearInterval(timer);
  }, []);
 
  // Resize the outer ring whenever the phase changes
  useEffect(() => {
    setScale(phase === "inhale" ? 1 : 0.75);
  }, [phase]);
 
  // Outer ring scales with the breathe cycle; inner circle shows inhale/exhale label
  return (
    <div
      ref={ref}
      data-slot="focus-breath-widget"
      className={cn(
        "flex h-44 w-44 flex-col items-center justify-center overflow-hidden rounded-3xl border border-neutral-100 bg-white font-sans shadow-lg shadow-black/5 select-none",
        className,
      )}
      {...props}
    >
      <div
        className="flex h-24 w-24 items-center justify-center rounded-full bg-neutral-100 transition-transform duration-4000 ease-in-out"
        style={{ transform: `scale(${scale})` }}
      >
        <div className="flex h-16 w-16 items-center justify-center rounded-full border border-neutral-100 bg-white">
          <span
            className="text-[10px] font-semibold tracking-widest text-neutral-500 uppercase"
            aria-live="polite"
          >
            {phase}
          </span>
        </div>
      </div>
      <p className="mt-3 text-xs font-medium text-neutral-600">{label}</p>
    </div>
  );
});
 
FocusBreathWidget.displayName = "FocusBreathWidget";