cosmic canvas

Inspiration The idea came from wanting a more meaningful way to track emotions — not as graphs or logs, but as something beautiful and personal. I imagined a universe where every mood becomes a glowing star and clusters of emotions form constellations, giving a visual story of my emotional journey.

What it does Cosmic Canvas transforms your emotions into stars on a dynamic, interactive starfield. Each entry logs mood, energy, and focus, visualized by color, glow, and motion. Constellations form automatically based on mood similarity, giving structure to personal or community-wide emotional maps.

How I built it I used HTML5 Canvas for performance-driven rendering, React for UI logic, and a modular emotion input panel with custom mood/color handling. Stars animate with orbital motion, and constellations dynamically connect based on shared colors. A glassmorphic "+" button opens the panel, which adapts to screen size and updates the canvas in real-time.

Challenges I ran into Balancing animation smoothness (60fps) with hundreds of objects on screen.

Creating a natural constellation algorithm without hardcoding positions.

Ensuring responsive UI without breaking immersion (especially on smaller screens).

Preventing modal panels from overlapping the watermark or essential view zones.

Accomplishments that we're proud of Implementing orbit-based star motion that changes with focus level.

Creating a smooth zoom + pan experience with drag gestures.

Designing a visually satisfying constellation formation based on emotional similarity.

Making the canvas emotionally meaningful instead of purely decorative.

What I learned Advanced Canvas rendering techniques like viewport culling and shadow optimization.

Building responsive emotional interfaces that blend UI/UX with meaning.

Handling complex interactivity without external libraries — just React + Canvas.

Thinking spatially and emotionally at the same time to design a unique user experience.

What's next for Cosmic Canvas I want to personalize it further — let users build their own constellations over time, attach journal entries to stars, and even export star maps. I'd love to experiment with AI-powered quote suggestions based on mood, and maybe evolve it into a daily mood diary that lives in a galaxy of feelings — private, beautiful, and deeply human with moving constellations effects to portray our universe in a wonderful way.

Built With

• html5
• react
• tailwind
• typescript
• vite