mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00

Files

T

Miguel Ángel 5245e19062 feat(registry): add code snippet blocks with VS Code workbench (#1113 )

* 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)

2026-05-28 16:02:44 -04:00

1.6 KiB

Raw Permalink Blame History

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.

1.6 KiB Raw Permalink Blame History