Add animated ASCII ridged-mountains background to the home page#282
Merged
Conversation
Ports ComputerK's "ridged mountains" CodePen (jENaeKp) from p5.js to a hand-rolled Canvas2D loop: a grid of ASCII characters shaded by ridged Perlin noise, panning slowly for a living terrain texture. Theme-aware (paints the app's --foreground color), respects prefers-reduced-motion, and follows the existing wobble/boil system's no-animation-library convention. Fixes #280 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VZWExYDE1QhSsz5Z5ofybC
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The texture now starts at ~6% opacity and eases up to full contrast over 6s (smoothstep), so the logo reads first and the terrain grows in behind it rather than appearing at full intensity immediately. Skipped under prefers-reduced-motion, which still renders straight at the resting frame. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VZWExYDE1QhSsz5Z5ofybC
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
2 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.
Summary
AsciiTerrainBackground, a full-bleed<canvas>that renders a grid of ASCII characters shaded by animated ridged Perlin noise behind the home page's hero content — a native port of ComputerK's "ridged mountains" CodePen (p5.js) to a hand-rolled Canvas2D loop, matching the app's existing no-animation-library convention (ArkaikLogoBoil, the wobble system).lib/background/perlin.ts(deterministic 2D Perlin noise) andlib/background/constants.ts(tuning knobs ported from the pen'sCONFIG).--foregroundcustom property at a low, brightness-modulated alpha, re-reading it live whenThemeToggleflips thedarkclass.prefers-reduced-motion: reduce— renders a single static frame instead of animating.app/page.tsx, layered behind the existing radial-gradient vignette so hero content stays legible.Closes #280.
Test plan
npm run lintprefers-reduced-motion: reduce(confirmed two frames captured 1.5s apart are pixel-identical in reduced motion, and differ in normal mode).Lab Note
Generated by Claude Code