Letterpress Light Type
Type debossed into paper and lit by a real lighting model — the lamp follows your pointer, so every wall of every letter catches and loses the light.
- Category
- Text Effects
- Added
- 2026-09-24
- Deps
- none
- Updated
- 2026-09-24
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Levain — Boulangerie · Rue des Martyrs
Props
"use client";
import { useEffect, useId, useRef } from "react";
/**
* Type pressed into paper and lit by a real lighting model: the light source
* follows the pointer, so the walls of each impression catch and lose the light
* as it moves — the way a letterpress card does when you tilt it under a lamp.
*
* NOT A TEXT-SHADOW TRICK. A pair of offset text-shadows fakes one fixed light
* and falls apart the moment the light moves. Here the letters' own alpha is
* blurred into a HEIGHT MAP (paper high, impression low) and fed to
* feDiffuseLighting with a distant light. The browser computes a surface
* normal per pixel, so every curve of every glyph shades correctly from any
* direction.
*
* FLAT PAPER MUST COME OUT EXACTLY 50% GREY. The lit result is laid over the
* paper with mix-blend-mode: hard-light, where 50% grey changes nothing — so
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this text effect
Letterpress is the house style of bakeries, stationers, wine labels and old barbers because it is tactile: the letters are pressed into the card, and the impression changes as the light moves across it. The usual web imitation is a pair of offset text-shadows, which describes one fixed lamp and looks painted on. This entry uses the lighting model browsers already ship in SVG filters. The letters' alpha is blurred into a height map — paper high, impression low — and fed to feDiffuseLighting with a distant light whose direction follows the pointer, so every curve of every glyph shades correctly from any angle, and raking the light low toward the card's edge deepens the impression. The lit layer is blended with hard-light, where 50% grey is neutral, and the diffuse constant is recomputed from the light's elevation so flat paper always lands on exactly that grey; only the walls of the letters show. Paper fibre lives in a CSS background rather than inside the filter, because anything in the filtered SVG is recomputed whenever the light moves. Ink is optional; a blind deboss on black card is the quietest variant.
Curator’s note
Every letterpress effect I found online is two offset text-shadows, which is one fixed lamp. The browser already ships a per-pixel lighting model in SVG filters; almost nobody points it at type.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Iridescent Foil Sweep
text effectsHot-foil type that shifts colour under the pointer — Newton's series rather than a rainbow, translated rather than rotated.
Pointer Parallax Scene
animationsA depth system where layers separate under the pointer from one shared motion source.
Displacement Smear Type
text effectsA headline that smears along the pointer's direction of travel with a real accumulation blur.