feat: Add cybernetic mad scientist themes and 5 animation styles (#14) #14
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
hesreallyhim
changed the title
…tarfish 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!
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!
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!
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
… 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.
…oors 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.
hesreallyhim
deleted the
claude/customize-repo-appearance-01M3xEHdnvcycyqnvwtLFPJK
branch
hesreallyhim
restored the
claude/customize-repo-appearance-01M3xEHdnvcycyqnvwtLFPJK
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
…repo cards
This commit introduces a creative suite of animations and themes inspired by a cybernetic mad scientist laboratory aesthetic:
New Themes (5):
New Animation Styles (5):
Features:
API Changes:
Documentation: