The HoverFollower component allows elements to follow the mouse cursor on hover, creating interactive visual effects.
It is useful for dashboards, galleries, cards, or any component that benefits from responsive, dynamic movement.

• Interactive motion: Elements follow the cursor for a dynamic feel.
• Flexible layout: Supports horizontal or vertical orientation and flexible wrapping.
• Custom styling: Background color, gap, and alignment can be customized.
• Composable: Works with any component, such as cards, images, or text blocks.

Usage Example

Preview

test

test

test

test

test 0

test 0

test 1

test 1

test 2

test 2

test 3

test 3

test 4

test 4

Code

<script lang="ts">
  import { Card, HoverFollower } from "@fefade-ui/svelte"
</script>

<HoverFollower>
  <Card>
    <div>
      <h4>test</h4>
      <p>test</p>
    </div>
  </Card>
  <Card>
    <div>
      <h4>test</h4>
      <p>test</p>
    </div>
  </Card>
</HoverFollower>

<HoverFollower
  style="gap: 1rem; flex-wrap: wrap; align-items: baseline;"
  orientation="horizontal"
  bgColor="green"
>
  {#each Array.from(Array(5)) as _, i (i)}
    <Card variant={i % 2 ? "contained" : "outlined"}>
      <div>
        <h4>test {i}</h4>
        <p>test {i}</p>
      </div>
    </Card>
  {/each}
</HoverFollower>

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"vertical"	Determines the layout direction of the follower elements.
bgColor	string	""	Background color applied to the follower container.
style	string	""	Inline styles for layout, spacing, or alignment.
children	Required	Elements that will follow the cursor on hover.

Best Practices

• Use lightweight elements to maintain performance during hover movement.
• Keep consistent spacing and alignment for a smooth visual effect.
• Combine with Cards, Images, or Text to create interactive galleries or tooltips.
• Avoid overcrowding the follower area to maintain clarity.
• Use subtle movements for better UX and less distraction.