mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
5245e19062
* feat(registry): add VS Code theme visualizer example Full VS Code workbench recreation with per-character typing animation across 12 built-in themes. Includes activity bar, sidebar, tabs, editor with line-by-line cursor tracking, terminal panel, and status bar — all driven by official VS Code theme JSON files. Themes: Dark Modern, Dark 2026, Dark+, Light Modern, Light 2026, Light+, Visual Studio Dark, Visual Studio Light, High Contrast, High Contrast Light, Solarized Light, Monokai. Includes build scripts to regenerate compositions from theme JSON. * feat(registry): add 12 code snippet blocks for hyperframes add code Individual blocks for each VS Code built-in theme, all tagged "code" so `npx hyperframes add code` installs the full set. Each block is a self-contained VS Code workbench with per-character typing animation, activity bar, sidebar, tabs, terminal, and status bar driven by official theme JSON data. * docs: add mdx pages for code snippet blocks and example - 12 block doc pages under catalog/blocks/code-snippet-* - "Code Snippets" nav group in docs.json - vscode-theme-visualizer entry in examples.mdx * docs: revert examples.mdx — code snippets belong in catalog only * docs: drop redundant 'Code Snippet' prefix from sidebar titles * docs: add video previews to code snippet catalog pages * style: format HTML, CSS, and MJS files for CI * fix: address review feedback — build pipeline, LICENSE, dead code, nav order 1. Build script now regenerates both example compositions AND published blocks in registry/blocks/code-snippet-*/, keeping them in sync. 2. Add MIT LICENSE for vendored VS Code theme JSONs (microsoft/vscode). 3. Remove dead `chars` variable from runtime, build script, all blocks, and all example compositions. 4. Alphabetize Code Snippets nav group in docs.json to match catalog convention. * style: format all build-generated files (render-entries, CSS, index)
51 lines
1.2 KiB
HTML
Vendored
51 lines
1.2 KiB
HTML
Vendored
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=1920, height=1080" />
|
|
<title>Dark 2026 Render Entry</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #000000;
|
|
}
|
|
|
|
#render-dark-2026 {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #000000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
id="render-dark-2026"
|
|
data-composition-id="render-dark-2026"
|
|
data-start="0"
|
|
data-duration="11"
|
|
data-width="1920"
|
|
data-height="1080"
|
|
>
|
|
<div
|
|
id="clip-dark-2026"
|
|
data-composition-id="vscode-dark-2026"
|
|
data-composition-src="../compositions/dark-2026.html"
|
|
data-start="0"
|
|
data-duration="11"
|
|
data-track-index="1"
|
|
></div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
window.__timelines["render-dark-2026"] = gsap.timeline({ paused: true });
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|