Light Modern

The default light theme — a fresh, modern take on the classic VS light experience.

Light Modern

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

code developer showcase vscode

Install

Terminal

npx hyperframes add code-snippet-light-modern

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-modern.html	compositions/code-snippet-light-modern.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-modern"
  data-composition-src="compositions/code-snippet-light-modern.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