Row of Lines
An interactive horizontal line pattern built with SVG. Lines respond to mouse hover, with the closest line becoming thicker and surrounding lines gaining progressive thickness.
Preview
Hover over the lines to see them respond. The closest line becomes 4px thick, with surrounding lines gaining progressive thickness. The animation adapts to your design system colors and theme.
Features
- SVG-based horizontal line pattern
- Interactive mouse hover effects
- Lines respond to mouse position with dynamic thickness
- Closest line becomes 4px thick on hover
- Surrounding lines gain progressive thickness
- Uses design system color tokens for dynamic theming
- Responsive SVG that adapts to container width
- Lightweight and performant SVG rendering
- Scalable vector graphics for crisp display at any size
Usage
Import and use the RowOfLines component:
import RowOfLines from "@/components/lattice/RowOfLines";
export default function MyComponent() {
return (
<div className="w-full">
<RowOfLines />
</div>
);
}Configuration
The animation automatically reads from CSS custom properties:
--surface- Background color--on-surface- Line color
The animation height is fixed at 480px, and the width adapts to the container. The component handles theme changes automatically and includes proper cleanup on unmount.
Implementation Details
Individual Lines
The horizontal line pattern is created using individual SVG line elements. Lines are dynamically generated based on the container height, with a spacing of 20 pixels between each line.
Mouse Interactivity
The component tracks mouse position and calculates the distance to each line. The closest line to the mouse cursor becomes 4px thick, with surrounding lines gaining progressive thickness based on their distance from the cursor.
Thickness Calculation
Lines within a radius of 3 line spacings (60px) are affected by the mouse hover. The thickness is calculated using a normalized distance function, creating a smooth gradient effect from the cursor position.
Rendering
The animation is rendered using SVG, providing crisp vector graphics at any resolution. Individual line elements allow for precise control over each line's appearance and interactivity.