feat: add RainBackdrop animated rain background component - #33
Merged
Conversation
A canvas rAF rain layer as a drop-in sibling of Backdrop: theme-ink rain (white on machine, black on samaritan) with live recolor on theme flip, accent-red drop fraction (accentRatio, default 3%), intensity control, and splash-particle bursts at the bottom edge. Reduced motion renders a static sparse frame. Canvas backing store and drop count are bounded so very tall pages degrade in resolution instead of silently not drawing. Includes browser-mode tests (both motion paths), Storybook stories with a live-controls Playground, barrel export, and a minor changeset. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Merged
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
1 participant
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.
What
A new
RainBackdropcomponent — an animated, canvas-based rain background that drops in exactly where the graph-paperBackdropgoes (same wrapper contract; the grid is untouched, you pick per page).--pn-ink(white onmachine, black onsamaritan) and recolor live whendata-themeflips — a MutationObserver re-reads the tokens, no remount needed.intensity(0–1, default 0.5): rain amount; 0 disables.accentRatio(default 0.03): fraction of drops tinted--pn-accentred; 0 disables.speed: fall multiplier (floored at 0.05).splash(default true): drops hitting the bottom edge burst into 3–6 gravity-arc spray particles.prefers-reduced-motionrenders a static sparse frame, no rAF loop (library pattern viareducedMotion).Ships with browser-mode tests for both motion paths, Storybook stories (both themes + a live-controls Playground with an in-page ThemeToggle), the barrel export, and a minor changeset.
Why
A live rain alternative to the static grid backdrop: theme-aware (black rain in light mode, white in dark), with controllable amount, occasional red drops, and ground-impact "explosions".
Verification
pnpm check,pnpm lintclean;pnpm test300/300 across all three vitest projects; coverage gates hold (component at 98% statements / 100% lines).machine(3598 light / 0 dark px), only-black onsamaritan(0 / 3388), red accent pixels in both themes, bottom-edge splash activity, and consecutive frames differing (live animation). Screenshots visually confirmed.dtclamp,speedfloor docs).🤖 Generated with Claude Code