activity-wheel-motion

1"use client";
2 
3/**
4 * Vibes wheel — a vertical mood picker arranged along a curved arc. Scroll
5 * or click to spring a different vibe into focus; the icon swaps to a
6 * violet "active" fill and a dark indicator slides into the selected row.
7 */
8 
9import { motion } from "framer-motion";
10import { useEffect, useRef, useState } from "react";
11import {
12  BookOpen,
13  Brain,
14  Brush,
15  Cloud,
16  Code2,
17  Coffee,
18  Compass,
19  Feather,
20  Flame,
21  Flower2,
22  Footprints,
23  Gamepad2,
24  Headphones,
25  HeartPulse,
26  Lamp,
27  Lightbulb,
28  Moon,
29  Mountain,
30  Rocket,
31  Snowflake,
32  Sparkles,
33  Sprout,
34  Star,
35  Sun,
36  Waves,
37  Wind,
38  Zap,
39  type LucideIcon,
40} from "lucide-react";
41 
42type Vibe = {
43  name: string;
44  Icon: LucideIcon;
45  bg: string;
46  color: string;
47};
48 
49const VIBES: Vibe[] = [
50  { name: "Focus", Icon: Brain, bg: "#ECE6F8", color: "#6E4DBF" },
51  { name: "Spark", Icon: Sparkles, bg: "#FFEFD0", color: "#D49417" },
52  { name: "Calm", Icon: Cloud, bg: "#DCEAF5", color: "#4A82B5" },
53  { name: "Cozy", Icon: Flame, bg: "#FFDDD0", color: "#DA6034" },
54  { name: "Joy", Icon: Sun, bg: "#FFE7B0", color: "#D9821A" },
55  { name: "Dream", Icon: Star, bg: "#F4DEE9", color: "#BA4F84" },
56  { name: "Rest", Icon: Moon, bg: "#DEE2F0", color: "#4F62A1" },
57  { name: "Flow", Icon: Waves, bg: "#D5EBF1", color: "#2C90A9" },
58  { name: "Grow", Icon: Sprout, bg: "#DEF0D7", color: "#4A8C3A" },
59  { name: "Charge", Icon: Zap, bg: "#FFF3C2", color: "#C99317" },
60  { name: "Wander", Icon: Compass, bg: "#E2EAD9", color: "#6B834E" },
61  { name: "Pulse", Icon: HeartPulse, bg: "#FFE0E2", color: "#C44862" },
62  { name: "Read", Icon: BookOpen, bg: "#EEE6DA", color: "#8A6B45" },
63  { name: "Write", Icon: Feather, bg: "#E6E9F2", color: "#5A6B95" },
64  { name: "Code", Icon: Code2, bg: "#DDEBE3", color: "#3F7C5C" },
65  { name: "Brew", Icon: Coffee, bg: "#EFE0CC", color: "#8A623E" },
66  { name: "Listen", Icon: Headphones, bg: "#E5DEF2", color: "#745EB5" },
67  { name: "Move", Icon: Footprints, bg: "#F2E5DA", color: "#A06A45" },
68  { name: "Chill", Icon: Snowflake, bg: "#DCEBF4", color: "#4685B3" },
69  { name: "Bloom", Icon: Flower2, bg: "#F4DDE9", color: "#B95786" },
70  { name: "Breeze", Icon: Wind, bg: "#DCEEEC", color: "#4A8C8C" },
71  { name: "Bright", Icon: Lightbulb, bg: "#FFF0BD", color: "#C99A1A" },
72  { name: "Boost", Icon: Rocket, bg: "#FFDDE0", color: "#C44A6A" },
73  { name: "Game", Icon: Gamepad2, bg: "#E0E0F0", color: "#6B6BB5" },
74  { name: "Climb", Icon: Mountain, bg: "#DEE5DC", color: "#5C7551" },
75// … truncated