.scd-not {
position: relative; width: 220px; height: 200px; margin: 0 auto;
background: linear-gradient(180deg, #000 0%, #1c1c1e 100%);
border-radius: 28px;
padding: 14px 0;
border: 2px solid #2a2a2c;
overflow: hidden;
}
.scd-not__c {
position: absolute; left: 50%; top: 12px;
width: 196px; margin-left: -98px;
background: rgba(58, 58, 64, 0.85);
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
color: #f1f5f9;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px; padding: 10px 14px;
display: flex; gap: 10px; align-items: center;
box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
animation: scd-not-arrive 5s cubic-bezier(.3,1,.3,1) infinite;
animation-delay: calc(var(--i) * 1.25s);
opacity: 0;
}
@keyframes scd-not-arrive {
0% { transform: translateY(-60px) scale(1); opacity: 0; }
10% { transform: translateY(0) scale(1); opacity: 1; }
35% { transform: translateY(40px) scale(0.96); opacity: 0.85; }
60% { transform: translateY(76px) scale(0.92); opacity: 0.6; }
85% { transform: translateY(108px) scale(0.88); opacity: 0.3; }
100% { transform: translateY(140px) scale(0.84); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.scd-not__c {
animation: none; opacity: calc(1 - var(--i) * 0.2);
transform: translateY(calc(var(--i) * 36px)) scale(calc(1 - var(--i) * 0.04));
}
}
.scd-not__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--a);
box-shadow: 0 0 4px var(--a);
flex-shrink: 0;
}
.scd-not__c b { flex: 1; font: 700 12px/1 system-ui; }
.scd-not__c .scd-not__t { font: 11px/1 ui-monospace, monospace; opacity: 0.65; flex-shrink: 0; } <div class="scd-not">
<div class="scd-not__c" style="--i:0; --a:#ff3b30"><span class="scd-not__dot"></span><b>Alarm</b><span class="scd-not__t">7:00 AM</span></div>
<div class="scd-not__c" style="--i:1; --a:#34c759"><span class="scd-not__dot"></span><b>Activity</b><span class="scd-not__t">+12 mins</span></div>
<div class="scd-not__c" style="--i:2; --a:#0a84ff"><span class="scd-not__dot"></span><b>Calendar</b><span class="scd-not__t">in 5 min</span></div>
<div class="scd-not__c" style="--i:3; --a:#ffd60a"><span class="scd-not__dot"></span><b>Mail</b><span class="scd-not__t">2 new</span></div>
</div>
Live preview Edit any tab — preview updates live Ready