motion-code

A syntax-highlighted code block with a macOS-style chrome, built-in tokenizer for multiple languages, typing animation, and compact mode.

Preview

Import

Usage

Copy button

Add copy to show a copy icon button in the chrome bar — the same icon as motion-code-inline. Add copy-label to show a "Copy" text label next to the icon.

Typing animation

Add type to animate code appearing character by character — syntax highlighting applies as it types. Loops automatically by default. Control speed with type-speed (chars/sec, default 80) and the pause between loops with type-loop-delay (ms).

On reveal — no-loop

Add no-loop to disable looping. The animation plays once when the element scrolls into the viewport instead of starting immediately.

Delayed typing

Use type-delay (ms) to hold before typing starts — useful when the window animates into view.

Compact

Add compact for tighter padding, smaller font, and a slimmer title bar — useful inside cards or sidebars.

Hide chrome

Use hide-chrome to remove the title bar entirely — just the code body.

Languages

Language is inferred from the filename extension. Override with the lang attribute.

HTML / AstroJavaScript / TypeScriptCSSJSONPythonShell

Theming

Token colours are CSS custom properties that pierce the Shadow DOM. Map any external theme's palette to these variables on :root.

Properties

Attribute	Property	Type	Default	Description
filename	filename	string	"app.html"	Shown in the chrome bar; also used to infer the language
code-lang	codeLang	string	""	Override language: html · js · css · json · python · sh
copy	copy	boolean	false	Show a copy icon button in the chrome bar
copy-label	copyLabel	boolean	false	Show a "Copy" text label next to the copy icon
hide-chrome	hideChrome	boolean	false	Remove the title bar entirely
compact	compact	boolean	false	Reduce padding, font size, border radius, and title bar height
type	type	boolean	false	Animate code in character by character with a blinking cursor. Loops automatically.
type-speed	typeSpeed	number	80	Typing speed in characters per second
type-delay	typeDelay	number	0	Delay in ms before typing starts
no-loop	noLoop	boolean	false	Disable looping — play once on viewport entry instead of repeating
type-loop-delay	typeLoopDelay	number	1500	Pause in ms between the end of one loop and the start of the next

CSS variables

Variable	Type	Default	Description
--cw-keyword	color	#7c3aed	Keywords, booleans, null
--cw-string	color	#16a34a	String literals
--cw-tag	color	#0369a1	HTML tags, CSS selectors
--cw-attr	color	#be123c	Attributes, CSS properties, JSON keys, decorators
--cw-num	color	#b45309	Numbers and units
--cw-comment	color	var(--color-muted)	Comments

Methods

Method	Type	Default	Description
setCode(raw)	void	—	Set code programmatically. Triggers typing if type is enabled.
replay()	void	—	Restart the typing animation from the beginning.

JavaScript API

Every playback verb drives the typing animation: play(), pause(), finish() (snap to the fully-typed code), and cancel() (clear the window). replay() is shorthand for cancel() + play(). This instance uses no-loop, so a completed run settles into the finished state.

playState: –

Accessibility

Respects prefers-reduced-motion: when enabled, the cursor blink animation is disabled. The typing animation remains functional.