Grid Canvas

This boilerplate text has been expanded to allow you to test the scrolling functionality. Notice that while you scroll up and down through this document, the interactive grid remains absolutely fixed in the background, anchoring the visual experience.

The color inversion is powered by a CSS blend mode. This means it will consistently interact with the foreground—inverting the colors of this text flawlessly—regardless of how the grid changes, what colors are applied, or how far down the page you have scrolled.

Adjusting the Grid: In the bottom right corner, there is a collapsible settings menu. You can use it to instantly alter the dimensions of the grid. Want to see a dense matrix? Or perhaps a chunky layout? The grid dynamically recalculates and reshapes itself into perfect squares without requiring a page reload.

The dynamic adjacency logic ensures that no matter how many rows or columns you select, the cells are aware of their neighbors. If you increase the hover duration to 500ms or 1000ms using the slider, you can easily "paint" a continuous path across the screen. The touching edges of active cells will dynamically flatten their rounded corners to merge into a single continuous block.

Try increasing the duration and swiping across the screen. The math powering the grid translates your mouse's viewport position into exact column and row indices in real-time, completely sidestepping any issues that might arise from scroll offsets.

This final paragraph just ensures that there is enough vertical height on most modern desktop monitors to trigger the scrollbar. Keep scrolling, keep hovering, and enjoy the robust configuration controls!