slidev-addon-fancy-arrow

Slidev addon for adding fancy arrows to your slides, powered by Rough.js.

👉 Check out the demo and docs.

Installation

npm install slidev-addon-fancy-arrow

Slidev configuration

Add the addons option in your headmatter with fancy-arrow:

---
addons:
  - fancy-arrow
---

See also: https://sli.dev/guide/theme-addon#use-addon

Usage

👉 Check out the demo and docs.

Absolute positions

<FancyArrow from="(10, 20)" to="(30, 40)" />

Snapped to elements

Bind to elements via selectors

<div data-id="anchor1" m-8>anchor1</div>
<div data-id="anchor2" m-8>anchor2</div>
<FancyArrow from="[data-id=anchor1]" to="[data-id=anchor2]" />
<FancyArrow from="[data-id=anchor1]@bottom" to="[data-id=anchor2]@top" />

Define the snapped elements via tail and head slots

<FancyArrow>
  <template #tail>
    <span m-8>Tail</span>
  </template>
  <template #head>
    <span m-8>Head</span>
  </template>
</FancyArrow>

Configure the styles

<FancyArrow
  color="orange"
  width="4"
  two-way
  head-type="polygon"
  head-size="40"
  roughness="2"
  bowing="0.5"
  seed="42"
  arc="0.5"
  from="(100, 200)"
  to="(300, 400)"
/>

Animation

Animation properties

<FancyArrow from="(100, 200)" to="(300, 400)" duration="1000" delay="500" />

Disable animation

<FancyArrow from="(100, 200)" to="(300, 400)" static />