Setting the file. One moment.
Skill 24 · Hyperframes Registry
Subchapter 24.9
references/wiring-components.mdMarkdown2 KBView on GitHub
Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition’s timeline.
hyperframes add <component-name>compositions/components/grain-overlay.html<div data-composition-id="..."><style> block<script>, before your timeline code<!-- Paste the overlay div into your composition -->
<div
id="grain-overlay"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
>
<div class="grain-texture"></div>
</div>Then paste the CSS keyframes and .grain-texture rule into your styles. No GSAP timeline calls needed — the grain animates via CSS @keyframes.
See examples/add-component.md for the full shimmer-sweep walkthrough (HTML wrapping, CSS, JS setup, and timeline call).
hyperframes lint after wiring to catch structural issues