Skip to content

Commit 0d3e1ae

Browse files
steipetesteipete
committed
feat: update OG meta + add Easter egg on lobster hover
- Update meta description to "The AI that actually does things" - Add Dalek Easter egg: hover lobster shows "EXFOLIATE! EXFOLIATE!" - Add cyan glow + shake animation for Easter egg text - Add hover effect on lobster icon (scale + cyan glow)
1 parent 2e137bd commit 0d3e1ae

2 files changed

Lines changed: 58 additions & 2 deletions

File tree

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface Props {
77
description?: string;
88
}
99
10-
const { title, description = "Clawdbot — Your personal AI assistant, running on your own devices." } = Astro.props;
10+
const { title, description = "Clawdbot — The AI that actually does things. Your personal assistant on any platform." } = Astro.props;
1111
---
1212

1313
<!doctype html>

‎src/pages/index.astro‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
8282
<span class="title-main">Clawdbot</span>
8383
</h1>
8484

85-
<p class="tagline">The AI that actually does things.</p>
85+
<p class="tagline" id="tagline">The AI that actually does things.</p>
8686

8787
<p class="description">
8888
Clears your inbox, sends emails, manages your calendar, checks you in for flights.<br/>
@@ -333,6 +333,38 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
333333
}
334334
});
335335
});
336+
337+
// Easter egg: Dalek mode on lobster hover
338+
const lobsterIcon = document.querySelector('.lobster-icon');
339+
const tagline = document.getElementById('tagline');
340+
const originalTagline = tagline.textContent;
341+
let isAnimating = false;
342+
343+
lobsterIcon.addEventListener('mouseenter', () => {
344+
if (isAnimating) return;
345+
isAnimating = true;
346+
347+
// Animate to Dalek text
348+
tagline.style.transition = 'opacity 0.2s ease';
349+
tagline.style.opacity = '0';
350+
351+
setTimeout(() => {
352+
tagline.textContent = 'EXFOLIATE! EXFOLIATE!';
353+
tagline.classList.add('dalek-mode');
354+
tagline.style.opacity = '1';
355+
}, 200);
356+
357+
// Revert after 2 seconds
358+
setTimeout(() => {
359+
tagline.style.opacity = '0';
360+
setTimeout(() => {
361+
tagline.textContent = originalTagline;
362+
tagline.classList.remove('dalek-mode');
363+
tagline.style.opacity = '1';
364+
isAnimating = false;
365+
}, 200);
366+
}, 2000);
367+
});
336368
</script>
337369

338370
<!-- What It Does -->
@@ -506,12 +538,24 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
506538
height: 100px;
507539
margin: 0 auto 24px;
508540
animation: float 4s ease-in-out infinite;
541+
cursor: pointer;
542+
transition: transform 0.3s ease;
543+
}
544+
545+
.lobster-icon:hover {
546+
transform: scale(1.1);
547+
animation: none;
509548
}
510549

511550
.lobster-icon svg {
512551
width: 100%;
513552
height: 100%;
514553
filter: drop-shadow(0 0 20px rgba(255, 77, 77, 0.4));
554+
transition: filter 0.3s ease;
555+
}
556+
557+
.lobster-icon:hover svg {
558+
filter: drop-shadow(0 0 30px rgba(0, 229, 204, 0.6));
515559
}
516560

517561
.lobster-icon .eye-glow {
@@ -589,6 +633,18 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
589633
animation: fadeInUp 0.8s ease-out 0.15s both;
590634
}
591635

636+
.tagline.dalek-mode {
637+
color: var(--cyan-bright);
638+
animation: shake 0.1s ease-in-out infinite;
639+
text-shadow: 0 0 10px var(--cyan-glow);
640+
}
641+
642+
@keyframes shake {
643+
0%, 100% { transform: translateX(0); }
644+
25% { transform: translateX(-2px); }
645+
75% { transform: translateX(2px); }
646+
}
647+
592648
.description {
593649
font-size: 1.1rem;
594650
color: var(--text-secondary);

0 commit comments

Comments
 (0)