Getting Started

hyperbits is a catalog of self-contained HTML + GSAP animation bits for HyperFrames. Each bit is a composition file with its own CSS, paused timeline, and data-composition-variables.

Installation

Search and add bits from a HyperFrames project:

npx hyperbits find "fade in text"
npx hyperbits add fade-in

add writes compositions/fade-in.html and prints a data-composition-src snippet.

Point the project registry at the hyperbits catalog, then use the HyperFrames CLI:

{
  "registry": "https://hyperbits.pages.dev"
}

npx hyperframes add fade-in

npm install hyperbits

{
  "mcpServers": {
    "hyperbits": {
      "command": "npx",
      "args": ["-y", "hyperbits", "mcp"]
    }
  }
}

Prerequisites

Bits load GSAP themselves from:

https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js

Helpers ship as hyperbits.iife.js (CDN or the local dist/ build). HyperFrames does not inject either.

Embed a bit

After hyperbits add fade-in:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://unpkg.com/hyperbits/dist/hyperbits.iife.js"></script>

<div data-composition-src="compositions/fade-in.html"></div>

Override knobs declared in data-composition-variables with data-variable-values on the host, or --variables on hyperframes render.

Background layer

Never paint on the composition root. The HyperFrames renderer drops background on the data-composition-id element, so standalone frames go transparent. Put a full-bleed #bg layer as the first child (data-start="0", data-duration equal to the bit, literal background-color). Keep html, body backgrounds for Studio preview. Animate gradients on #bg, not on #root.

Helpers

The same helpers bits use are available as ES modules:

import { interpolate, stagger, viewport } from 'hyperbits/helpers';

or on the IIFE global hyperbits inside a composition <script>.

Next steps

Browse the catalog
Read the CLI and MCP pages
Use a helper from the reference