Skip to content

Commit e5a6b83

Browse files
claudeclaude
committed
feat: Enhance bubbles animation with glowing jellyfish and drifting starfish
Transform the bubbles animation into a complete aquarium experience by adding: Glowing Jellyfish: - 2 jellyfish with pulsing glow effects - 6 wavy tentacles per jellyfish that gently sway - Drift from left to right with curved path - Appear every ~12 seconds with staggered timing - Gaussian blur glow filter for ethereal effect - Uses theme titleColor for bioluminescent glow Drifting Starfish: - 2 five-pointed starfish with outlined edges - Slow rotation while drifting (15s rotation cycle) - Travel right to left with gentle wave motion - Appear every ~15 seconds, offset from jellyfish - Uses theme iconColor with titleColor outline Animation Details: - All creatures layered behind text for depth - Long delays prevent overcrowding (12s and 15s cycles) - Smooth fade in/out for natural appearance - Tentacles wave independently for realistic movement - Curved motion paths create organic flow - Theme-colored for seamless integration The aquarium now feels alive with multiple layers of movement!
1 parent b961d19 commit e5a6b83

2 files changed

Lines changed: 142 additions & 7 deletions

File tree

‎ANIMATION_EXAMPLES.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,17 @@ theme=electric_laboratory
6868
Five unique animation effects for your repo cards:
6969

7070
### 1. **bubbles** - Fishtank Effect 🐠
71-
Bubbles float up from the bottom like in an aquarium.
71+
A complete aquarium experience with bubbles, glowing jellyfish, and drifting starfish.
7272
```
7373
animation_style=bubbles
7474
```
75-
- 8 bubbles with varying sizes
76-
- Float upward with fade effect
77-
- Staggered animation delays
78-
- 3-5 second animation cycles
79-
- Perfect for: Calm, steady progress projects
75+
- 8 bubbles floating upward with varying sizes and speeds
76+
- 2 glowing jellyfish with wavy tentacles drifting left to right
77+
- 2 starfish slowly rotating and drifting right to left
78+
- Jellyfish appear every ~12 seconds with gentle pulsing glow
79+
- Starfish drift across every ~15 seconds with slow rotation
80+
- All creatures layered behind text for depth
81+
- Perfect for: Calm, steady progress projects, marine/ocean themes
8082

8183
### 2. **embers** - Burning Particles 🔥
8284
Glowing particles pulse and float like hot embers.

