Light+

VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. code developer showcase vscode

Install

npx hyperframes add code-snippet-light-plus

Install all code snippet themes at once:

Terminal

npx hyperframes add code

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	11s

Files

File	Target	Type
`code-snippet-light-plus.html`	`compositions/code-snippet-light-plus.html`	hyperframes:composition
`background.jpeg`	`assets/background.jpeg`	hyperframes:asset

Usage

After installing, add the block to your host composition:

<div
  data-composition-id="code-snippet-light-plus"
  data-composition-src="compositions/code-snippet-light-plus.html"
  data-start="0"
  data-duration="11"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Features

Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
Per-character typing animation with cursor tracking and active line highlight
Colors sourced from official microsoft/vscode built-in theme JSON
3D perspective tilt at the end of the typing sequence
Terminal panel with mock test output

​Light+

​Install

​Details

​Files

​Usage

​Features