Open
Conversation
…ithub.com/codersforcauses/game-dev into issue-47-Add_explosions_to_committee_page
…ithub.com/codersforcauses/game-dev into issue-47-Add_explosions_to_committee_page
- Add 100px black circular crater behind explosion GIF - Position crater at explosion location with z-index below GIF - Apply to both Explosion component and click handler
- Increase debris count from 6 to 8 pieces - Increase debris size from 15-25px to 50-90px - Increase flight distance from 80-120px to 120-200px - Extend animation duration from 1s to 1.5s
- Generate irregular clip-path polygons (4-6 points) for each debris piece - Each piece gets unique torn/fragmented shape - Replace rectangular shapes with irregular polygons - Final effect: debris looks like torn pieces of the page flying away
- Create DebrisBurst component skeleton - Define Debris and Props TypeScript types - Add props for physics configuration (power, gravity, bounce, etc.) - Component returns null for now (functionality to be added)
…to issue-47-Add_explosions_to_committee_page
- Sync with latest changes from main branch
- Make bomb image clickable to trigger 10 explosions across page - Remove 'Press Me!' button from landing page - Reduce explosion sound volume to 10% - Add framer-motion dependency for Footer component
- Make bomb image clickable to trigger 10 page-wide explosions - Remove 'Press Me!' button from landing page - Reduce explosion sound volume to 10% - Optimize DebrisBurst with direct DOM manipulation (no React re-renders) - Simplify debris CSS (removed expensive shadows and filters) - Add click throttling (100ms) to prevent spam - Limit max concurrent debris bursts to 5 - Reduce debris count from 26 to 8 per explosion - Shorten debris lifetimes for faster cleanup
- Create Crater.tsx component with SVG-based crater rendering - Implement radial gradients for depth effect (void center to lighter edges) - Add rim highlight gradient for 3D appearance - Integrate Crater component into Explosion.tsx - Replace simple black div with new SVG crater component
- Import framer-motion and wrap main container with motion.div - Add isShaking state to control shake animation - Implement shake animation with horizontal/vertical movement - Trigger shake when bomb is clicked (400ms duration) - Use easeOut transition for natural shake decay
- Add crater-expand keyframe animation (scale 0.15 to 1.0) - Animate crater from small to full size over 0.4s - Include opacity fade-in for smooth appearance - Combine with existing crater-fade animation - Set transform-origin to center for proper scaling
- Add generateCracks() function to create radiating fissures - Generate 4-6 random cracks per crater instance - Lines start at crater edge and extend outward - Random angles and lengths for organic appearance - Dark stroke styling for visibility
- Update generateCracks() to create polygon paths instead of lines - Cracks are 3-5 units wide at base, tapering to sharp point - Use filled polygon shapes for more realistic appearance - Add stroke for depth and definition - Create triangle-shaped cracks (base -> tip -> base)
- Adjust start radius to 92% to ensure cracks start inside crater - Reduce base width slightly (2.5-4 units) for better fit - Position base points to guarantee attachment to irregular edge - Cracks now properly connect to crater boundary
- Add position parameter support to useExplosions hook - Pass click coordinates to triggerExplosions - Fix crater centering with translate transform - Remove redundant manual DOM crater creation code
- Create Smoke component with framer-motion animations - Rising smoke particles with varying sizes and opacity - Horizontal drift and staggered timing for realistic effect - Uses radial gradients and blur for soft smoke appearance
- Replace complex generateJaggedPath with simpler generateCraterShape - Use polygon points instead of SVG paths for crater and fissures - Simplify to 3-layer crater structure (outer, inner, deep) - Use crater-punch and fissure-open animation references - Maintain tapered fissure cracks with proper attachment to crater
- Add crater-punch animation for crater expansion effect - Add fissure-open animation for crack opening effect - Animations support the restored Crater component structure
- Add React.memo to prevent unnecessary re-renders - Improve performance when multiple explosions are active - Import React for memo functionality
- Import and use Smoke component for rising smoke effect - Increase crater size from 100 to 120 for better visibility - Remove crater-expand animation, use only crater-fade - Remove transformOrigin from crater styling - Smoke particles rise with staggered timing and drift
- Update position parameter comment to be more descriptive - Update inline comment for position usage to match original wording
- Remove crater-punch animation from all crater layers for instant appearance - Remove fissure-open animation from crack fissures - Remove shadow/depth layer from fissures that created unwanted shadow effect - Crater now appears instantly without expanding animation for more natural look
Crater changes: - Remove expanding animations (crater-punch, fissure-open) for instant appearance - Remove shadow layer from fissures for cleaner look - Crater and cracks now appear immediately without scale animation Smoke changes: - Replace basic div smoke with SVG-based turbulence system - Add feTurbulence filter for procedural fractal noise texture - Add feDisplacementMap for organic, irregular smoke edges - Add feGaussianBlur for soft, realistic smoke appearance - Three-part effect: central cloud, 8 expanding puffs, 3 rising wisps - Earthy brown/gray color palette with radial gradients
Smoke optimizations: - Share single SVG filter instead of 12 separate filters - Reduce smoke puffs from 8 to 5 - Reduce wisps from 3 to 1 - Use CSS blur for central burst (GPU accelerated) - Add willChange hints for GPU optimization - Reduce duration from 2500ms to 2000ms Crater optimizations: - Remove unused blur filter definition - Add contain: layout style for better paint performance - Reduce fissures from 3-5 to 2-4 - Simplify fissures to single polygon (remove stroke highlights) Explosion optimizations: - Reduce debris count from 8 to 6 - Reduce debris power and gravity - Reduce crater size from 120 to 110 - Reduce crater fade from 3s to 2.5s - Reduce smoke duration to 1800ms - Add willChange: opacity for GPU optimization Total DOM elements reduced from ~25+ to ~15 per explosion
…ns_to_committee_page
- Add explosion system with click-to-explode functionality - Create Explosion, DebrisBurst, Smoke, and Crater components - Add useExplosions hook for managing explosion state - Implement click explosions on landing page with bomb trigger - Add click explosions to committee/about page - Add explosion sound effects and visual assets - Update framer-motion to v12.29.0 - Add CSS animations for crater effects - Include screen shake animation for bomb explosions
Contributor
|
frontend checks are failing, can you please fix them up? |
Collaborator
Author
|
I think its done. Lmk if you need something else done |
Collaborator
Author
|
Actually I have found some issues.
I can fix this now and lmk if there is anything else I can do to improve the code please |
SafetyInObscurity
requested changes
Feb 7, 2026
Collaborator
SafetyInObscurity
left a comment
SafetyInObscurity
left a comment
There was a problem hiding this comment.
Having explosions whenever anything is clicked on the landing page is a bit much. We can just leave it to the bomb.
Collaborator
There was a problem hiding this comment.
We may need to remove this duplicate explosion gif
Collaborator
There was a problem hiding this comment.
Ideally we should try to keep our dependencies constant where possible. Is there a reason we needed a more recent version of framer-motion?
Collaborator
Author
There was a problem hiding this comment.
Looking at it now, the explosion features only use basic framer-motion APIs (motion.div, animate, transition) that have been stable for a long time. The version bump wasn't intentional - it likely happened when I ran npm install framer-motion to fix a missing dependency error from the Footer component (which was added in a different branch).
…on logic - Extract ~60 lines of duplicated explosion state/handlers from pages - Handle click throttling, debris management, and container refs - Track debris timeouts for proper cleanup on unmount - Limit max concurrent debris bursts to prevent lag
- Extract duplicated explosion/debris rendering JSX from pages - Single source of truth for explosion and DebrisBurst configuration - Uses consistent @/ import paths - Reduces code duplication in index.tsx and about.tsx
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
💥 Add Interactive Explosion Effects to Landing Page
Summary
This PR adds interactive explosion effects that trigger when users click anywhere on the page or click the bomb icon. The explosions feature realistic craters, flying debris, smoke effects, and sound effects.
Features Added
🎯 Click-to-Explode Functionality
Click anywhere on the landing page to trigger an explosion at that position
Click the bomb icon for a massive multi-explosion effect with screen shake
🕳️ Crater System
SVG-based crater with depth shading using radial gradients
Irregular/jagged crater edges for realistic appearance
Tapered crack fissures extending from crater (wide at base, sharp tips)
Smooth fade-out animation
💨 Smoke Effects
SVG turbulence-based smoke with organic, irregular edges
Central expanding smoke cloud
Individual smoke puffs expanding outward radially
Rising smoke wisps
🪨 Debris System (DebrisBurst)
Physics-based debris particles with gravity, air drag, and rotation
Rock-like styling with irregular torn shapes
requestAnimationFrame loop for smooth 60fps animation
Direct DOM manipulation for optimal performance
🔊 Sound Effects
Random explosion sound selection (4 variants)
Volume control (10%)
📱 Screen Shake
Framer-motion powered shake effect on bomb click
Performance Optimizations
React.memo on all explosion components
Shared SVG filters instead of per-element filters
Direct DOM manipulation in DebrisBurst (no React re-renders per frame)
Reduced particle counts (debris: 6, smoke puffs: 5)
willChange hints for GPU acceleration
contain: layout style for better paint performance
Click throttling (100ms minimum between clicks)