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

CLI

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.

hyperframes add

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

hyperframes.json

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

npx hyperframes add fade-in

npm

npm install hyperbits

MCP

mcp.json

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

Prerequisites

Bits load GSAP themselves from:

https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js

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

Note

Need a HyperFrames project first? Run npx hyperframes init.

Embed a bit

After hyperbits add fade-in:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/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.

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

1. Browse the catalog
2. Read the CLI and MCP pages
3. Use a helper from the reference