Code Block Highlight Load
Plain code gains its syntax colors in one soft pass once the highlighter finishes.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Code Block Highlight Load
*
* Code renders immediately as plain text — readable from the first
* frame — and gains its syntax colors in one pass down the block onceAbout this pattern
Syntax highlighting almost always arrives late — a worker, a lazily imported grammar, a streamed response — and the usual fix is to hide the snippet until it is ready. This does the opposite: the code is readable as plain text from the first frame and takes color line by line once the tokens land. Nothing moves. Two copies of each line, one plain and one colored, sit in the same grid cell and cross-fade; because the family is monospaced and neither copy changes weight or slant, every glyph in the colored version lands on the exact pixel its plain twin occupied, so the pass can never re-flow a block someone is already reading. The hues are literal mid-tones rather than a dark-theme palette, since the block inherits whatever surface it is pasted onto.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
A file renders as plain text first and picks up its colors a moment later.
Related patterns
- Avatar Group LoadOverlapping faces deal themselves out along the stack, then the overflow count lands.
- Background Refresh HintA two-pixel tinted band travels the panel's top edge while data refetches, without interrupting reading.
- Cache Hit InstantCached content gets no entrance at all; only the values that actually changed animate.