Skip to content

Commit 8d27de3

Browse files
hesreallyhimclaude
hesreallyhim
and
claude
authored
feat: Add cybernetic mad scientist themes and 5 animation styles (#14) (#14)
* feat: Add cybernetic mad scientist themes and 5 animation styles for repo cards This commit introduces a creative suite of animations and themes inspired by a cybernetic mad scientist laboratory aesthetic: New Themes (5): - mad_scientist: Electric blue laboratory with bright cyan tones - mad_scientist_dark: Deep cyan with near-black background - cybernetic_lab: Classic blue tech with laboratory feel - robot_blue: Inspired by blue robot avatar aesthetic - electric_laboratory: High-contrast electric cyan New Animation Styles (5): - bubbles: Fishtank-style floating bubbles rising from bottom - embers: Glowing particles pulsing like burning embers - radiant: Pulsing sun with rays emanating from center - circuit: Dots traveling around edges like circuit paths - sparks: Electric sparks flashing randomly Features: - All animations are pure CSS/SVG (no JavaScript) - Lightweight and GPU-accelerated where possible - Can be disabled with disable_animations parameter - Animations automatically use theme colors - Fully compatible with all existing repo card parameters API Changes: - Added animation_style parameter (bubbles|embers|radiant|circuit|sparks|none) - Added disable_animations parameter (true|false) Documentation: - Added ANIMATION_EXAMPLES.md with comprehensive usage guide - Includes recommended theme + animation combinations - Full parameter reference and examples * 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! * feat: Add floating wave effect to text in bubbles animation Make the entire card feel like it's underwater by adding gentle wave animations to all text elements in the bubbles animation style. Text Animation Details: - Title: Floats with 4s wave cycle - Description lines: Each line has independent wave with staggered delays - Line 1: 3.8s cycle, 0s delay - Line 2: 3.5s cycle, 0.3s delay - Line 3: 4.2s cycle, 0.6s delay - Stats: Float with 3.8s cycle, 0.4s delay - All other text: 3.2s cycle with 0.2s delay Wave Patterns: - textFloatWave: Smooth sine wave (down → up → down) - textFloatWave2: Inverted wave (up → down → up) - textFloatWave3: Gentler variant with 1.5px amplitude Technical Implementation: - Uses CSS translateY transforms for smooth animation - Each element has unique timing to prevent synchronization - Amplitudes kept small (1.5-2px) for subtle, non-distracting effect - Combines with existing fadeIn animation for title - All timing uses ease-in-out for organic feel The result is a complete underwater immersion effect where text, creatures, and bubbles all move independently like they're floating in a cybernetic aquarium laboratory! * feat: Add horizontal wave effect to text in bubbles animation Implement a true character-by-character wave animation that ripples across the title text from left to right, creating a mesmerizing underwater effect. Implementation Details: - Created wrapTextInWave() helper function that wraps each character in a tspan element with staggered animation delays - Each character has a 0.05s delay from the previous one - Characters animate vertically (3px amplitude) in a 2s cycle - Wave travels smoothly from left to right across the entire title Technical Approach: - Custom wave title rendering for bubbles animation only - Hides default Card title via CSS when wave is active - Preserves card height by not using setHideTitle for wave mode - Maintains Firefox font size compatibility (15.5px) - Uses CSS :not(:has()) selector to conditionally hide default title Character Handling: - Spaces converted to non-breaking spaces (U+00A0) to maintain spacing - Each character gets unique animation-delay based on position - Works with any length title (auto-truncates at 35 chars like normal) Result: A smooth, flowing wave that travels across the text like ripples on water, perfectly complementing the jellyfish, starfish, and bubbles in the aquarium! * feat: Add parameterization and color-morphing to wave animations Enable full customization of the wave effect in bubbles animation with new parameters and add a mesmerizing color-morphing gradient option. New Parameters: 1. wave_speed (default: 2) - Controls wave cycle duration in seconds - Lower values = faster waves - Range: 0.5 to 5 seconds recommended 2. wave_amplitude (default: 3) - Controls vertical movement height in pixels - Higher values = bigger waves - Range: 1 to 10 pixels recommended 3. wave_delay (default: 0.05) - Controls delay between each character in seconds - Determines how fast wave travels horizontally - Range: 0.01 to 0.2 seconds recommended 4. color_morph (default: false) - Enables color morphing gradient effect - Letters cycle through theme colors smoothly - Animation cycle is 3x the wave_speed Color Morphing Implementation: - Animates through titleColor → iconColor → textColor → iconColor → titleColor - Uses CSS fill animation for smooth transitions - Combines with wave motion for dual-animation effect - Automatically uses theme colors for perfect integration Technical Details: - Parameters passed through API → renderRepoCard → getAnimationStyle - wrapTextInWave updated to conditionally add wave-char-morph class - CSS keyframes dynamically generated with user parameters - Proper type conversion (parseFloat) for numeric params in API - Maintains backward compatibility with default values Example Usage: - Fast big waves: wave_speed=1&wave_amplitude=6&wave_delay=0.03 - Slow gentle: wave_speed=3&wave_amplitude=2&wave_delay=0.08 - Color morph: color_morph=true (combines with any wave params) Documentation: - Added Wave Customization Parameters section - New usage examples showing different combinations - Parameter reference with ranges and recommendations - Examples of fast, slow, and color-morphing variations * feat: Add blinking eye and ring of fire animations to stats card rank circle Add two creative animation styles that replace the standard rank circle in stats cards: - "eye": Blinking eyeball with animated eyelids, dilating pupil, and iris colored by theme - "fire": Ring of 12 flickering flames with glowing center and animated rank letter Features: - Animated eyelid blink effect (4s cycle) with synchronized top/bottom movement - Pupil dilation animation (3s cycle) for organic eye effect - Ring of fire with 12 flames positioned around 40px radius circle - Flame flicker animation with scale and position variations - Glowing effects using radial gradients and filters - Theme-aware coloring that adapts to card's title and ring colors - New rank_animation parameter in API: "default", "eye", or "fire" All animations are pure CSS/SVG with no JavaScript required. * fix: Correct eye animation eyelid physics to use horizontal sliding doors Replace ellipse-based eyelids with rectangular "doors" that properly simulate blinking motion. The eyelids now: - Use rectangles instead of ellipses to avoid balloon effect - Top eyelid slides down from above (translateY: -38px → 0) - Bottom eyelid slides up from below (translateY: 38px → 0) - Both meet horizontally in the middle when closed - Create proper door-opening effect when eye opens This matches the natural physics of eyelids closing horizontally across the eye rather than spherical objects overlapping. --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent 8229c46 commit 8d27de3

6 files changed

Lines changed: 1045 additions & 12 deletions

File tree

‎ANIMATION_EXAMPLES.md‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
# 🎨 Cybernetic Mad Scientist Animation Styles
2+
3+
This document showcases the new animation styles and cybernetic themes for repo cards!
4+
5+
## 🤖 Cybernetic Themes
6+
7+
Five new themes inspired by a cybernetic mad scientist laboratory aesthetic:
8+
9+
### 1. **mad_scientist** - Electric Blue Laboratory
10+
Bright cyan and blue tones with a dark space background.
11+
```
12+
theme=mad_scientist
13+
```
14+
- Title: `#00d9ff` (bright cyan)
15+
- Text: `#7dd3fc` (sky blue)
16+
- Icons: `#38bdf8` (blue)
17+
- Border: `#0ea5e9` (deep blue)
18+
- Background: `#0c1021` (dark navy)
19+
20+
### 2. **mad_scientist_dark** - Deep Laboratory
21+
Darker, more intense cyan with near-black background.
22+
```
23+
theme=mad_scientist_dark
24+
```
25+
- Title: `#22d3ee` (cyan)
26+
- Text: `#67e8f9` (light cyan)
27+
- Icons: `#06b6d4` (darker cyan)
28+
- Border: `#0891b2` (teal)
29+
- Background: `#020617` (almost black)
30+
31+
### 3. **cybernetic_lab** - Classic Blue Tech
32+
Traditional tech blue with laboratory feel.
33+
```
34+
theme=cybernetic_lab
35+
```
36+
- Title: `#3b82f6` (blue)
37+
- Text: `#60a5fa` (light blue)
38+
- Icons: `#2563eb` (royal blue)
39+
- Border: `#1d4ed8` (deep blue)
40+
- Background: `#0a0e1a` (dark blue-black)
41+
42+
### 4. **robot_blue** - Robot Head Inspired
43+
Inspired by the blue robot avatar aesthetic.
44+
```
45+
theme=robot_blue
46+
```
47+
- Title: `#0ea5e9` (sky blue)
48+
- Text: `#7dd3fc` (light sky)
49+
- Icons: `#38bdf8` (bright blue)
50+
- Border: `#0284c7` (ocean blue)
51+
- Background: `#082f49` (dark teal)
52+
53+
### 5. **electric_laboratory** - Electric Cyan
54+
High-contrast electric cyan with modern lab feel.
55+
```
56+
theme=electric_laboratory
57+
```
58+
- Title: `#00ffff` (pure cyan)
59+
- Text: `#5eead4` (teal)
60+
- Icons: `#2dd4bf` (turquoise)
61+
- Border: `#14b8a6` (dark teal)
62+
- Background: `#0f172a` (slate black)
63+
64+
---
65+
66+
## ⚡ Animation Styles
67+
68+
Five unique animation effects for your repo cards:
69+
70+
### 1. **bubbles** - Fishtank Effect 🐠
71+
A complete aquarium experience with bubbles, glowing jellyfish, drifting starfish, and a mesmerizing wave text effect.
72+
```
73+
animation_style=bubbles
74+
```
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+
- **🌊 Horizontal wave text effect**: Letters ripple like a wave traveling across the text
79+
- Each character animates individually with a staggered delay
80+
- Creates a smooth left-to-right wave motion across the title
81+
- Fully customizable wave parameters (see below)
82+
- Optional color-morphing gradient effect
83+
- Jellyfish appear every ~12 seconds with gentle pulsing glow
84+
- Starfish drift across every ~15 seconds with slow rotation
85+
- All creatures layered behind text for depth
86+
- Perfect for: Calm, steady progress projects, marine/ocean themes, underwater aesthetics
87+
88+
**Wave Customization Parameters:**
89+
- `wave_speed` - Wave cycle duration in seconds (default: `2`)
90+
- Lower = faster wave, Higher = slower wave
91+
- Example: `wave_speed=1.5` for faster waves
92+
- `wave_amplitude` - Vertical movement in pixels (default: `3`)
93+
- How high each letter bounces
94+
- Example: `wave_amplitude=5` for bigger waves
95+
- `wave_delay` - Delay between each character in seconds (default: `0.05`)
96+
- Controls how quickly wave travels horizontally
97+
- Example: `wave_delay=0.08` for slower wave travel
98+
- `color_morph` - Enable color morphing gradient (default: `false`)
99+
- Letters cycle through theme colors
100+
- Example: `color_morph=true`
101+
102+
### 2. **embers** - Burning Particles 🔥
103+
Glowing particles pulse and float like hot embers.
104+
```
105+
animation_style=embers
106+
```
107+
- 12 glowing particles
108+
- Pulsing glow effect with blur
109+
- Gentle floating motion
110+
- 2-4 second animation cycles
111+
- Perfect for: Active, hot projects
112+
113+
### 3. **radiant** - Pulsing Sun ☀️
114+
Radiant rays emanate from the center with a pulsing core.
115+
```
116+
animation_style=radiant
117+
```
118+
- 16 rays radiating from center
119+
- Pulsing central core
120+
- Sequential wave animation
121+
- 2 second pulse cycle
122+
- Perfect for: Central, important projects
123+
124+
### 4. **circuit** - Edge Traveler 🔌
125+
Dots travel around the card edges like signals in a circuit.
126+
```
127+
animation_style=circuit
128+
```
129+
- 6 glowing dots traveling the perimeter
130+
- Glowing edge trail effects
131+
- Continuous loop motion
132+
- 4 second travel cycle
133+
- Perfect for: Tech, systematic projects
134+
135+
### 5. **sparks** - Electric Sparks ⚡
136+
Electric sparks flash randomly across the card.
137+
```
138+
animation_style=sparks
139+
```
140+
- 10 electric spark bursts
141+
- Random positions
142+
- Flash and fade effect
143+
- 5 second cycle with stagger
144+
- Perfect for: Energetic, innovative projects
145+
146+
---
147+
148+
## 🎯 Usage Examples
149+
150+
### Basic Animation
151+
```markdown
152+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&animation_style=bubbles)
153+
```
154+
155+
### With Cybernetic Theme
156+
```markdown
157+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=mad_scientist&animation_style=circuit)
158+
```
159+
160+
### Full Customization
161+
```markdown
162+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=robot_blue&animation_style=sparks&show_owner=true&all_stats=true)
163+
```
164+
165+
### Custom Wave Effect (Fast & Big)
166+
```markdown
167+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=mad_scientist&animation_style=bubbles&wave_speed=1&wave_amplitude=6&wave_delay=0.03)
168+
```
169+
170+
### Color Morphing Wave
171+
```markdown
172+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=electric_laboratory&animation_style=bubbles&color_morph=true)
173+
```
174+
175+
### Slow Gentle Wave
176+
```markdown
177+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=robot_blue&animation_style=bubbles&wave_speed=3&wave_amplitude=2&wave_delay=0.08)
178+
```
179+
180+
### Disable Animations (for static images)
181+
```markdown
182+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=electric_laboratory&disable_animations=true)
183+
```
184+
185+
---
186+
187+
## 🎨 Recommended Combinations
188+
189+
Here are some great theme + animation pairings:
190+
191+
### The Scientist's Lab
192+
```
193+
theme=mad_scientist&animation_style=bubbles
194+
```
195+
Blue laboratory with gentle bubbles rising - perfect for research projects.
196+
197+
### The Robot Workshop
198+
```
199+
theme=robot_blue&animation_style=circuit
200+
```
201+
Robot-inspired blues with circuit paths - ideal for robotics/automation.
202+
203+
### Electric Experiment
204+
```
205+
theme=electric_laboratory&animation_style=sparks
206+
```
207+
High-voltage cyan with electric sparks - great for exciting new projects.
208+
209+
### Burning Innovation
210+
```
211+
theme=cybernetic_lab&animation_style=embers
212+
```
213+
Tech blue with glowing embers - perfect for hot, active development.
214+
215+
### Radiant Core
216+
```
217+
theme=mad_scientist_dark&animation_style=radiant
218+
```
219+
Dark background with pulsing radiant center - excellent for core libraries.
220+
221+
---
222+
223+
## 📝 Parameters Reference
224+
225+
### Animation Parameters
226+
- `animation_style` - Animation effect to use
227+
- Options: `none`, `bubbles`, `embers`, `radiant`, `circuit`, `sparks`
228+
- Default: `none`
229+
230+
- `disable_animations` - Disable all animations
231+
- Options: `true`, `false`
232+
- Default: `false`
233+
234+
### Wave Customization Parameters (bubbles only)
235+
- `wave_speed` - Duration of one wave cycle in seconds
236+
- Range: `0.5` to `5` (recommended)
237+
- Default: `2`
238+
- Example: `wave_speed=1.5` (faster)
239+
240+
- `wave_amplitude` - Vertical movement height in pixels
241+
- Range: `1` to `10` (recommended)
242+
- Default: `3`
243+
- Example: `wave_amplitude=5` (bigger waves)
244+
245+
- `wave_delay` - Delay between each character in seconds
246+
- Range: `0.01` to `0.2` (recommended)
247+
- Default: `0.05`
248+
- Example: `wave_delay=0.08` (slower horizontal travel)
249+
250+
- `color_morph` - Enable color morphing gradient effect
251+
- Options: `true`, `false`
252+
- Default: `false`
253+
- Cycles through title, icon, and text colors
254+
- Example: `color_morph=true`
255+
256+
### All Compatible Parameters
257+
You can combine animations with all existing repo card parameters:
258+
- `theme` - Choose from 65+ themes (including 5 new cybernetic ones)
259+
- `title_color`, `icon_color`, `text_color`, `bg_color`, `border_color` - Custom colors
260+
- `hide_border`, `hide_title`, `hide_text` - Hide elements
261+
- `show_owner` - Show full username/repo
262+
- `show_issues`, `show_prs`, `show_age` - Show extra stats
263+
- `all_stats` - Show all available stats
264+
- `border_radius` - Customize corner rounding
265+
- `locale` - Set language
266+
267+
---
268+
269+
## 🎬 Animation Performance
270+
271+
All animations are:
272+
- ✅ Pure CSS/SVG (no JavaScript required)
273+
- ✅ Lightweight (minimal impact on file size)
274+
- ✅ Smooth (GPU-accelerated where possible)
275+
- ✅ Accessible (can be disabled with `disable_animations=true`)
276+
- ✅ Compatible with all modern browsers
277+
278+
---
279+
280+
## 🚀 Quick Start
281+
282+
1. Choose a theme from the cybernetic collection
283+
2. Pick an animation style that matches your project vibe
284+
3. Add to your README:
285+
286+
```markdown
287+
[![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=mad_scientist&animation_style=circuit)](https://github.com/hesreallyhim/your-repo)
288+
```
289+
290+
---
291+
292+
## 💡 Tips
293+
294+
1. **For READMEs viewed on GitHub**: All animations work perfectly in SVG!
295+
2. **For static documentation**: Use `disable_animations=true`
296+
3. **Performance**: Animations use minimal resources and won't slow page load
297+
4. **Accessibility**: Users with `prefers-reduced-motion` should disable animations
298+
5. **Caching**: Animation style is included in cache key, so changes update immediately
299+
300+
---
301+
302+
## 🎨 Color Customization
303+
304+
You can override theme colors while keeping animations:
305+
306+
```markdown
307+
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&animation_style=bubbles&title_color=ff00ff&icon_color=00ffff&bg_color=000000)
308+
```
309+
310+
Animations will automatically use your custom colors!
311+
312+
---
313+
314+
## 🧪 Experiment!
315+
316+
Don't be afraid to mix and match! Try different combinations to find the perfect look for your project. The cybernetic mad scientist aesthetic is all about creative experimentation! 🔬⚡🤖

‎api/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default async (req, res) => {
4848
border_color,
4949
rank_icon,
5050
show,
51+
rank_animation,
5152
} = req.query;
5253
res.setHeader("Content-Type", "image/svg+xml");
5354

@@ -131,6 +132,7 @@ export default async (req, res) => {
131132
disable_animations: parseBoolean(disable_animations),
132133
rank_icon,
133134
show: showStats,
135+
rank_animation: rank_animation || "default",
134136
}),
135137
);
136138
} catch (err) {

‎api/pin.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ export default async (req, res) => {
4242
show_prs,
4343
show_age,
4444
age_metric,
45+
animation_style,
46+
disable_animations,
47+
wave_speed,
48+
wave_amplitude,
49+
wave_delay,
50+
color_morph,
4551
} = req.query;
4652

4753
res.setHeader("Content-Type", "image/svg+xml");
@@ -116,6 +122,12 @@ export default async (req, res) => {
116122
show_prs: finalShowPrs,
117123
show_age: finalShowAge,
118124
age_metric: age_metric || "first",
125+
animation_style: animation_style || "none",
126+
disable_animations: parseBoolean(disable_animations),
127+
wave_speed: wave_speed ? parseFloat(wave_speed) : 2,
128+
wave_amplitude: wave_amplitude ? parseFloat(wave_amplitude) : 3,
129+
wave_delay: wave_delay ? parseFloat(wave_delay) : 0.05,
130+
color_morph: parseBoolean(color_morph),
119131
}),
120132
);
121133
} catch (err) {

0 commit comments

Comments
 (0)