Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Hand-Drawn Arrow That Draws Itself On Screen v1.0.0

Use this resource to point at an element of the video with a hand-drawn arrow

New

  • 553 downloads
  • 190 likes
  • 240 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install hand-drawn-arrow

First time: connect the CLI with

npx --yes palatekit@latest login

The agent places an arrow with an irregular line that draws itself on screen, then "boils" slightly like a hand-animated cartoon. It picks the curve (straight, gentle, swoop), the stroke texture (plain, soft, dry marker, spray) and the entrance time. You get an animated annotation for an explainer video, a tutorial or a reel.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (npx hyperframes)
  • Node.js
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide for the arrow
  • hw-arrow.html: the component and its helpers (draw-on, boil, textures)
  • assets/fonts/Caveat-700-latin.woff2: the handwritten font used in the preview
  • registry-item.json: the three controls (curve, stroke, boil)

Good fit for

  • Pointing at a button or a number in a video tutorial
  • Adding a handwritten annotation to a reel or a short
  • Giving an educational video a hand-drawn look

Not for

  • A very restrained corporate video
  • A perfectly straight, geometric technical arrow
  • A static diagram without animation

Tags

  • arrow
  • annotation
  • handwritten
  • overlay
  • tutorial

About

You say

"Add a hand-drawn arrow pointing at the price at 2 seconds, with a dry marker stroke and a wide swoop."

Hand-drawn arrow pointing at the text "point at things" on a navy background.

Component published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
The spot in the video to point at and the entrance time and Your video or HyperFrames project
Dependencies
HyperFrames (npx hyperframes) and Node.js

How to use it

  1. Install the component with npx hyperframes add hw-arrow.
  2. Ask the agent to choose the curve, stroke texture, color and position of the arrow.
  3. Wire the entrance call into your edit and run the HyperFrames render.

Content preview

Files

  • assets/fonts/Caveat-700-latin.woff273.2 KB
  • hw-arrow.html27.6 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1.1 KB
  • registry-item.json1.5 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/components/hw-arrow
Licence
Apache-2.0

Notice

Version modifiée de « Hand-Drawn Arrow » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Does each arrow need an id?

Yes. The id seeds the wobble of the line; two arrows without unique ids would share the same drawing.

Can I change the color and thickness?

Yes, with the CSS variables --hw-arrow-color and --hw-arrow-w on the .hw-arrow class.