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 hyperbits find "fade in"
fade-in              text-animations
staggered-fade-in    staggered-motion
blur-slide-word      text-animations

$ npx hyperbits add staggered-fade-in
  ✔ compositions/staggered-fade-in.html
$ npx 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.

➜ npx hyperbits add fade-in

Requires HyperFrames and GSAP 3.14.2. Read the setup guide

Building blocks for HyperFrames