Separator
Layoutinline sandboxAn interactive separator with a wobbling string animation. The line bends toward the mouse cursor and oscillates with a satisfying spring effect when released.
separator
divider
wobble animation
interactive separator
physics animation
Preview
Adjust damping (lower = more bouncy) and frequency to customize the wobble feel.
Uses GSAP for smooth, performant animations.
Installation
Use the shadcn CLI to install this component:
npx shadcn@latest add https://messyui.dev/r/separator.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| baseY | number | 50 | Vertical position of the line in viewbox units (0-100) |
| maxDisplacement | number | 40 | Maximum distance the line can bend from center |
| hoverZoneHeight | number | 100 | Height of the hover detection zone in pixels |
| strokeWidth | number | 2 | Thickness of the separator line |
| damping | number | 0.15 | Damping factor (0-1, lower = more oscillations) |
| frequency | number | 8 | Oscillation frequency (higher = faster wobble) |
| duration | number | 1.5 | Duration of the wobble animation in seconds |
| className | string | "" | Additional CSS classes for custom styling (e.g., width control) |