Skip to content

Claude/animated image waterfall xk ez o#63

Open
gabyzif wants to merge 2 commits into
wayou:gh-pagesfrom
gabyzif:claude/animated-image-waterfall-XKEzO
Open

Claude/animated image waterfall xk ez o#63
gabyzif wants to merge 2 commits into
wayou:gh-pagesfrom
gabyzif:claude/animated-image-waterfall-XKEzO

Conversation

@gabyzif

@gabyzif gabyzif commented Feb 7, 2026

Copy link
Copy Markdown

No description provided.

Adds a visually rich image waterfall at the bottom of the page featuring:
- 40 random images from picsum.photos in a CSS masonry layout
- GSAP ScrollTrigger cascade entrance animations with rotation and scale
- Parallax floating effect on scroll for depth
- Hover effects with scale, shadow, and overlay transitions
- Responsive columns (5 -> 4 -> 3 -> 2 -> 1) for all screen sizes
- Smooth gradient transition from game area to gallery

https://claude.ai/code/session_01TYNPHgbi2ZaLuDy3z495fZ
Refactors the waterfall from a scroll-based section to a fullscreen
overlay that activates when the dino crashes. Images rain down with
GSAP animations (fall + sway + rotation). Clears on game restart.

- Hook into Runner.gameOver() and Runner.restart() in index.js
- Replace scroll section with fixed overlay (#waterfall-overlay)
- Remove ScrollTrigger dependency (no longer needed)
- Images spawn staggered with random positions, sizes, and physics

https://claude.ai/code/session_01TYNPHgbi2ZaLuDy3z495fZ
@Dear-koma

Dear-koma commented Feb 7, 2026 via email

Copy link
Copy Markdown

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.

3 participants