Blend Text

Blend Text is a multi-layer text component that adds depth, motion, and gradient blending to your typography.

Check LIVE DEMO Blend Text is a multi-layer text component that adds depth, motion, and gradient blending to your typography. What it does Creates a 3D‑style blend effect by duplicating your text into multiple offset layers, producing depth and motion . Flexible styling options: choose between 3 modes Solid fill, Outline, or a Mixed, Face colour plus a outlined trail, note that face and trail colours can be different for added depth. Three interaction modes: Static – the layered text remains fixed. Mouse follow – the trail shifts toward your pointer, either on the text itself or across the whole viewport. Scroll – layers collapse or expand back to the origin as you scroll. Full control over typography: set font size, family, weight, line height, letter spacing and alignment. Adjustable trail layers: control the number of layers (Steps), their direction and the distance. A performance monitor automatically caps layer counts on lower‑end devices . Accessibility‑aware: respects reduced motion and high contrast settings , and includes ARIA labels for screen reader support. Key highlights Automatic performance adaptation – detects device capability and adjusts layer counts and smoothing. Scroll behaviours – collapse or expand layers as you scroll. Mouse‑follow options – restrict motion to the text only or the entire viewport; optional cursor reversal. Colour gradient control – invert gradient direction and tweak distance and angle for creative effects. High‑contrast & reduced‑motion friendly – automatically reduces steps or disables motion when needed . Suggested Use Cases Hero headlines with layered depth Landing page titles with interactive motion Portfolio typography that feels alive Scroll-animated editorial text reveals Marketing sites needing cinematic or playful motion