v2.0 — Now live
The tool your team has been waiting for
Faster, lighter, collaborative. Try it now.
✅ Version 2.0 is live — discover what's new
AtmosphereFree
Notification Chime
Emerald CSS toast with a 0.3 s fade-up transition and a `.show` class — a native button triggers the reveal, zero dependencies, zero JS in the effect itself.
✅ Nouveau message recu !
Hover or click the scene to interact
This effect is free — the Atmosphere category contains 57 effects total, including 10 free. Effect.Labs has 811 vanilla effects. Explore the category →
Usage examples
Quarterly report
All changes are in draft. Save to publish the updated version to your team.
✅ Saved · Published to your team
Messages
2
Jean D.
Ticket resolved, thanks!
9:14
Marie L.
Can you check order #4821?
9:02
🔔 Sophie M. — Hi, I have a question about my subscription
How it works
The HTML exposes two elements inside a flex-column .snd-notif-container: a <button class="snd-notif-trigger"> and a <div class="snd-notif-toast">. The toast starts invisible (opacity: 0, transform: translateY(10px)) — both properties are declared in the resting rule for .snd-notif-toast.
The reveal transition is entirely CSS-driven: transition: 0.3s applies to all animatable properties. When the class .show is added to the toast, the browser automatically interpolates opacity 0 → 1 and translateY(10px) → translateY(0) over 300 ms — without a single requestAnimationFrame call.
The color palette uses a single emerald value — rgb(16, 185, 129) — at three opacity levels: text (1.0), background (0.15–0.20), and border (0.30). Both elements share this triplet, ensuring visual consistency regardless of the color you substitute.
The js field in the source file contains only the comment “Effet CSS pur — pas de JavaScript nécessaire”: the effect provides no trigger logic. This is intentional — you add the .show class via your own code (click, business event, auto-dismiss timeout). No chime sound is included in the delivered code despite the effect's name; audio integration is left to the implementor (Web Audio API or an .mp3 file).
Accessibility
- No
prefers-reduced-motionsupport in the current code: the CSS transition fires unconditionally, even if the OS signals a preference to reduce motion. .snd-notif-triggeris a native<button>— keyboard-focusable (Tab), activatable by Enter and Space, with the implicitbuttonrole exposed to screen readers..snd-notif-toastcarries neitheraria-livenorrole="alert"— screen readers will not automatically announce the toast's appearance; add this in production.- No
aria-labeloraria-describedbyon the notification — the toast text is accessible but not programmatically linked to the trigger button. - Text contrast:
rgb(16, 185, 129)(#10b981) on a dark composite background (~#0b2420) yields a ratio ≥ 12:1 — well above WCAG AA and AAA thresholds for normal text.
Browser compatibility
Relies solely on CSS transitions and the transform property — universally supported since 2013. No JS on the effect side.
Chrome 88+✓ Full
Firefox 87+✓ Full
Safari 15+✓ Full
Edge 88+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full
Without CSS <code>transition</code> support (IE ≤ 9), the toast jumps to its final state without animation — content remains readable.
The code
Copy the three blocks into your page. No dependencies.
HTML
<div class="snd-notif-container">
<button class="snd-notif-trigger" id="sndNotifBtn">🔔 Notification</button>
<div class="snd-notif-toast" id="sndNotifToast">✅ Nouveau message recu !</div>
</div>
CSS
.snd-notif-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.snd-notif-trigger {
padding: 10px 20px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.2);
border: 1px solid rgba(16, 185, 129, 0.3);
color: rgb(16, 185, 129);
cursor: pointer;
font-size: 0.85rem;
}
.snd-notif-toast {
padding: 10px 16px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.3);
color: rgb(16, 185, 129);
font-size: 0.8rem;
opacity: 0;
transform: translateY(10px);
transition: 0.3s;
}
.snd-notif-toast.show {
opacity: 1;
transform: translateY(0px);
}
JavaScript (fx-0528)
// Effet CSS pur — pas de JavaScript nécessaireCustomize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| rgb(16, 185, 129) | emerald #10b981 | The component's primary color — present 3 times in the CSS (text, background, border). Replace everywhere with a single brand color for consistency. |
| transition: 0.3s | 0.3 s | Animation duration for toast show/hide. 0.15 s = instant confirm; 0.6 s = soft entry for a persistent banner. |
| transform: translateY(10px) | 10 px rise | Entry direction and amplitude. translateY(-10px) to drop from above; translateX(-10px) to slide in from the left; increase to 20–30 px for a more pronounced motion. |
| border-radius: 8px | 8 px | Corner radius on both the button and the toast. 0 = angular cards; 24 px = pill; the value is repeated twice in the CSS. |
| font-size: 0.8rem | 0.8 rem (toast) | Toast text size. The button is at 0.85 rem. Raise to 0.9–1 rem if the toast serves as a primary message rather than a secondary confirmation. |
| gap: 12px | 12 px | Vertical gap between the trigger button and the toast in the flex container. Reduce to 6 px for a toast pinned just below the button. |
| padding: 10px 16px | 10px 16px (toast) | Toast internal padding. The button uses 10px 20px. Reduce to 6px 12px for a compact toast in a dense dashboard. |
FAQ
How do I trigger the toast appearance and dismissal?
The code provides no JS — add: btn.addEventListener('click', () => { toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 3000); });. Adjust 3000 to the desired duration in ms, or remove the setTimeout for a persistent toast until the next click.
Why is the effect called 'Notification Chime' if no sound is included?
The delivered code is pure CSS — no Web Audio API is present in the source file. To add the chime, create an AudioContext, two oscillators (triangle ~880 Hz + sine ~1320 Hz) with a short envelope (attack 10 ms, decay 500 ms), and call oscillator.start() on the same click as the .show class. No changes to the CSS component are needed.
How do I add prefers-reduced-motion support?
Two options: CSS only — add @media (prefers-reduced-motion: reduce) { .snd-notif-toast { transition: none; } } to show the toast instantly without animation. Or JS — check window.matchMedia('(prefers-reduced-motion: reduce)').matches before triggering any audio and set transition-duration: 0s dynamically.
