DEV Community

Cover image for Pulse - The Living Workplace Dashboard
Vivek V.
Vivek V. Subscriber

Posted on

Pulse - The Living Workplace Dashboard

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge Holistic Webdev Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Pulse is a revolutionary intranet homepage that reimagines workplace collaboration through the lens of a living, breathing organism. Unlike traditional corporate portals, Pulse visualizes company vitality through biometric-inspired design, real-time data visualization, and organic animations that make the workplace feel alive.

Core Innovation: Biometric Workplace Vitality

The intranet is designed as a living ecosystem where:

  • Company Heartbeat: Real-time pulse visualization showing organizational activity
  • Team Constellations: Interactive star maps representing different departments
  • Knowledge Garden: Resources that grow and bloom based on usage patterns
  • Mood Weather System: Company sentiment displayed as dynamic weather patterns
  • Innovation Pipeline: Ideas flowing like a river through development stages
  • Celebration Fireworks: Animated celebrations for achievements and milestones

Key Features

🫀 Company Heartbeat Visualization

  • Real-time animated ECG-style chart showing company activity
  • Live vital statistics (active users, projects, completed tasks)
  • Pulsing indicators with organic breathing animations
  • Grid-based medical monitor aesthetic

⭐ Team Constellation Map

  • Interactive star map where teams are represented as constellations
  • Twinkling stars with realistic brightness variations
  • Shooting stars for recent achievements
  • Click interactions reveal team information
  • Color-coded by department (Engineering: Blue, Design: Pink, Marketing: Green)

🌱 Knowledge Garden

  • Resources visualized as different plants and growth stages
  • Search functionality with smooth filtering animations
  • Plants "bloom" when frequently accessed
  • Organic swaying animations for living feel
  • Intuitive categorization through plant metaphors

🌤️ Mood Weather System

  • Company sentiment as weather patterns
  • Animated weather icons with floating effects
  • Real-time mood tracking with progress bars
  • Contextual descriptions of team energy levels

🚀 Innovation Pipeline

  • Flowing river visualization for idea progression
  • Animated particles showing movement between stages
  • Real-time counters for each development phase
  • Smooth transitions and organic flow patterns

🎉 Interactive Celebrations

  • Fireworks animations for achievements
  • Birthday and anniversary recognition
  • Interactive celebration buttons
  • Particle effects with realistic physics

Technical Excellence

Accessibility First

  • WCAG 2.1 AA Compliant: Full keyboard navigation, screen reader support
  • Reduced Motion Support: Respects user preferences and provides toggle
  • High Contrast Mode: Complete visual accessibility option
  • Font Size Controls: Adjustable typography for visual impairments
  • Semantic HTML: Proper ARIA labels and roles throughout
  • Focus Management: Clear focus indicators and logical tab order

Performance Optimized

  • Canvas Animations: Hardware-accelerated graphics for smooth performance
  • Responsive Design: Mobile-first approach with fluid layouts
  • Efficient Rendering: RequestAnimationFrame for optimal frame rates
  • Memory Management: Proper cleanup of animations and event listeners
  • Progressive Enhancement: Core functionality works without JavaScript

Modern Web Standards

  • CSS Grid & Flexbox: Modern layout techniques
  • CSS Custom Properties: Maintainable theming system
  • ES6+ JavaScript: Modern syntax and features
  • Web APIs: Canvas, RequestAnimationFrame, Intersection Observer
  • Responsive Images: Optimized loading and display

Codepen Demo

Codepen Code Structure 

/
├── index.html          # Semantic HTML structure
├── styles.css          # Comprehensive CSS with animations
├── script.js           # Interactive JavaScript functionality
Enter fullscreen mode Exit fullscreen mode

Live Features Showcase

🎯 Interactive Elements:

  • Click constellation stars to see team information
  • Use celebration buttons to trigger fireworks
  • Search the knowledge garden with real-time filtering
  • Toggle accessibility controls in the top-right corner

📱 Responsive Design:

  • Fully responsive from mobile (320px) to desktop (1400px+)
  • Touch-friendly interactions on mobile devices
  • Adaptive layouts that maintain functionality across screen sizes

