Repository navigation
Landing backdrop: particle field that scrolls with the page - #40
Merged
Merged
Conversation
andesvel
changed the title
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.
andesvel
force-pushed
the
feat/parallax-grid
branch
from
September 23, 2026 23:32
e286fc0 to
4eeb721
Compare
andesvel
changed the title
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.
What
Replaces the experimental line-grid backdrop with a canvas particle field, adapted from the shadcn.io Particles component:
components/particles.tsx(new): particles drift slowly, react to the cursor with a magnetism pull, and fade in/out at the screen edges.quantityis a density per viewport, scaled across the document (140/viewport after tuning), with offscreen particles culled per frame.--primary) in light, zinc gray (--muted-foreground) in dark; re-resolves on theme switch.setTransforminstead of accumulatingctx.scale(), mouse tracked in a ref (no re-render per mousemove), dropped the vignette/bg-neutral-950/use client, addedpointer-events-none -z-10.Branch history: this started as a full-page grid, became a dot-matrix with cursor parallax, then converged on the particle field per review — intermediate commits are kept for the record.
Verification
pnpm buildclean (run per commit)/: scroll the page (particles travel with content), move the cursor (magnetism), toggle theme