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)
43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
# VS Code Theme Visualizer Design Notes
|
|
|
|
## Intent
|
|
|
|
This POC should feel like a real VS Code tutorial capture, not a generic code window. The purpose is to prove that HyperFrames can render code-writing scenes with faithful product context and theme-aware polish.
|
|
|
|
## Visual Identity
|
|
|
|
The visual identity is sourced from official VS Code built-in theme JSON files from `microsoft/vscode/extensions/theme-defaults/themes`. Do not invent palette values for the workbench. Colors should flow through the generated theme registry and CSS variables.
|
|
|
|
## Theme Set
|
|
|
|
- Light 2026
|
|
- Dark 2026
|
|
- Dark+
|
|
- Dark Modern
|
|
- Light+
|
|
- Light Modern
|
|
- Visual Studio Dark
|
|
- Visual Studio Light
|
|
- Default High Contrast
|
|
- Default High Contrast Light
|
|
|
|
## Typography
|
|
|
|
- Workbench UI: `Inter`, then system UI fallbacks.
|
|
- Code and terminal: `Menlo`, `Monaco`, `Consolas`, then monospace fallbacks.
|
|
- Keep letter spacing at `0`.
|
|
|
|
## Layout Rules
|
|
|
|
- Recreate the VS Code workbench proportions: activity bar, explorer sidebar, editor tabs, editor gutter, status bar, and optional terminal panel.
|
|
- Use official theme colors for editor, sidebar, tabs, activity bar, panel, terminal, and status bar surfaces.
|
|
- Keep the composition full-frame at 1920x1080.
|
|
- Cards are allowed only for the theme selector strip because they are repeated selectable items.
|
|
- Do not use decorative gradients, glows, or synthetic color accents outside theme-derived colors.
|
|
|
|
## Motion Rules
|
|
|
|
- Theme changes should feel like command-palette theme switching: quick, crisp, and functional.
|
|
- Code typing is the hero action. UI chrome should support it without becoming theatrical.
|
|
- All animation must be deterministic and GSAP-controlled.
|