Repository navigation
Conversation
The grid div was absolutely positioned against the initial containing block, so it spanned exactly one viewport from the top of the document: scrolling past the hero left the rest of the page on a plain background. A fixed viewport layer covers every screen for the entire scroll and skips scroll-driven repaints.
A fine pointer with no reduced-motion preference gets a subtle background-position drift (max 10px) away from the cursor, lerped in an rAF loop that stops once the pattern settles so idle sessions cost no frames. Touch devices and reduced-motion users get the static grid from the previous commit.
The 1px line grid read as graph paper; dots at the same 5% opacity and 1lh rhythm read as soft texture. Same fixed layer, same cursor drift, same fallbacks — only the background recipe changes.
Adapts the shadcn.io Particles background as the landing backdrop. Colors resolve from the theme tokens (logo purple in light, zinc gray in dark), the mouse position is tracked in a ref instead of React state, and the DPR transform is set rather than multiplied so repeated resizes do not zoom the particles.
Particles now live in document coordinates and are drawn offset by the scroll position, so they travel with the content while the canvas stays a viewport-sized layer. quantity becomes a density per viewport and scales across the document; particles fade in and out as they cross the visible screen, wrap only at the document edges, and respawn within the current viewport band. Reduced motion keeps a static field that still tracks scroll.
Landing backdrop: particle field that scrolls with the page
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
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.
This pull request replaces the static CSS grid background on the homepage with a new animated and theme-aware particle field. The main change is the introduction of the new
ParticlesReact component, which provides a performant, customizable, and accessibility-friendly canvas background. The homepage now imports and renders this component instead of the previous static background.Homepage visual/background update:
Particlescomponent (components/particles.tsx) that renders a canvas-based, animated particle field as the page background. This component adapts to theme changes, supports reduced motion for accessibility, and efficiently tracks scroll position so particles appear to move with the content.app/routes/home.tsxto import and render theParticlescomponent, replacing the previous static CSS grid background. [1] [2]