‎src/cards/repo.js‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,150 @@ const getAnimationStyle = (style, colors, width, height) => {
5656
/>`;
5757
}).join("");
5858

59+
// Glowing jellyfish that floats across
60+
const jellyfishCount = 2;
61+
const jellyfish = Array.from({ length: jellyfishCount }, (_, i) => {
62+
const startY = height * 0.3 + i * height * 0.25;
63+
const delay = i * 12 + 2; // Appear every 12 seconds, staggered
64+
const bellSize = 12 + i * 3;
65+
66+
return `
67+
<g class="jellyfish jellyfish-${i}" style="animation-delay: ${delay}s;">
68+
<!-- Jellyfish bell with glow -->
69+
<ellipse
70+
cx="0" cy="${startY}"
71+
rx="${bellSize}" ry="${bellSize * 0.8}"
72+
fill="${titleColor}"
73+
opacity="0.4"
74+
filter="url(#jellyfish-glow)"
75+
/>
76+
<ellipse
77+
cx="0" cy="${startY}"
78+
rx="${bellSize * 0.7}" ry="${bellSize * 0.6}"
79+
fill="${titleColor}"
80+
opacity="0.6"
81+
/>
82+
<!-- Wavy tentacles -->
83+
${Array.from({ length: 6 }, (_, t) => {
84+
const tentacleX = -bellSize * 0.6 + t * bellSize * 0.24;
85+
return `
86+
<path
87+
class="tentacle tentacle-${t}"
88+
d="M ${tentacleX},${startY + bellSize * 0.6} Q ${tentacleX + 2},${startY + bellSize + 5} ${tentacleX},${startY + bellSize * 1.5 + t * 2}"
89+
stroke="${iconColor}"
90+
stroke-width="1.5"
91+
fill="none"
92+
opacity="0.5"
93+
style="animation-delay: ${delay + t * 0.1}s;"
94+
/>`;
95+
}).join("")}
96+
<!-- Animate motion path for horizontal drift -->
97+
<animateMotion
98+
dur="20s"
99+
repeatCount="indefinite"
100+
path="M -50,0 Q ${width * 0.3},${-15 + i * 8} ${width * 0.7},${8 - i * 6} T ${width + 50},0"
101+
begin="${delay}s"
102+
/>
103+
</g>`;
104+
}).join("");
105+
106+
// Starfish that drifts across
107+
const starfishCount = 2;
108+
const starfish = Array.from({ length: starfishCount }, (_, i) => {
109+
const startY = height * 0.5 + i * height * 0.2;
110+
const delay = i * 15 + 7; // Offset from jellyfish timing
111+
const size = 8 + i * 2;
112+
113+
// Create 5-pointed star path
114+
const points =
115+
Array.from({ length: 5 }, (_, p) => {
116+
const angle = ((p * 72 - 90) * Math.PI) / 180;
117+
const outerX = Math.cos(angle) * size;
118+
const outerY = Math.sin(angle) * size;
119+
const innerAngle = ((p * 72 + 36 - 90) * Math.PI) / 180;
120+
const innerX = Math.cos(innerAngle) * size * 0.4;
121+
const innerY = Math.sin(innerAngle) * size * 0.4;
122+
return `${p === 0 ? "M" : "L"} ${outerX},${outerY} L ${innerX},${innerY}`;
123+
}).join(" ") + " Z";
124+
125+
return `
126+
<g class="starfish starfish-${i}" style="animation-delay: ${delay}s;">
127+
<path
128+
d="${points}"
129+
fill="${iconColor}"
130+
opacity="0.4"
131+
stroke="${titleColor}"
132+
stroke-width="0.5"
133+
/>
134+
<!-- Animate motion from right to left with slight wave -->
135+
<animateMotion
136+
dur="25s"
137+
repeatCount="indefinite"
138+
path="M ${width + 50},${startY} Q ${width * 0.6},${startY - 10} ${width * 0.3},${startY + 8} T -50,${startY}"
139+
begin="${delay}s"
140+
/>
141+
<!-- Slow rotation -->
142+
<animateTransform
143+
attributeName="transform"
144+
type="rotate"
145+
from="0 0 0"
146+
to="360 0 0"
147+
dur="15s"
148+
repeatCount="indefinite"
149+
begin="${delay}s"
150+
/>
151+
</g>`;
152+
}).join("");
153+
59154
const css = `
60155
@keyframes bubbleFloat {
61156
0% { transform: translateY(0) scale(1); opacity: 0.3; }
62157
50% { opacity: 0.5; }
63158
100% { transform: translateY(-${height + 20}px) scale(0.5); opacity: 0; }
64159
}
160+
@keyframes jellyfishPulse {
161+
0%, 100% { opacity: 0; }
162+
10%, 90% { opacity: 1; }
163+
50% { opacity: 0.8; }
164+
}
165+
@keyframes tentacleWave {
166+
0%, 100% { transform: translateX(0); }
167+
50% { transform: translateX(2px); }
168+
}
169+
@keyframes starfishDrift {
170+
0%, 100% { opacity: 0; }
171+
10%, 90% { opacity: 1; }
172+
}
65173
.bubble {
66174
animation: bubbleFloat 3s infinite ease-in-out;
175+
}
176+
.jellyfish {
177+
animation: jellyfishPulse 20s infinite ease-in-out;
178+
filter: drop-shadow(0 0 4px ${titleColor}40);
179+
}
180+
.tentacle {
181+
animation: tentacleWave 2s infinite ease-in-out;
182+
}
183+
.starfish {
184+
animation: starfishDrift 25s infinite ease-in-out;
67185
}`;
68186

69-
return { css, svg: `<g class="animation-layer">${bubbles}</g>` };
187+
// SVG filter for jellyfish glow
188+
const filters = `
189+
<defs>
190+
<filter id="jellyfish-glow" x="-50%" y="-50%" width="200%" height="200%">
191+
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
192+
<feMerge>
193+
<feMergeNode in="coloredBlur"/>
194+
<feMergeNode in="SourceGraphic"/>
195+
</feMerge>
196+
</filter>
197+
</defs>`;
198+
199+
return {
200+
css,
201+
svg: `<g class="animation-layer">${filters}${jellyfish}${starfish}${bubbles}</g>`,
202+
};
70203
}
71204

72205
case "embers": {

0 commit comments

Comments
 (0)