Building blocks
for HyperFrames

Ready-made HTML + GSAP animation bits. Copy them into a composition or install them through the catalog.

Designed for compositions.

Each bit is a paused GSAP timeline in an HTML file. Embed it with data-composition-src or start from the source.

text_fields

Text Effects

Create complex typography animations with ease. Stagger characters, words, or lines. Combine blur, scale, and position offsets for professional reveals.

<h1 class="clip" data-start="0" data-duration="4">
  Text Transition
</h1>

<script>
  hyperbits.stagger(words, {
    y: [40, 0],
    blur: [10, 0], // Word-by-word blur
    opacity: [0, 1],
    each: 0.12,
  });
</script>

grain

Particle System

A complete seeded particle engine. Simulate snow, confetti, or fireflies with customizable behaviors. Every render looks the same.

Motion Primitives

Declarative entry and exit animations. Chain fades, slides, and scaling with hyperbits.stagger without managing tweens by hand.

$ npx @av/hyperbits find "fade in"
fade-in              text-animations
staggered-fade-in    staggered-motion
blur-slide-word      text-animations

$ npx @av/hyperbits add staggered-fade-in
  ✔ compositions/staggered-fade-in.html
$ npx @av/hyperbits mcp
  hyperbits MCP server listening on stdio

smart_toy

Agent Ready

First-class CLI and MCP server. Your agent can search, read, and install every bit.

content_copy

Copy-Paste Ready

Install bits directly into your compositions. Own the HTML, customize endlessly, and suffer zero bloat.

Start from a bit.

One-time setup: @av/hyperbits is on GitHub Packages, which needs a token even for public packages.

gh auth refresh -h github.com -s read:packages
npm config set @av:registry https://npm.pkg.github.com
npm config set //npm.pkg.github.com/:_authToken "$(gh auth token)"

No gh? Use a classic token with the read:packages scope from GitHub settings in place of $(gh auth token).

Requires HyperFrames and GSAP 3.14.2. Read the setup guide

Building blocks for HyperFrames