mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +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)
116 lines
3.4 KiB
JSON
116 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
|
"name": "vscode-theme-visualizer",
|
|
"type": "hyperframes:example",
|
|
"title": "VS Code Theme Visualizer",
|
|
"description": "Faithful VS Code workbench recreation with per-character typing animation across 12 built-in themes. Activity bar, sidebar, tabs, editor, terminal, and status bar — all driven by official theme JSON files.",
|
|
"tags": ["code", "developer", "showcase", "vscode", "themes"],
|
|
"dimensions": {
|
|
"width": 1920,
|
|
"height": 1080
|
|
},
|
|
"duration": 132,
|
|
"files": [
|
|
{
|
|
"path": "index.html",
|
|
"target": "index.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/dark-2026.html",
|
|
"target": "compositions/dark-2026.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/dark-modern.html",
|
|
"target": "compositions/dark-modern.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/dark-plus.html",
|
|
"target": "compositions/dark-plus.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/high-contrast-light.html",
|
|
"target": "compositions/high-contrast-light.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/high-contrast.html",
|
|
"target": "compositions/high-contrast.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/light-2026.html",
|
|
"target": "compositions/light-2026.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/light-modern.html",
|
|
"target": "compositions/light-modern.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/light-plus.html",
|
|
"target": "compositions/light-plus.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/monokai.html",
|
|
"target": "compositions/monokai.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/solarized-light.html",
|
|
"target": "compositions/solarized-light.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/visual-studio-dark.html",
|
|
"target": "compositions/visual-studio-dark.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "compositions/visual-studio-light.html",
|
|
"target": "compositions/visual-studio-light.html",
|
|
"type": "hyperframes:composition"
|
|
},
|
|
{
|
|
"path": "assets/background.jpeg",
|
|
"target": "assets/background.jpeg",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "assets/vscode-sequence.css",
|
|
"target": "assets/vscode-sequence.css",
|
|
"type": "hyperframes:style"
|
|
},
|
|
{
|
|
"path": "assets/vscode-sequence-runtime.js",
|
|
"target": "assets/vscode-sequence-runtime.js",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "assets/vscode-theme-registry.js",
|
|
"target": "assets/vscode-theme-registry.js",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "scripts/build-compositions.mjs",
|
|
"target": "scripts/build-compositions.mjs",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "scripts/build-theme-registry.mjs",
|
|
"target": "scripts/build-theme-registry.mjs",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "DESIGN.md",
|
|
"target": "DESIGN.md",
|
|
"type": "hyperframes:asset"
|
|
}
|
|
]
|
|
}
|