Skip to content

feat: port CursorGrid animation from react-bits - #25

Merged
DavidHDev merged 1 commit into
DavidHDev:mainfrom
adetyaz:feat/cursor-grid
Jul 30, 2026
Merged

feat: port CursorGrid animation from react-bits#25
DavidHDev merged 1 commit into
DavidHDev:mainfrom
adetyaz:feat/cursor-grid

Conversation

@adetyaz

@adetyaz adetyaz commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Ports the Cursor Grid animation from react-bits (ts-tailwind variant) — a canvas grid where cells near the cursor light up with a falloff-based glow and fade out over time, with optional click pulses and a static lattice overlay.
  • Preserves props, defaults, and behavior 1:1 with upstream, including the two-tier reactivity model: only cellSize changes rebuild the grid (canvas resize, ResizeObserver, listeners); every other visual prop (color, radius, falloff, opacities, etc.) repaints live without tearing anything down, mirroring react-bits' propsRef pattern via Svelte 5's automatic effect dependency tracking.
  • Registers the component in categories.ts (Animations subcategory, IMPLEMENTED_DEMOS, NEW badge) and adds its docs/demo page with full customize controls and prop table.

Test plan

  • npm run check — no errors/warnings in the new files
  • npm run lint — clean
  • npm run registry:build — jsrepo registry sync passes (categories.ts matches filesystem)
  • npm run build — production build succeeds
  • Manual verification in dev server: grid lights up under cursor, click pulses, sliders/color picker/falloff select/click-pulse switch all work, "Move Your Cursor" hint renders correctly in light/dark themes, "New" badge shows in sidebar nav

@DavidHDev
DavidHDev merged commit d05265c into DavidHDev:main Jul 30, 2026
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.

2 participants