PRO

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.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/pixel-smear-wordmark.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
text / fontFamily / fontWeightstringBLANK / Anton / 100Drawn to a 2x canvas and auto-scaled to fit the width, so long words shrink rather than clip.
gridSizenumber40Cells per axis the shader snaps to. Lower is chunkier.
strengthnumber0.4How far a cell is dragged along the pointer's travel direction.
Customize
texttext

The wordmark drawn to the texture.

textColorcolor

Letter colour.

Dependencies
three