girliepop

Girliepop is a multi-surface project split into a web SPA and desktop Electron app. The web app runs on React 19, Vite, Tailwind (v4), and serves a dashboard, flow editor, blog, and playground. The desktop app wraps a vanilla JavaScript canvas overlay (click-through, always-on-top, high-DPI aware) for edge-spawning particles, a React settings GUI for monitor and density control, a splash screen, and a main process handling tray integration, auto-start, and IPC. The VS Code theme is a standalone extension published to the marketplace.

The flow editor is the creative centerpiece—a full XyFlow canvas with girliepop-styled nodes (Girliepop, Decision, Note, Data types), gradient edges, a draggable node palette, live preview minimap, and animated connections. Nodes are customizable with emojis and labels. The editor state lives in React hooks (useFlowState) backed by XyFlow's change handlers. The core design language is a refined pastel palette: dusty rose, mauve, sage, champagne, cream, and blush—applied consistently across shadows, gradients, and typography.

The overlay renderer uses canvas 2D context with particle physics for sparkles (twinkling stars), bubbles (translucent circles with glossy highlights), hearts (floating and tumbling), jelly beans (rain effect), and glow orbs (ambient color in corners). Particles spawn and drift within an edge zone (180px from screen boundaries), so the center stays clear for work. The build system is a multi-project orchestration: dev.cjs and build.cjs route through a custom CLI that coordinates Vite for the SPA, tsup for the Electron main process, and electron-builder for packaging. Settings auto-save and sync bidirectionally between tray menu and settings GUI in real time.