Vibeset

Dot waves

A huge headline made of dots: all the dots in the box tremble with a wave that crosses it diagonally, but the ones that fall inside the letters are bigger and brighter, and that draws the text. Passing the pointer splashes with circular ripples, and on appearing the text is uncovered left to right. The text mask comes from drawing it on an auxiliary one-cell-per-pixel canvas and reading its transparency: any typeface and any text, with no coordinate lists, rescaled to fill the width. It is Canvas 2D and not WebGPU, so it works in any browser and needs no plan B. The canvas is hidden from readers and the container is an image named by the text; with the dial at zero a single frame is drawn with the text already uncovered.

And the React Bits original: Shape Waves

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Shape Waves, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a huge headline on a brand or event landing, in modern browsers. Only if you have a plan B for the rest.

Watch out for

WebGPU is not in every browser, and vgpu is a library from May 2026 that was at version 0.6 in October. The React Bits registry then pinned ^0.3.1, an old version: check which one it installs today. You need a normal text that shows up when it fails (there is an onError prop).

Accessibility

It respects the system reduced-motion setting. The text lives inside the canvas: put it in the HTML too.