♿ Accessibility Features:

  • Keyboard shortcuts: Ctrl/Cmd + M (motion), H (contrast), + (font size)
  • Screen reader announcements for dynamic content
  • High contrast mode for visual accessibility
  • Reduced motion mode for vestibular disorders

Journey

Design Philosophy

The concept emerged from observing how traditional intranets feel static and disconnected from the vibrant energy of actual workplaces. I wanted to create something that would make employees excited to check their company dashboard, not just obligated to use it.

Key Design Decisions:

  1. Biometric Inspiration: Using medical monitoring aesthetics to show company "health"
  2. Organic Animations: Everything breathes, pulses, and flows naturally
  3. Meaningful Metaphors: Stars for teams, plants for knowledge, weather for mood
  4. Accessibility Integration: Not an afterthought, but core to the design
  5. Performance Focus: Smooth animations even on lower-end devices

Technical Challenges Solved

1. Canvas Animation Performance

Challenge: Smooth real-time animations without impacting performance
Solution: Optimized rendering loops, efficient data structures, and hardware acceleration

// Efficient heartbeat rendering with data recycling
generateHeartbeatData() {
    this.heartbeatData = [];
    for (let i = 0; i < 200; i++) {
        const baseValue = 50;
        const heartbeat = Math.sin(i * 0.1) * 20 + Math.sin(i * 0.05) * 10;
        const noise = (Math.random() - 0.5) * 5;
        this.heartbeatData.push(baseValue + heartbeat + noise);
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Accessibility with Animations

Challenge: Making complex animations accessible to all users
Solution: Comprehensive reduced motion support and alternative interaction methods

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Responsive Canvas Elements

Challenge: Making canvas animations work across all screen sizes
Solution: Dynamic scaling and device pixel ratio handling

setupCanvasResponsiveness() {
    const resizeCanvas = (canvas) => {
        const rect = canvas.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        canvas.width = rect.width * dpr;
        canvas.height = rect.height * dpr;
        const ctx = canvas.getContext('2d');
        ctx.scale(dpr, dpr);
    };
}
Enter fullscreen mode Exit fullscreen mode

What I'm Proud Of

  1. Accessibility Leadership: Going beyond compliance to create genuinely inclusive experiences
  2. Performance Innovation: Smooth 60fps animations across devices
  3. Creative Problem Solving: Using biological metaphors to solve UX challenges
  4. Code Quality: Clean, maintainable, well-documented code
  5. User Experience: Creating emotional connection through thoughtful interactions

Lessons Learned

  • Animation Restraint: More isn't always better - purposeful animation is key
  • Accessibility Integration: Building accessibility from the start is easier than retrofitting
  • Performance Budgets: Setting clear performance goals early prevents issues later
  • User Testing: Even small interactions benefit from user feedback
  • Progressive Enhancement: Core functionality should work without JavaScript

Future Enhancements

  • Real Data Integration: Connect to actual company APIs and databases
  • Personalization: User-specific dashboards and preferences
  • Collaboration Tools: Real-time chat and document sharing
  • Mobile App: Native mobile experience with push notifications
  • Analytics Dashboard: Detailed insights into company metrics

Technical Specifications

Browser Support

  • Modern Browsers: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
  • Mobile: iOS Safari 13+, Chrome Mobile 80+
  • Accessibility: Screen readers, keyboard navigation, high contrast

Performance Metrics

  • First Contentful Paint: < 1.5s
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1
  • First Input Delay: < 100ms

Code Quality

  • HTML: Semantic, valid HTML5
  • CSS: Modern CSS with custom properties
  • JavaScript: ES6+, no external dependencies
  • Accessibility: WCAG 2.1 AA compliant

By entering the challenge, I grant Axero a worldwide, royalty-free license to use my submission - whether on website, in marketing materials, or any other Axero channels - at no additional cost. I retain full ownership of my work, and Axero will always credit me (with a link back to my original submission) whenever it's displayed publicly.

License: MIT License - Feel free to use and modify this code for your own projects!

Top comments (0)