Skip to content

feat: animated landing page hero background#1002

Open
Humoudideas77 wants to merge 1 commit intoSolFoundry:mainfrom
Humoudideas77:feat/bounty-850-hero-animation
Open

feat: animated landing page hero background#1002
Humoudideas77 wants to merge 1 commit intoSolFoundry:mainfrom
Humoudideas77:feat/bounty-850-hero-animation

Conversation

@Humoudideas77
Copy link
Copy Markdown

Closes #850

Summary

Replaced the static CSS-based hero background with a canvas-based animated system featuring a forge/molten theme:

  • Floating embers: 30+ ember particles rising from the bottom with glow effects and wobble motion
  • Spark bursts: Random spark explosions at intervals across the hero area
  • Animated gradient mesh: Three color orbs (purple, magenta, emerald) slowly drifting with radial gradients
  • Heat haze: Subtle animated wavy lines near the bottom for a molten/forge effect
  • Grid overlay: Rendered directly on canvas with minimal opacity
  • Performance: DPR-aware rendering capped at 2x, lifecycle-managed animation loop, smooth 60fps

Changes

  • HeroCanvas.tsx: New canvas component with particle system, gradient mesh, and heat effects
  • HeroSection.tsx: Replaced static background layers and EmberParticles with the new HeroCanvas component

Wallet

humoudideas77

- Canvas particle system with floating embers and spark bursts
- Animated gradient mesh with purple/magenta/emerald orbs
- Heat haze effect near bottom
- Subtle grid overlay rendered on canvas
- Responsive with DPR-aware rendering
- Smooth 60fps performance with lifecycle-managed animation loop
- Replaces static CSS background layers and EmberParticles

Closes SolFoundry#850
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🏭 Bounty T2: Animated Landing Page Hero Background

1 participant