Lexicon / Type
Letters that move · 5 named effects, each running below
The lines rise up out of the page one after another, each a beat behind the last.
also called staggered line reveal · line mask · SplitText
The mask is what matters: a wrapper with overflow:hidden and a translated inner. That makes text rise out of the page instead of fading in on top of it.
.line { overflow: hidden }
.line span { transform: translateY(110%) → none }Weight is a dial here, not a set of steps. Drag it and the letterforms thicken without ever swapping to another file.
also called axis interpolation · variable axes
A variable font exposes continuous axes rather than fixed cuts, so weight can be animated instead of swapped. One file, the whole family, and no flash between weights.
font-variation-settings: 'wght' 340;
transition: font-variation-settings .6s;Weight is a continuous axis
The picture shows only through the letters. The type is the window, not the caption.
also called knockout text · background-clip · image-in-type
The type becomes an aperture onto the image. It needs real weight to work — thin letterforms leave too little opening for the picture to read.
background-image: url(…);
background-clip: text;
color: transparent;Set down the page instead of across it, the way Chinese, Japanese and Korean have always been set. Each column is written downward, and they arrive right to left. Latin and figures turn sideways to follow — all but the year, held upright in a single square.
also called 竖排 · tate-gumi · vertical typesetting
Native in CSS and correct for CJK — the browser rotates Latin runs and places the punctuation itself. text-combine-upright is the piece almost nobody reaches for: it sets a two- to four-character number upright inside one em box, which is how a printed vertical page has always handled a date. This is the experimental lane: the writing here is material to look at, never the interface.
writing-mode: vertical-rl;
text-orientation: mixed;
.year { text-combine-upright: all } /* 縦中横 */滚动即时间轴
名は体を表す
이름이 곧 형태다
神坂雪佳 百々世草 1909
A band of text running sideways under its own power, whether or not you touch the page. Hover to stop it.
also called ticker · infinite scroller · running band
The one effect here that ignores scroll entirely — it gives a page a pulse when nothing else moves. Duplicate the content exactly once and travel -50%; that is what makes the loop seamless.
.row { width: max-content; animation: slide 26s linear infinite }
@keyframes slide { to { transform: translateX(-50%) } }
/* the content is duplicated once, so -50% lands exactly on the seam */