feat: Add React Badge Notification Pulse Indicator (#28024)

[realtushartyagi]

Pull Request Description

Adds a new React Component: Badge Notification Pulse Indicator.
This submission provides a lightweight, highly reusable React wrapper component designed to attach an attention-grabbing, pulsing status badge to any target element (like an inbox icon or avatar). The component accepts a color prop natively in React and securely injects it into an inline CSS variable (--badge-pulse-color). The HTML structure splits the badge into two semantic spans: a static outer dot, and an inner pulse ring (.ease-badge-pulse-ring) which executes an infinite, hardware-accelerated transform: scale() fading loop via pure CSS. This guarantees buttery smooth 60fps animations without relying on heavy JavaScript timers.

Fixes #28024
Fixes #27356

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside submissions/react/react-badge-notification-pulse-indicator-realtushartyagi-28024/
• Includes demo.html — (N/A: React Component Submission)
• Includes style.css — (N/A: Uses component-scoped .css instead)
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A highly reusable React wrapper component that renders a classic "Notification Dot" featuring a pure CSS, infinitely looping scale-and-fade keyframe pulse animation.

How does a developer use it?

import React, { useState } from 'react';
import BadgeNotification from './components/BadgeNotification';

const App = () => {
  const [hasUnread, setHasUnread] = useState(true);

  return (
    <div style={{ padding: '4rem', display: 'flex', gap: '2rem' }}>
      
      {/* Example 1: Standard Red Alert on a generic div/icon */}
      <BadgeNotification active={hasUnread} ariaLabel="3 unread messages">
        <div style={{ padding: '12px', backgroundColor: '#e2e8f0', borderRadius: '8px' }}>
          Inbox 📬
        </div>
      </BadgeNotification>

      {/* Example 2: Green Live Status Indicator */}
      <BadgeNotification active={true} color="#22c55e" ariaLabel="System Operational">
        <div style={{ padding: '12px', backgroundColor: '#e2e8f0', borderRadius: '8px' }}>
          Server 🟢
        </div>
      </BadgeNotification>
      
    </div>
  );
};

export default App;

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-badge-notification-pulse-indicator-realtushartyagi-28024

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡

[SAPTARSHI-coder]

✅ React/SCSS Submission Validated!

Great work @realtushartyagi! 🎉 Your react submission passed all quality checks.

⚛️ Folder: submissions/react/react-badge-notification-pulse-indicator-realtushartyagi-28024

• ✅ React component file (.jsx/.tsx)
• ✅ README.md
• ✅ CSS/SCSS stylesheet

🚀 What happens next?

• A maintainer will review your React component
• Respond promptly to any feedback
• Once approved, it will be merged into main!

Thank you for contributing to EaseMotion CSS! ⚡

[SAPTARSHI-coder]

🔒 Pull Request Closed: Stale/Duplicate Submission 🔒

Hi @realtushartyagi! 👋

This pull request has been closed because the linked issue (#28024) is already resolved and closed. Another contributor's pull request was accepted and merged for this task first. Thank you for your contribution!