Skip to content

feat: Add cybernetic mad scientist themes and 5 animation styles (#14) #14

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
hesreallyhim merged 7 commits into from
Nov 19, 2025
Merged

feat: Add cybernetic mad scientist themes and 5 animation styles (#14) #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b961d19
feat: Add cybernetic mad scientist themes and 5 animation styles for …
claude Nov 17, 2025
e5a6b83
feat: Enhance bubbles animation with glowing jellyfish and drifting s…
claude Nov 17, 2025
b9cfef1
feat: Add floating wave effect to text in bubbles animation
claude Nov 17, 2025
63e9583
feat: Add horizontal wave effect to text in bubbles animation
claude Nov 17, 2025
e836ae0
feat: Add parameterization and color-morphing to wave animations
claude Nov 17, 2025
b391d23
feat: Add blinking eye and ring of fire animations to stats card rank…
claude Nov 17, 2025
123356a
fix: Correct eye animation eyelid physics to use horizontal sliding d…
claude Nov 17, 2025
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
316 changes: 316 additions & 0 deletions ANIMATION_EXAMPLES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
# 🎨 Cybernetic Mad Scientist Animation Styles

This document showcases the new animation styles and cybernetic themes for repo cards!

## 🤖 Cybernetic Themes

Five new themes inspired by a cybernetic mad scientist laboratory aesthetic:

### 1. **mad_scientist** - Electric Blue Laboratory
Bright cyan and blue tones with a dark space background.
```
theme=mad_scientist
```
- Title: `#00d9ff` (bright cyan)
- Text: `#7dd3fc` (sky blue)
- Icons: `#38bdf8` (blue)
- Border: `#0ea5e9` (deep blue)
- Background: `#0c1021` (dark navy)

### 2. **mad_scientist_dark** - Deep Laboratory
Darker, more intense cyan with near-black background.
```
theme=mad_scientist_dark
```
- Title: `#22d3ee` (cyan)
- Text: `#67e8f9` (light cyan)
- Icons: `#06b6d4` (darker cyan)
- Border: `#0891b2` (teal)
- Background: `#020617` (almost black)

### 3. **cybernetic_lab** - Classic Blue Tech
Traditional tech blue with laboratory feel.
```
theme=cybernetic_lab
```
- Title: `#3b82f6` (blue)
- Text: `#60a5fa` (light blue)
- Icons: `#2563eb` (royal blue)
- Border: `#1d4ed8` (deep blue)
- Background: `#0a0e1a` (dark blue-black)

### 4. **robot_blue** - Robot Head Inspired
Inspired by the blue robot avatar aesthetic.
```
theme=robot_blue
```
- Title: `#0ea5e9` (sky blue)
- Text: `#7dd3fc` (light sky)
- Icons: `#38bdf8` (bright blue)
- Border: `#0284c7` (ocean blue)
- Background: `#082f49` (dark teal)

### 5. **electric_laboratory** - Electric Cyan
High-contrast electric cyan with modern lab feel.
```
theme=electric_laboratory
```
- Title: `#00ffff` (pure cyan)
- Text: `#5eead4` (teal)
- Icons: `#2dd4bf` (turquoise)
- Border: `#14b8a6` (dark teal)
- Background: `#0f172a` (slate black)

---

## ⚡ Animation Styles

Five unique animation effects for your repo cards:

### 1. **bubbles** - Fishtank Effect 🐠
A complete aquarium experience with bubbles, glowing jellyfish, drifting starfish, and a mesmerizing wave text effect.
```
animation_style=bubbles
```
- 8 bubbles floating upward with varying sizes and speeds
- 2 glowing jellyfish with wavy tentacles drifting left to right
- 2 starfish slowly rotating and drifting right to left
- **🌊 Horizontal wave text effect**: Letters ripple like a wave traveling across the text
- Each character animates individually with a staggered delay
- Creates a smooth left-to-right wave motion across the title
- Fully customizable wave parameters (see below)
- Optional color-morphing gradient effect
- Jellyfish appear every ~12 seconds with gentle pulsing glow
- Starfish drift across every ~15 seconds with slow rotation
- All creatures layered behind text for depth
- Perfect for: Calm, steady progress projects, marine/ocean themes, underwater aesthetics

**Wave Customization Parameters:**
- `wave_speed` - Wave cycle duration in seconds (default: `2`)
- Lower = faster wave, Higher = slower wave
- Example: `wave_speed=1.5` for faster waves
- `wave_amplitude` - Vertical movement in pixels (default: `3`)
- How high each letter bounces
- Example: `wave_amplitude=5` for bigger waves
- `wave_delay` - Delay between each character in seconds (default: `0.05`)
- Controls how quickly wave travels horizontally
- Example: `wave_delay=0.08` for slower wave travel
- `color_morph` - Enable color morphing gradient (default: `false`)
- Letters cycle through theme colors
- Example: `color_morph=true`

### 2. **embers** - Burning Particles 🔥
Glowing particles pulse and float like hot embers.
```
animation_style=embers
```
- 12 glowing particles
- Pulsing glow effect with blur
- Gentle floating motion
- 2-4 second animation cycles
- Perfect for: Active, hot projects

### 3. **radiant** - Pulsing Sun ☀️
Radiant rays emanate from the center with a pulsing core.
```
animation_style=radiant
```
- 16 rays radiating from center
- Pulsing central core
- Sequential wave animation
- 2 second pulse cycle
- Perfect for: Central, important projects

### 4. **circuit** - Edge Traveler 🔌
Dots travel around the card edges like signals in a circuit.
```
animation_style=circuit
```
- 6 glowing dots traveling the perimeter
- Glowing edge trail effects
- Continuous loop motion
- 4 second travel cycle
- Perfect for: Tech, systematic projects

### 5. **sparks** - Electric Sparks ⚡
Electric sparks flash randomly across the card.
```
animation_style=sparks
```
- 10 electric spark bursts
- Random positions
- Flash and fade effect
- 5 second cycle with stagger
- Perfect for: Energetic, innovative projects

---

## 🎯 Usage Examples

### Basic Animation
```markdown
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&animation_style=bubbles)
```

### With Cybernetic Theme
```markdown
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=mad_scientist&animation_style=circuit)
```

### Full Customization
```markdown
![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)
```

### Custom Wave Effect (Fast & Big)
```markdown
![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)
```

### Color Morphing Wave
```markdown
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=electric_laboratory&animation_style=bubbles&color_morph=true)
```

### Slow Gentle Wave
```markdown
![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)
```

### Disable Animations (for static images)
```markdown
![Repo Card](https://your-domain.vercel.app/api/pin?username=hesreallyhim&repo=your-repo&theme=electric_laboratory&disable_animations=true)
```

---

## 🎨 Recommended Combinations

Here are some great theme + animation pairings:

### The Scientist's Lab
```
theme=mad_scientist&animation_style=bubbles
```
Blue laboratory with gentle bubbles rising - perfect for research projects.

### The Robot Workshop
```
theme=robot_blue&animation_style=circuit
```
Robot-inspired blues with circuit paths - ideal for robotics/automation.

### Electric Experiment
```
theme=electric_laboratory&animation_style=sparks
```
High-voltage cyan with electric sparks - great for exciting new projects.

### Burning Innovation
```
theme=cybernetic_lab&animation_style=embers
```
Tech blue with glowing embers - perfect for hot, active development.

### Radiant Core
```
theme=mad_scientist_dark&animation_style=radiant
```
Dark background with pulsing radiant center - excellent for core libraries.

---

## 📝 Parameters Reference

### Animation Parameters
- `animation_style` - Animation effect to use
- Options: `none`, `bubbles`, `embers`, `radiant`, `circuit`, `sparks`
- Default: `none`

- `disable_animations` - Disable all animations
- Options: `true`, `false`
- Default: `false`

### Wave Customization Parameters (bubbles only)
- `wave_speed` - Duration of one wave cycle in seconds
- Range: `0.5` to `5` (recommended)
- Default: `2`
- Example: `wave_speed=1.5` (faster)

- `wave_amplitude` - Vertical movement height in pixels
- Range: `1` to `10` (recommended)
- Default: `3`
- Example: `wave_amplitude=5` (bigger waves)

- `wave_delay` - Delay between each character in seconds
- Range: `0.01` to `0.2` (recommended)
- Default: `0.05`
- Example: `wave_delay=0.08` (slower horizontal travel)

- `color_morph` - Enable color morphing gradient effect
- Options: `true`, `false`
- Default: `false`
- Cycles through title, icon, and text colors
- Example: `color_morph=true`

### All Compatible Parameters
You can combine animations with all existing repo card parameters:
- `theme` - Choose from 65+ themes (including 5 new cybernetic ones)
- `title_color`, `icon_color`, `text_color`, `bg_color`, `border_color` - Custom colors
- `hide_border`, `hide_title`, `hide_text` - Hide elements
- `show_owner` - Show full username/repo
- `show_issues`, `show_prs`, `show_age` - Show extra stats
- `all_stats` - Show all available stats
- `border_radius` - Customize corner rounding
- `locale` - Set language

---

## 🎬 Animation Performance

All animations are:
- ✅ Pure CSS/SVG (no JavaScript required)
- ✅ Lightweight (minimal impact on file size)
- ✅ Smooth (GPU-accelerated where possible)
- ✅ Accessible (can be disabled with `disable_animations=true`)
- ✅ Compatible with all modern browsers

---

## 🚀 Quick Start

1. Choose a theme from the cybernetic collection
2. Pick an animation style that matches your project vibe
3. Add to your README:

```markdown
[![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)
```

---

## 💡 Tips

1. **For READMEs viewed on GitHub**: All animations work perfectly in SVG!
2. **For static documentation**: Use `disable_animations=true`
3. **Performance**: Animations use minimal resources and won't slow page load
4. **Accessibility**: Users with `prefers-reduced-motion` should disable animations
5. **Caching**: Animation style is included in cache key, so changes update immediately

---

## 🎨 Color Customization

You can override theme colors while keeping animations:

```markdown
![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)
```

Animations will automatically use your custom colors!

---

## 🧪 Experiment!

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! 🔬⚡🤖
2 changes: 2 additions & 0 deletions api/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default async (req, res) => {
border_color,
rank_icon,
show,
rank_animation,
} = req.query;
res.setHeader("Content-Type", "image/svg+xml");

Expand Down Expand Up @@ -131,6 +132,7 @@ export default async (req, res) => {
disable_animations: parseBoolean(disable_animations),
rank_icon,
show: showStats,
rank_animation: rank_animation || "default",
}),
);
} catch (err) {
Expand Down
12 changes: 12 additions & 0 deletions api/pin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ export default async (req, res) => {
show_prs,
show_age,
age_metric,
animation_style,
disable_animations,
wave_speed,
wave_amplitude,
wave_delay,
color_morph,
} = req.query;

res.setHeader("Content-Type", "image/svg+xml");
Expand Down Expand Up @@ -116,6 +122,12 @@ export default async (req, res) => {
show_prs: finalShowPrs,
show_age: finalShowAge,
age_metric: age_metric || "first",
animation_style: animation_style || "none",
disable_animations: parseBoolean(disable_animations),
wave_speed: wave_speed ? parseFloat(wave_speed) : 2,
wave_amplitude: wave_amplitude ? parseFloat(wave_amplitude) : 3,
wave_delay: wave_delay ? parseFloat(wave_delay) : 0.05,
color_morph: parseBoolean(color_morph),
}),
);
} catch (err) {
Expand Down
Loading
Loading