SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -0,0 +1,35 @@
+# Floating Notification Toast Component
+
+A lightweight notification toast component built entirely with HTML and CSS. Displays success, error, warning, or info messages with a status icon, title, message text, and optional dismiss button. Features a smooth slide-in entrance animation.
+
+## Classes
+
+| Class | Description |
+|---|---|
+| `ease-toast` | Base toast container with slide-in animation |
+| `ease-toast-success` | Green success variant |
+| `ease-toast-error` | Red error variant |
+| `ease-toast-warning` | Amber warning variant |
+| `ease-toast-info` | Blue info variant |
+| `ease-toast-icon` | Circular status icon slot |
+| `ease-toast-content` | Title and message wrapper |
+| `ease-toast-title` | Toast title text |
+| `ease-toast-msg` | Toast message text |
+| `ease-toast-close` | Dismiss button |
+
+## Usage
+
+```html
+<div class="ease-toast ease-toast-success" role="alert">
+  <span class="ease-toast-icon">&#10003;</span>
+  <div class="ease-toast-content">
+    <h4 class="ease-toast-title">Success</h4>
+    <p class="ease-toast-msg">Your changes have been saved.</p>
+  </div>
+  <button class="ease-toast-close" aria-label="Dismiss">&times;</button>
+</div>
+```
+
+## Why it fits EaseMotion CSS
+
+Pure CSS toast with staggered slide-in entrance animation, color-coded variants, and a hover-visible dismiss button. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`.
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Floating Notification Toast — EaseMotion CSS</title>
+  <link rel="stylesheet" href="style.css" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      background: #0f0e17;
+      color: #fff;
+      font-family: 'Inter', system-ui, sans-serif;
+      padding: 3rem 2rem;
+      min-height: 100vh;
+    }
+    h1 { font-size: 2rem; margin-bottom: 0.25rem; text-align: center; }
+    .subtitle { color: rgba(255,255,255,0.5); margin-bottom: 3rem; text-align: center; }
+    .toast-stack {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.75rem;
+      max-width: 420px;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>Floating Notification Toast</h1>
+  <p class="subtitle">Lightweight feedback toast component — Issue #1167</p>
+
+  <div class="toast-stack">
+
+    <div class="ease-toast ease-toast-success" role="alert">
+      <span class="ease-toast-icon">&#10003;</span>
+      <div class="ease-toast-content">
+        <h4 class="ease-toast-title">Success</h4>
+        <p class="ease-toast-msg">Your changes have been saved.</p>
+      </div>
+      <button class="ease-toast-close" aria-label="Dismiss">&#215;</button>
+    </div>
+
+    <div class="ease-toast ease-toast-error" role="alert">
+      <span class="ease-toast-icon">&#10007;</span>
+      <div class="ease-toast-content">
+        <h4 class="ease-toast-title">Error</h4>
+        <p class="ease-toast-msg">Something went wrong. Please try again.</p>
+      </div>
+      <button class="ease-toast-close" aria-label="Dismiss">&#215;</button>
+    </div>
+
+    <div class="ease-toast ease-toast-warning" role="alert">
+      <span class="ease-toast-icon">&#9888;</span>
+      <div class="ease-toast-content">
+        <h4 class="ease-toast-title">Warning</h4>
+        <p class="ease-toast-msg">Your session will expire in 5 minutes.</p>
+      </div>
+      <button class="ease-toast-close" aria-label="Dismiss">&#215;</button>
+    </div>
+
+    <div class="ease-toast ease-toast-info" role="alert">
+      <span class="ease-toast-icon">&#9432;</span>
+      <div class="ease-toast-content">
+        <h4 class="ease-toast-title">Info</h4>
+        <p class="ease-toast-msg">A new version of the app is available.</p>
+      </div>
+      <button class="ease-toast-close" aria-label="Dismiss">&#215;</button>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -0,0 +1,160 @@
+/* ============================================================
+   EaseMotion CSS — Floating Notification Toast Component
+   Issue #1167
+   ============================================================ */
+
+/* ── Toast base ───────────────────────────────────────────── */
+
+.ease-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ease-space-3, 0.75rem);
+  width: 100%;
+  padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem);
+  border-radius: var(--ease-radius-md, 0.5rem);
+  border: 1.5px solid transparent;
+  background: rgba(255, 255, 255, 0.04);
+  animation: ease-kf-toast-slide-in var(--ease-speed-medium, 300ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both;
+  transition:
+    opacity var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)),
+    transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
+}
+
+.ease-toast:nth-child(2) { animation-delay: 100ms; }
+.ease-toast:nth-child(3) { animation-delay: 200ms; }
+.ease-toast:nth-child(4) { animation-delay: 300ms; }
+
+/* ── Icon ─────────────────────────────────────────────────── */
+
+.ease-toast-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ease-radius-full, 999px);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-top: 1px;
+}
+
+/* ── Content ─────────────────────────────────────────────── */
+
+.ease-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ease-toast-title {
+  margin: 0 0 0.125rem;
+  font-size: var(--ease-text-sm, 0.875rem);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ease-toast-msg {
+  margin: 0;
+  font-size: var(--ease-text-xs, 0.75rem);
+  line-height: 1.5;
+  opacity: 0.65;
+}
+
+/* ── Close button ────────────────────────────────────────── */
+
+.ease-toast-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.125rem;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.35;
+  color: inherit;
+  transition: opacity var(--ease-speed-fast, 150ms);
+}
+
+.ease-toast-close:hover {
+  opacity: 0.8;
+}
+
+/* ── Variants ────────────────────────────────────────────── */
+
+/* Success */
+.ease-toast-success {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: rgba(34, 197, 94, 0.06);
+}
+.ease-toast-success .ease-toast-icon {
+  background: rgba(34, 197, 94, 0.15);
+  color: var(--ease-color-success, #22c55e);
+}
+.ease-toast-success .ease-toast-title {
+  color: var(--ease-color-success, #22c55e);
+}
+
+/* Error */
+.ease-toast-error {
+  border-color: rgba(239, 68, 68, 0.3);
+  background: rgba(239, 68, 68, 0.06);
+}
+.ease-toast-error .ease-toast-icon {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--ease-color-danger, #ef4444);
+}
+.ease-toast-error .ease-toast-title {
+  color: var(--ease-color-danger, #ef4444);
+}
+
+/* Warning */
+.ease-toast-warning {
+  border-color: rgba(245, 158, 11, 0.3);
+  background: rgba(245, 158, 11, 0.06);
+}
+.ease-toast-warning .ease-toast-icon {
+  background: rgba(245, 158, 11, 0.15);
+  color: var(--ease-color-warning, #f59e0b);
+}
+.ease-toast-warning .ease-toast-title {
+  color: var(--ease-color-warning, #f59e0b);
+}
+
+/* Info */
+.ease-toast-info {
+  border-color: rgba(59, 130, 246, 0.3);
+  background: rgba(59, 130, 246, 0.06);
+}
+.ease-toast-info .ease-toast-icon {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--ease-color-info, #3b82f6);
+}
+.ease-toast-info .ease-toast-title {
+  color: var(--ease-color-info, #3b82f6);
+}
+
+/* ── Keyframes ───────────────────────────────────────────── */
+
+@keyframes ease-kf-toast-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ease-toast {
+    animation: none;
+    transition: none;
+  }
+  .ease-toast-close {
+    transition: none;
+  }
+}