Skip to content

Add subtle grim reaper caricature easter egg #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nitrocode merged 2 commits into from
Apr 23, 2026
Merged

Add subtle grim reaper caricature easter egg #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59921e5
feat: add subtle grim reaper caricature to website
Copilot Apr 23, 2026
67411ef
Merge branch 'main' into copilot/add-cute-grim-reaper-caricature
nitrocode Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1496,6 +1496,47 @@ <h2 id="receipt-heading" class="sr-only">Session Receipt</h2>
</div>
</div>

<!-- ── Grim Reaper ──────────────────────────────────────── -->
<div id="grim-reaper" class="grim-reaper" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 155">
<!-- scythe handle -->
<line x1="77" y1="16" x2="62" y2="148" stroke="#555" stroke-width="2.5" stroke-linecap="round"/>
<!-- scythe blade -->
<path d="M77,16 C100,2 103,28 87,35 C85,26 80,19 77,16 Z" fill="#555"/>
<!-- robe shadow -->
<ellipse cx="50" cy="151" rx="28" ry="5" fill="#000" opacity="0.4"/>
<!-- robe body -->
<path d="M22,72 C14,106 11,138 9,150 L91,150 C89,138 86,106 78,72 Z" fill="#161616"/>
<!-- hood -->
<path d="M22,75 C18,48 22,18 50,14 C78,18 82,48 78,75 Z" fill="#1d1d1d"/>
<!-- hood side drapes -->
<path d="M22,74 C14,82 10,98 14,122 C18,108 20,92 22,74 Z" fill="#141414"/>
<path d="M78,74 C86,82 90,98 86,122 C82,108 80,92 78,74 Z" fill="#141414"/>
<!-- eye sockets -->
<circle cx="37" cy="55" r="9" fill="#0a0a0a"/>
<circle cx="63" cy="55" r="9" fill="#0a0a0a"/>
<!-- glowing eyes -->
<circle cx="37" cy="55" r="6" fill="#cc1111" class="reaper-eye-inner"/>
<circle cx="63" cy="55" r="6" fill="#cc1111" class="reaper-eye-inner"/>
<!-- bright pupils -->
<circle cx="37" cy="55" r="2.5" fill="#ff5555"/>
<circle cx="63" cy="55" r="2.5" fill="#ff5555"/>
<!-- cute highlights -->
<circle cx="39.5" cy="52.5" r="2" fill="#fff" opacity="0.5"/>
<circle cx="65.5" cy="52.5" r="2" fill="#fff" opacity="0.5"/>
<!-- creepy-cute grin -->
<path d="M33,67 Q37,75 50,71 Q63,75 67,67" stroke="#999" stroke-width="1.8" fill="none" stroke-linecap="round"/>
<!-- left bony arm -->
<path d="M22,90 C14,88 8,85 5,79" stroke="#999" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<!-- bony fingers -->
<path d="M5,79 C2,73 5,71 7,73" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<path d="M5,79 C1,77 2,73 5,74" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<path d="M5,79 C3,83 6,84 8,82" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<!-- robe ragged hem -->
<path d="M9,150 C20,145 30,150 40,147 C50,144 60,148 70,146 C80,144 88,148 91,150" stroke="#222" stroke-width="1.5" fill="none"/>
</svg>
</div>

<!-- Changelog & version data (auto-generated from CHANGELOG.md) -->
<script src="changelog-data.js"></script>
<!-- Milestone data (auto-generated from milestones.yaml) -->
Expand Down
50 changes: 50 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3099,3 +3099,53 @@ footer a:hover {
.milestone-flash-overlay { animation: none; background: rgba(255, 51, 51, 0.1); }
.milestone-flash-content { animation: none; }
}

/* ---- Grim Reaper ---- */
.grim-reaper {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
opacity: 0.22;
transform: translateX(-22px);
transition: opacity 0.8s ease, transform 0.8s ease;
pointer-events: auto;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.grim-reaper:hover {
opacity: 0.55;
transform: translateX(0);
}

.grim-reaper svg {
display: block;
width: 80px;
height: auto;
animation: reaper-float 5s ease-in-out infinite;
}

@keyframes reaper-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.reaper-eye-inner {
filter: drop-shadow(0 0 4px #ff3333);
animation: reaper-eye-pulse 3s ease-in-out infinite;
}

@keyframes reaper-eye-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}

@media (max-width: 480px) {
.grim-reaper svg { width: 55px; }
}

@media (prefers-reduced-motion: reduce) {
.grim-reaper svg,
.reaper-eye-inner { animation: none; }
.grim-reaper { transition: none; }
}
Loading