Check LIVE DEMO
Blend Text is a multi-layer text component that adds depth, motion, and gradient blending to your typography.
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.
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 .
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
Amr Rashed
