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 @compronents/pixel-smear-wordmark

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
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