Install and use the components

Every component is a HyperFrames block: an HTML file with one paused GSAP timeline, plus its fonts and images. The HyperFrames CLI installs it into your project, and you place it in a composition like any other sub-composition.

1. Point your project at this registry

In the project's hyperframes.json, set the registry:

{
  "registry": "https://motion.launchable.video/r"
}

Keep your other settings. The CLI then reads https://motion.launchable.video/r/registry.json instead of the default registry.

2. Add a component

npx hyperframes add text-trail
npx hyperframes catalog --json   # list everything in the registry

It writes compositions/text-trail.html and the files underassets/ it needs: Instrument Serif, GSAP and any demo images.

3. Place it

Components have no fixed canvas. They fill the host element, so its size and position decide where the motion happens. Change the words, colours and timing with data-variable-values.

<div data-composition-id="text-trail" data-composition-src="compositions/text-trail.html"
     data-start="1" data-duration="3" data-track-index="2"
     data-variable-values='{ "line1": "Ship it", "line2": "today", "ink": "#101113" }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>

data-composition-id must stay the component's name. Load GSAP once in your host page if it isn't already: <script src="assets/vendor/gsap.min.js"></script>.

4. Fill slots

Some components wrap your own HTML: blur-reveal, camera-rig, grow-to-bounds and pill-shell take a content slot, rows-build takes rows, window-frame takes a screen. Put it in a template in the host page:

<template data-slot="window-frame-screen">
  <img src="assets/my-site.png" style="width:100%">
</template>

For AI agents

llms.txt lists every component with what it's for, andllms-full.txt has every README with every variable. Each page also has a markdown copy at https://motion.launchable.video/components/<name>.md. An agent can install a component with the same npx hyperframes add command.