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

PalateKit

Menu

Request a resource

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

0 / 280

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 boiling strokes v1.0.0

Use this resource to annotate a video with hand-drawn strokes

New

  • 600 downloads
  • 100 likes
  • 231 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-boil-strokes

First time: connect the CLI with

npx --yes palatekit@latest login

The agent adds a library of sketch-style animation helpers to your project: the stroke re-poses every N frames like a hand drawing (the boil effect). It includes an irregular ellipse generator, stroke styles (plain, soft, sharp, spray) and progressive draw-on. The result is identical on every render.

Updated November 2, 2026

Details

Generates with
HyperFrames
Uses
  • HyperFrames
  • Node.js
  • FFmpeg
Licence
Apache-2.0

Similar resources

View all

What you get

  • hw-boil.html: ready-to-use HyperFrames composition (1920x1080, 4 s)
  • README.md: usage guide (installation, variables, render)
  • registry-item.json: block install manifest

Good fit for

  • Circling or underlining an element in a teaching video.
  • Giving presentation annotations a sketch look.
  • Adding hand-drawn arrows and circles on a screenshot.

Not for

  • A clean, strictly geometric graphic style.
  • An animation that needs no annotation.

Tags

  • sketch
  • annotation
  • hand-drawn
  • effect

About

You say

"Add a hand-drawn circle around the button at 2 seconds, with a soft jitter and an arrow that draws itself."

Hand-drawn circle and arrow with the words the boil and setting tags.

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

Show more

Prerequisites

You bring
The elements to circle or point at and The jitter level you want (off, calm, lively)
Dependencies
HyperFrames, Node.js, and FFmpeg

How to use it

  1. Install HyperFrames in your video project, then add the block.
  2. Ask your agent to adapt texts, colors and timings to your content.
  3. Run the render to get the video.

Content preview

Files

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

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Hand-Drawn Boil » (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

How do I install it in my project?

Copy hw-boil.html into the compositions/ folder of a HyperFrames project (with the assets/ folder if there is one), or ask your agent to run npx hyperframes add hw-boil.

What can I customize?

You can change the boil setting (off, calm, lively), the stroke style (plain, soft, sharp, spray) and the stroke coordinates. Ask your agent to adapt the file to your content.