UI Components Medium

Cognitive Load Reducer

Simplified mode that reduces animations, decorative elements, color complexity and information density for users with cognitive disabilities.

Open in Lab

vanilla-js css

Targets: JS HTML

Code

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0a0a;
  color: #e4e4e7;
  line-height: 1.5;
  min-height: 100vh;
}

.shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
}

.topbar__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f4f4f5;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Simplify button */
.simplify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.simplify-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}

.simplify-btn[aria-pressed="true"] {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

/* Notification bell */
.notification-bell {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
}

.notification-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bell__badge.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* ---- Marquee banner ---- */
.marquee-banner {
  overflow: hidden;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.5rem 0;
}

.marquee-banner__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee-banner__text {
  font-size: 0.8125rem;
  color: #a1a1aa;
  white-space: nowrap;
  padding-right: 2rem;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---- Dashboard ---- */
.dashboard {
  padding-top: 1.5rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e4e4e7;
  margin-bottom: 1rem;
}

.decorative-title {
  position: relative;
  display: inline-block;
}

.decorative-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, transparent);
  border-radius: 1px;
}

/* Stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon--blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.stat-card__icon--green {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.stat-card__icon--purple {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}
.stat-card__icon--amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.stat-card__body {
  flex: 1;
  min-width: 0;
}

.stat-card__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f4f4f5;
  font-variant-numeric: tabular-nums;
}

.stat-card__label {
  font-size: 0.75rem;
  color: #71717a;
}

.stat-card__trend {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.stat-card__trend--up {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}
.stat-card__trend--down {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Main grid */
.main-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* Carousel */
.carousel__viewport {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.carousel__slides {
  position: relative;
  min-height: 200px;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.carousel__slide--active {
  position: relative;
  opacity: 1;
  transform: scale(1);
}

.carousel__slide h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.carousel__slide p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-width: 50ch;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel__dot.active {
  background: #8b5cf6;
  width: 24px;
  border-radius: 4px;
}

/* Activity feed */
.activity__list {
  list-style: none;
}

.activity__item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity__item:last-child {
  border-bottom: none;
}

.activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.375rem;
  flex-shrink: 0;
}

.activity__dot--blue {
  background: #3b82f6;
}
.activity__dot--green {
  background: #10b981;
}
.activity__dot--amber {
  background: #f59e0b;
}
.activity__dot--purple {
  background: #8b5cf6;
}

.activity__content {
  flex: 1;
}

.activity__text {
  font-size: 0.8125rem;
  color: #a1a1aa;
  line-height: 1.5;
}

.activity__text strong {
  color: #e4e4e7;
  font-weight: 600;
}

.activity__time {
  display: block;
  font-size: 0.6875rem;
  color: #52525b;
  margin-top: 0.125rem;
}

/* ====================================
   SIMPLIFIED MODE
   ==================================== */

body.simplified {
  background: #111111;
}

/* Kill all animations */
.simplified * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.simplified .topbar__logo {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f4f4f5;
}

/* Hide marquee */
.simplified .marquee-banner {
  display: none;
}

/* Hide notification pulse and badge animation */
.simplified .notification-bell__badge {
  box-shadow: none;
}

/* Remove gradients from stat cards */
.simplified .stat-card {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.simplified .stat-card__icon--blue,
.simplified .stat-card__icon--green,
.simplified .stat-card__icon--purple,
.simplified .stat-card__icon--amber {
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
}

.simplified .stat-card__trend {
  background: none;
  color: #71717a;
}

/* Single column layout */
.simplified .stats {
  grid-template-columns: repeat(2, 1fr);
}

.simplified .main-grid {
  grid-template-columns: 1fr;
}

/* Simplify carousel to static card */
.simplified .carousel__slide {
  position: relative;
  opacity: 1;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.75rem;
}

.simplified .carousel__slide h3 {
  color: #e4e4e7;
  font-size: 1rem;
}

.simplified .carousel__slide p {
  color: #a1a1aa;
  font-size: 0.875rem;
}

.simplified .carousel__dots {
  display: none;
}

/* Remove decorative elements */
.simplified .decorative-title::after {
  display: none;
}

/* Bigger text, more whitespace */
.simplified .section-title {
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

.simplified .activity__item {
  padding: 1rem 0;
}

.simplified .activity__text {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.simplified .activity__time {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Reduce color palette */
.simplified .activity__dot--blue,
.simplified .activity__dot--green,
.simplified .activity__dot--amber,
.simplified .activity__dot--purple {
  background: #71717a;
}

/* prefers-reduced-motion auto-detect */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

(() => {
  const STORAGE_KEY = "simplified-mode";
  const toggleBtn = document.getElementById("simplify-toggle");
  const marquee = document.getElementById("marquee");
  const carouselSlides = document.querySelectorAll(".carousel__slide");
  const carouselDots = document.querySelectorAll(".carousel__dot");

  let carouselInterval = null;
  let currentSlide = 0;

  // ----- Carousel auto-rotation -----
  function showSlide(index) {
    carouselSlides.forEach((slide, i) => {
      slide.classList.toggle("carousel__slide--active", i === index);
      // Apply gradient background
      if (slide.dataset.gradient) {
        slide.style.background = slide.dataset.gradient;
      }
    });
    carouselDots.forEach((dot, i) => {
      dot.classList.toggle("active", i === index);
    });
    currentSlide = index;
  }

  function nextSlide() {
    showSlide((currentSlide + 1) % carouselSlides.length);
  }

  function startCarousel() {
    if (carouselInterval) return;
    carouselInterval = setInterval(nextSlide, 4000);
  }

  function stopCarousel() {
    if (carouselInterval) {
      clearInterval(carouselInterval);
      carouselInterval = null;
    }
  }

  carouselDots.forEach((dot) => {
    dot.addEventListener("click", () => {
      showSlide(parseInt(dot.dataset.index, 10));
      stopCarousel();
      if (!document.body.classList.contains("simplified")) {
        startCarousel();
      }
    });
  });

  // Initialize carousel
  showSlide(0);

  // ----- Simplified mode -----
  function applyMode(simplified) {
    document.body.classList.toggle("simplified", simplified);
    toggleBtn.setAttribute("aria-pressed", String(simplified));
    toggleBtn.querySelector(".simplify-btn__text").textContent = simplified
      ? "Standard"
      : "Simplify";

    if (simplified) {
      stopCarousel();
      // Show all slides as static cards in simplified mode
      carouselSlides.forEach((slide) => {
        slide.classList.add("carousel__slide--active");
      });
    } else {
      showSlide(0);
      startCarousel();
    }
  }

  // Check prefers-reduced-motion
  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)");
  if (prefersReduced.matches) {
    applyMode(true);
    localStorage.setItem(STORAGE_KEY, "true");
  }

  prefersReduced.addEventListener("change", (e) => {
    if (e.matches) {
      applyMode(true);
      localStorage.setItem(STORAGE_KEY, "true");
    }
  });

  // Restore saved preference
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved === "true") {
    applyMode(true);
  } else if (!prefersReduced.matches) {
    startCarousel();
  }

  // Toggle
  toggleBtn.addEventListener("click", () => {
    const next = !document.body.classList.contains("simplified");
    applyMode(next);
    localStorage.setItem(STORAGE_KEY, String(next));
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cognitive Load Reducer</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="shell">
    <!-- Top bar -->
    <header class="topbar">
      <div class="topbar__left">
        <span class="topbar__logo">Dashboard</span>
      </div>
      <div class="topbar__right">
        <button class="simplify-btn" id="simplify-toggle" aria-pressed="false">
          <svg class="simplify-btn__icon" width="18" height="18" viewBox="0 0 18 18" fill="none">
            <circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.5"/>
            <path d="M6 9h6M9 6v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          <span class="simplify-btn__text">Simplify</span>
        </button>

        <!-- Notification bell with pulse -->
        <div class="notification-bell">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 2a5 5 0 00-5 5c0 3.5-2 5-2 5h14s-2-1.5-2-5a5 5 0 00-5-5z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M8 15a2 2 0 004 0" stroke="currentColor" stroke-width="1.5"/>
          </svg>
          <span class="notification-bell__badge pulse">3</span>
        </div>
      </div>
    </header>

    <!-- Marquee banner -->
    <div class="marquee-banner" id="marquee">
      <div class="marquee-banner__track">
        <span class="marquee-banner__text">New feature release: Advanced analytics now available &bull; Scheduled maintenance Saturday 2am-4am UTC &bull; Team meeting moved to 3pm &bull; Q2 goals published in the wiki &bull;&nbsp;</span>
        <span class="marquee-banner__text" aria-hidden="true">New feature release: Advanced analytics now available &bull; Scheduled maintenance Saturday 2am-4am UTC &bull; Team meeting moved to 3pm &bull; Q2 goals published in the wiki &bull;&nbsp;</span>
      </div>
    </div>

    <main class="dashboard">
      <!-- Stat cards -->
      <section class="stats">
        <div class="stat-card">
          <div class="stat-card__icon stat-card__icon--blue">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v8m0 0l-3-3m3 3l3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/></svg>
          </div>
          <div class="stat-card__body">
            <span class="stat-card__value counter" data-target="12847">12,847</span>
            <span class="stat-card__label">Total Downloads</span>
          </div>
          <span class="stat-card__trend stat-card__trend--up">+12.5%</span>
        </div>

        <div class="stat-card">
          <div class="stat-card__icon stat-card__icon--green">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10l4 4 8-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
          <div class="stat-card__body">
            <span class="stat-card__value counter" data-target="946">946</span>
            <span class="stat-card__label">Completed Tasks</span>
          </div>
          <span class="stat-card__trend stat-card__trend--up">+8.2%</span>
        </div>

        <div class="stat-card">
          <div class="stat-card__icon stat-card__icon--purple">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M4 16c0-3 3-5 6-5s6 2 6 5" stroke="currentColor" stroke-width="1.5"/></svg>
          </div>
          <div class="stat-card__body">
            <span class="stat-card__value counter" data-target="2341">2,341</span>
            <span class="stat-card__label">Active Users</span>
          </div>
          <span class="stat-card__trend stat-card__trend--down">-2.1%</span>
        </div>

        <div class="stat-card">
          <div class="stat-card__icon stat-card__icon--amber">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="3" y="3" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M7 10h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
          <div class="stat-card__body">
            <span class="stat-card__value counter" data-target="87">87</span>
            <span class="stat-card__label">Open Issues</span>
          </div>
          <span class="stat-card__trend stat-card__trend--down">-15.3%</span>
        </div>
      </section>

      <!-- Carousel + Side panel -->
      <div class="main-grid">
        <!-- Auto-rotating carousel -->
        <section class="carousel" id="carousel">
          <h2 class="section-title decorative-title">Featured Updates</h2>
          <div class="carousel__viewport">
            <div class="carousel__slides" id="carousel-slides">
              <div class="carousel__slide carousel__slide--active" data-gradient="linear-gradient(135deg, #4f46e5, #7c3aed)">
                <h3>New Dashboard Design</h3>
                <p>Experience a completely redesigned interface with improved navigation, faster load times, and a more intuitive layout for all your analytics needs.</p>
              </div>
              <div class="carousel__slide" data-gradient="linear-gradient(135deg, #059669, #10b981)">
                <h3>Performance Boost</h3>
                <p>We have optimized our core algorithms, resulting in 40% faster data processing and real-time updates across all dashboard widgets.</p>
              </div>
              <div class="carousel__slide" data-gradient="linear-gradient(135deg, #d97706, #f59e0b)">
                <h3>Team Collaboration</h3>
                <p>Invite team members, share dashboards, and collaborate in real-time with our new workspace features and commenting system.</p>
              </div>
            </div>
            <div class="carousel__dots" id="carousel-dots">
              <button class="carousel__dot active" data-index="0" aria-label="Slide 1"></button>
              <button class="carousel__dot" data-index="1" aria-label="Slide 2"></button>
              <button class="carousel__dot" data-index="2" aria-label="Slide 3"></button>
            </div>
          </div>
        </section>

        <!-- Activity feed (dense) -->
        <section class="activity">
          <h2 class="section-title">Recent Activity</h2>
          <ul class="activity__list">
            <li class="activity__item">
              <div class="activity__dot activity__dot--blue"></div>
              <div class="activity__content">
                <span class="activity__text">Sarah pushed 3 commits to <strong>main</strong></span>
                <span class="activity__time">2 minutes ago</span>
              </div>
            </li>
            <li class="activity__item">
              <div class="activity__dot activity__dot--green"></div>
              <div class="activity__content">
                <span class="activity__text">Deploy <strong>#482</strong> completed successfully</span>
                <span class="activity__time">15 minutes ago</span>
              </div>
            </li>
            <li class="activity__item">
              <div class="activity__dot activity__dot--amber"></div>
              <div class="activity__content">
                <span class="activity__text">New issue: <strong>Button alignment off on mobile</strong></span>
                <span class="activity__time">1 hour ago</span>
              </div>
            </li>
            <li class="activity__item">
              <div class="activity__dot activity__dot--purple"></div>
              <div class="activity__content">
                <span class="activity__text">Alex commented on <strong>PR #91</strong></span>
                <span class="activity__time">2 hours ago</span>
              </div>
            </li>
            <li class="activity__item">
              <div class="activity__dot activity__dot--blue"></div>
              <div class="activity__content">
                <span class="activity__text">Team standup notes updated</span>
                <span class="activity__time">3 hours ago</span>
              </div>
            </li>
            <li class="activity__item">
              <div class="activity__dot activity__dot--green"></div>
              <div class="activity__content">
                <span class="activity__text">Migration <strong>v2.4</strong> applied to production</span>
                <span class="activity__time">5 hours ago</span>
              </div>
            </li>
          </ul>
        </section>
      </div>
    </main>
  </div>

  <script src="script.js"></script>
</body>
</html>

A one-click “Simplify” toggle that strips away animations, gradients, multi-column layouts, and decorative elements, replacing them with a calm, single-column view with larger text and more whitespace. Automatically respects prefers-reduced-motion.