feat: add premium wave and bounce entrance animations

[vivek0369]

feat: add premium wave and bounce entrance animations

🎯 Summary

This PR introduces two new premium SVG/CSS entrance animations — wave and bounce — for CommitPulse's 3D isometric monolith visualization. These animations extend the existing &entrance= customization parameter, giving users more visually engaging ways to showcase their GitHub contribution activity.

Closes #<ISSUE_NUMBER>

---

✨ New Animations

🌊 &entrance=wave

Blocks grow upward with a sweeping overshoot crest (scaleY: 0 → 1.15 → 1).

Since towers already use staggered animation delays based on grid position ((row + col) * 0.015s), the animation naturally propagates across the monolith, creating a smooth left-to-right wave effect.

Keyframe: wave-up
Easing: cubic-bezier(0.16, 1, 0.3, 1)

Result

• Smooth cascading motion

• Premium visual appearance

• Maintains existing rendering performance

---

🏀 &entrance=bounce

Blocks enter from above (translateY: -40px → 0) and settle using a multi-step elastic bounce:

0 → -10px → 0 → -4px → 0

The decreasing bounce amplitude simulates natural physics and provides a playful, dynamic entrance effect.

Keyframe: bounce-in
Easing: cubic-bezier(0.28, 0.84, 0.42, 1)

Result

• Physics-inspired motion

• Improved visual engagement

• Smooth landing animation

---

🔧 Changes Made

File | Description -- | -- lib/svg/animations.ts | Added wave-up and bounce-in keyframes to getTowerAnimationCSS() lib/svg/generator.ts | Extended renderStyle() entrance union to support 'wave' and 'bounce' lib/validations.ts | Added new values to Zod .enum() validation types/index.ts | Updated BadgeParams.entrance type definitions types/index.test-d.ts | Updated compile-time type assertions lib/svg/animations.test.ts | Added unit tests for both new animations

---

🧪 Testing

Added Tests

• ✅ Wave animation keyframe generation

• ✅ Bounce animation keyframe generation

• ✅ Correct CSS output generation

• ✅ Type validation coverage

• ✅ Schema validation coverage

Accessibility

• ✅ Fully respects @media (prefers-reduced-motion: reduce)

• ✅ Animations disabled when reduced motion is requested

• ✅ Static rendering fallback maintained

Scaling Verification

• ✅ Scale factor (sf) applied correctly to:

  • translateY offsets

  • bounce amplitudes

  • transform origins

  • animation transforms

Validation

• ✅ Unknown entrance values continue to fall back to 'rise'

• ✅ Existing behavior preserved through Zod .catch('rise')

---

📖 Usage

Wave Entrance

![Streak](https://commitpulse.vercel.app/api/streak?user=USERNAME&entrance=wave)

Bounce Entrance

![Streak](https://commitpulse.vercel.app/api/streak?user=USERNAME&entrance=bounce)

---

🔄 Backward Compatibility

This change is fully backward compatible.

Existing entrance values continue to function exactly as before:

• rise

• fade

• slide

• none

No breaking changes were introduced.

---

🚀 Benefits

• Adds premium visual customization options

• Improves GitHub profile presentation

• Enhances user personalization

• Demonstrates advanced SVG/CSS animation capabilities

• Maintains performance and accessibility standards

---

📋 Checklist

• Feature implemented

• Unit tests added

• Type definitions updated

• Validation schema updated

• Accessibility support included

• Existing functionality preserved

• Documentation updated

• Lint checks passed

• Tests passing

• DCO sign-off completed

Related Issue

Fixes #5790

[vercel]

@vivek0369 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

✨ No significant bundle size changes detected.

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3628.49 KB	3628.47 KB	+0.02 KB (+0.00%)
Total CSS	284.92 KB	284.92 KB	0 B

[Aamod-Dev]

Difficulty: intermediate – Adds wave/bounce entrance animations to animations.ts with keyframes, updates generator.ts and validations.ts enum, includes tests.

Quality: clean – Complete implementation with cubic-bezier easing, transform-origin handling.

Type: feature – New premium animation options for SVG towers.

Nice animations!

[github-actions]

🎉 Congratulations @vivek0369! Your PR has been successfully merged. 🚀

Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.

⚠️ Important for GSSoC Contributors:
You are strictly advised to join our Discord Server as it is mandatory for all GSSoC participants. All important announcements, point claims, and community discussions happen there.

Keep building! 💻✨