Pixelated Text Hover Shaders
What it does
A large wordmark is rendered to a 2D canvas texture and drawn on a full-screen Three.js orthographic plane. A custom fragment shader quantizes the UVs into a 40x40 pixel grid and, near the cursor, displaces the texture along the mouse's movement direction to create a rippling pixelated smear. Movement is eased frame-by-frame in JS (requestAnimationFrame lerp, no GSAP) on mousemove/enter/leave.
How it's built
| Category | hover |
|---|---|
| Tech | three |
| Complexity | page |
| Performance cost | heavy |
| Mobile-safe | yes |
How it works
One huge, hairline-thin lowercase word sits in the middle of a white page. Run the cursor across it and the letters tear into square blocks around the pointer, each block dragged a little in the direction you are moving, like a low-resolution image being smeared by a finger. A fast sweep rips the word apart; a slow crawl barely nudges it; stop, and the blocks slide back into place until the word is clean again.
The word on screen is not HTML text. It is drawn at runtime into a 2D canvas, uploaded as a texture, and shown on a single plane that fills the viewport in Three.js. All the movement happens in a short fragment shader fed by two numbers per frame.
What the shader does
The shader divides the image into a coarse grid of square cells. For each cell it measures the distance from the cell's centre to the cursor and turns that into a strength that is strongest under the pointer and fades to nothing a short distance away. Then it shifts where the cell samples the wordmark, in the opposite direction to the cursor's travel and in proportion to how fast it is moving.
The pixelation comes from one detail: the strength and the shift are computed from the centre of the cell, not from the pixel itself. Every pixel inside a cell therefore moves by exactly the same amount, so the cell shifts as one solid block. Compute the same thing per pixel and you get a smooth liquid warp instead; snap it to the grid and you get the chunky, digital tear.
The motion
The cursor position is not passed to the shader directly. A small animation loop eases a live position towards the real pointer every frame and keeps the previous position alongside it, and the shader reads the difference between the two as the direction of travel. Because that difference shrinks as the eased point catches up, the smear trails behind the cursor and relaxes to zero on its own. The easing is gentler when the pointer enters or leaves the word and quicker while it is moving, and on leaving, the target is pulled back so the word settles instead of freezing mid-tear.
Where it gets hard
A thin weight looks elegant in type, but drawn into a texture and then displaced it breaks into broken hairlines. The canvas thickens the strokes before they are uploaded so the blocks always carry visible ink.
Performance and mobile
The scene is one quad and one texture lookup per pixel, so the shader itself is light. The cost is the full device pixel ratio and a canvas texture twice the size of the viewport, which is worth capping on high-density screens. The effect needs a mouse: on touch screens the word stays still and sharp, which is a good fallback, but the hero should not depend on the interaction to be read.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Pixelated Text Hover Shaders — full-viewport wordmark
## Goal
Build a full-viewport white hero showing one huge, thin lowercase wordmark centered on screen. The wordmark is **not DOM text** — it is painted to an offscreen 2D canvas and used as a texture on a full-screen Three.js plane rendered through a **custom fragment shader**. The star effect: as the cursor moves across the wordmark, the shader quantizes the image into a **40×40 grid of square cells** and, in a soft radius around the cursor, **shoves each cell's texture sample in the direction the mouse is travelling** — producing a chunky, blocky, pixelated "smear" that ripples off the cursor and eases back to rest when the mouse stops or leaves. All motion is a hand-written `requestAnimationFrame` lerp feeding two shader uniforms; **there is no GSAP and no scroll**.
## Tech
Vanilla HTML/CSS/JS with an ES-module entry (`<script type="module">`). **No animation library at all — no GSAP, no Lenis.** The only dependency is Three.js. Import it as:
```js
import * as THREE from "three";
```
The whole effect is: one WebGL `ShaderMaterial` on a 2×2 plane under an orthographic camera, a canvas-generated text texture, and a raw rAF loop that eases a mouse position each frame and writes it to the shader. Runs in a fresh Vite project with `three` as the only npm dep.
## Layout / HTML
The body is essentially empty — a single container the renderer's `<canvas>` is appended into:
```html
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.