Setting the file. One moment.
Skill 24 · Hyperframes Registry
Subchapter 24.3
references/demo-html-pattern.mdMarkdown2 KBView on GitHub
Every component in the registry ships a companion demo.html file alongside its snippet. The demo serves two purposes:
Preview fixture — the CI preview pipeline renders the demo to generate thumbnail images and preview videos for the catalog docs page.
Usage example — the demo shows the component effect applied to representative content, serving as a working reference.
A demo is a complete, standalone HTML composition:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<title>Component Name — Demo</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
/* reset + canvas size */
</style>
</head>
<body>
<div data-composition-id="<name>-demo" data-width="1920" data-height="1080" data-duration="N">
<!-- Demo content showing the effect -->
<!-- Component snippet inlined here -->
</div>
<script>
// GSAP timeline demonstrating the effect
window.__timelines = window.__timelines || {};
window.__timelines["<name>-demo"] = tl;
</script>
</body>
</html>Key conventions:
data-composition-id is <component-name>-demo to avoid collisionswindow.__timelinesBlocks are already standalone compositions that can be rendered directly. Only components need the demo wrapper.
The demo.html is NOT installed by hyperframes add — it exists only in the registry for preview generation and as a reference.