UI HUB Wordmark

A raw-WebGL typographic wordmark stage for brand text: soft-blur stems that sharpen around the pointer with three dotted dimension handles that snap, drift, and trail the cursor inside a cell grid, plus a dashed targeting frame.

A raw-WebGL typographic wordmark (single GL context, one fullscreen-triangle draw, live state via refs). The text is rasterized once into an offscreen font atlas: a red fill plus a dashed green perimeter stroke laid into a black RGBA canvas, scaled to fit the 4096px texture cap with a 0.12em pad, then uploaded as a texture with mipmaps (POT or WebGL2) and re-baked whenever text/font/dpr/size changes. The fragment shader samples the atlas with a 6-direction blur to soften the stem, mixes sharp and soft reads by a pointer-distance falloff (k = 1 - smoothstep(0, reach, d)^3) so the wordmark sharpens under the cursor, blends a bottom-up shade gradient into the text color, and overlays an accent dashed triangle plus three dashed bounding boxes (uV0/uV1/uV2 + uHalf) around three drifting vertices. Pointer-aware motion: without a pointer the framerate viewport sweeps left-to-right at speed with constant y at the text baseline and a tiny z-noise sway; on pointermove the target snaps to the nearest cell centers around the cursor inside a 0.6-aspect grid, two vertices hitch cells while the third holds the pointer cell, and every vertex orbits its cell with per-cell pseudo-random sine drift (frequency 1.3 / 1.69) offset by a hash of the cell coords. Easing is an exponential damp (damping/100 * 20 * dt) toward the target. The host keeps a minWidth of 1200 and minHeight of 800, canvas DPR-capped at 2, rAF loop gated on document.visibilitychange, and the active hover reach/framing readouts are drawn as monospace labels at each handle.

UI HUB Wordmark is listed under Animated Text in the UI HUB catalog. Typography effects that animate letterforms rather than fading a whole block: scramble reveals, rolling letters, random swaps, gradient fills, vaporising text and scroll-linked highlights. Every effect is scoped to a single text element, so you can apply it to a headline without restructuring the surrounding markup. Built for hero headings and section titles.

Brand text rendered on the wordmark canvas. It defaults to "UI HUB".

Font spec: fontFamily, fontWeight, fontSize, fontStyle, letterSpacing (fontSize scales with host width). It defaults to Inter 800 / 200px / -0.02em.

UI HUB Wordmark is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.

UI HUB Wordmark uses React and is styled with Tailwind CSS.

UI HUB Wordmark needs WebGL (WebGL2 preferred, WebGL1 fallback), Canvas 2D font atlas, requestAnimationFrame loop and ResizeObserver + devicePixelRatio cap.