WebGL Foil Stamp Text Effect for Headings
Overview
A heading for React and Next.js that looks hot-foil stamped into cotton paper. It stays a real h1 or h2, and a light follows the cursor across the foil, or drifts by itself on touch screens.
The component reads the heading's computed font, size, letter-spacing and line breaks from the browser and draws the same text to a canvas. That drawing is blurred into a height map and turned into normals, so each letter has a pressed wall and a soft dent around it. A small WebGL shader then lights the sheet and the foil separately: the paper has generated cotton fibres, and the foil behaves like a mirror reflecting long soft boxes, so bands of light slide along the letters as the lamp moves.
Details
- Category
- Text
- Interaction
- Mouse Move + On Load
- Trigger
- Mouse Move
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 082 / Backgrounds
WebGL Silk Fabric Background Shader with Cursor Ripple
On Load · Mouse Move · On Click
No. 062 / Backgrounds
WebGL Liquid Gold Background Shader
On Load · Mouse Move
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
(02)FAQ
WebGL Foil Stamp Text Effect for Headings — FAQ
01How do I set the font and size?
Put them on headingClassName or headingStyle, the same as any heading. The foil copies the computed font, size, weight, style and letter-spacing, and follows wrapped lines, so there is nothing to keep in sync.
02What does it need from my page?
React and Tailwind CSS v4. It has no npm dependencies: no Three.js and no GSAP. The shader is plain WebGL. The section's height and padding come from your className.
03Can I use a colour that isn't gold, rose or silver?
Yes. foil accepts any CSS colour, and so does paper. Changing either one cross-fades without rebuilding anything, which is how the demo's foil switch works.
04What happens with no WebGL or with reduced motion?
With no WebGL, or when the browser would draw WebGL on the CPU, the canvas never appears and the heading shows a metal gradient clipped to the text. With reduced motion the foil is drawn once, lit from a fixed position, with no loop.
05Does it work on phones?
Yes. With no cursor the lamp wanders by itself. The section uses touch-action: pan-y, so a swipe over it scrolls the page.