Role
CSSA shield emblem slides onto a user silhouette, updating their seat permission level from guest to admin.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4.2 s, loops
- Categories
- Icons and micro-interactions
- Use cases
- Security and trust, Workflow and approvals
- Industries
- SaaS and software, Cross-industry
- Style
- Duotone · light stroke
- Set
- seat
- Tags
- geometricminimalpulsescaleui
Companion assets
The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-seat-role" data-pulsar="seat-role" viewBox="0 0 160 96"><rect width="56" height="56" x="52" y="20" fill="currentColor" fill-opacity=".04" stroke="currentColor" stroke-width="1.25" opacity=".35" rx="8"></rect><circle cx="80" cy="40" r="7" fill="currentColor" fill-opacity=".25" stroke="currentColor" stroke-width="1.25"></circle><path fill="currentColor" fill-opacity=".25" stroke="currentColor" stroke-width="1.25" d="M68 58c0-6 5-8 12-8s12 2 12 8"></path><g class="seat-role-shield"><path fill="var(--pulsar-accent, currentColor)" fill-opacity=".3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="m94 22 8 4v8c0 5-8 9-8 9s-8-4-8-9v-8Z"></path><path stroke="var(--pulsar-accent, currentColor)" d="M94 28v8"></path></g></svg>
animation.css
.pulsar-seat-role {
display: block;
overflow: visible;
}
.pulsar-seat-role .seat-role-shield {
animation: seat-role-dock-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
transform-origin: 94px 32px;
}
@keyframes seat-role-dock-anim {
0%,
15% {
transform: translateY(-8px) scale(0.6);
opacity: 0;
}
40%,
80% {
transform: translateY(0) scale(1);
opacity: 1;
}
92%,
100% {
transform: translateY(-8px) scale(0.6);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-seat-role .seat-role-shield {
animation: none;
}
}