Pixel Smear Wordmark
A wordmark rendered to a canvas, uploaded as a texture, and sampled through a shader that drags it under the cursor. The displacement is not the pointer position, it is the pointer's velocity: each fragment snaps its UV to a forty by forty grid, measures the distance from that cell's centre to the cursor, and offsets its sample along the direction the cursor last travelled, scaled by a smoothstep falloff. So the letters only smear while the mouse is actually moving, and the grid quantisation is what makes the smear read as blocks rather than a smooth warp. Two easing rates are used deliberately: slow on enter and leave so the field settles, faster while moving so it tracks. Three.js.
npx shadcn@latest add https://ui.aryank.space/r/pixel-smear-wordmark.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| text / fontFamily / fontWeight | string | BLANK / Anton / 100 | Drawn to a 2x canvas and auto-scaled to fit the width, so long words shrink rather than clip. |
| gridSize | number | 40 | Cells per axis the shader snaps to. Lower is chunkier. |
| strength | number | 0.4 | How far a cell is dragged along the pointer's travel direction. |
texttextThe wordmark drawn to the texture.
textColorcolorLetter colour.
three