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.

Basic Examples

Absolute positions

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

Snapped to elements

<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" />

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)"
  animation-duration="1000"
  animation-delay="500"
/>

Disable animation

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