Documentation/14 Typography Effects

14 Cinema-Grade Typography Effects

Engineered for pure performance and visual fidelity. Zero layout shift, fully selectable, responsive text with harmonic spring physics and live parameter controls.

#Component / ClassEffect IDDescriptionConfig Props
01LiquidSheenText"liquid-sheen"Molten organic liquid gradient sweep with interactive specular highlight.colors, speed, sheenColor, outlineColor
02LiquidRefractionText"liquid-refraction"Interactive optical lens refraction that bends light around the cursor.radius, refraction, chromatic, smoothing
03VariablePhysicsText"variable-physics"Variable font weight and width driven by real-time spring physics oscillators.weightRange, widthRange, frequency, damping
04ShatterMorphText"shatter-morph"Typography shatters into geometric shards and morphs into new characters.targetText, shardCount, explosionForce, duration
05OffsetShadowText"offset-shadow"Decoupled dual-tone CMY shadow planes with elastic lag momentum.magentaColor, cyanColor, offset, stiffness, damping
06ChromaticGlitchText"chromatic-glitch"Split RGB chromatic horizontal glitch slices with dynamic trigger.intensity, hoverSurge, topColor, botColor
07SteppedDepthText"stepped-depth"Multi-layer isometric stepped extrusions with mouse-driven perspective.layers, stepDistance, direction, color
08Isometric3DText"isometric-3d"True vector 3D typographic face extrusion with cast lighting shadows.depth, frontColor, topColor, sideColor, shadowColor
09NeonFlickerText"neon-flicker"Gas-discharge neon tube emission with randomized voltage flicker.color, coreColor, glowIntensity, flicker
10SoftClayDebossText"soft-clay"Tactile neumorphic clay deboss with organic inward shadow bevels.bgColor, textColor, depth, softness
11WireframeStackText"wireframe-stack"Architectural layered wireframe outline stack with optical offset.layers, offset, strokeWidth, strokeColor
12AuroraGradientText"aurora-gradient"Flowing multi-color magnetic aurora borealis plasma text mask.colors, speed, glow
13AvantGardeText"avant-garde"Swiss modernist geometric character shifting with typographic balance.shiftDistance, duration, easing
14DotMatrixLedText"dot-matrix"Sub-pixel LED grid matrix with phosphor persistence and bloom.dotSize, gap, activeColor, inactiveColor, bloom

Typography Usage Guide

Method 1: Universal <MoText> Component

tsx
1import { MoText } from 'motion-organic/react';
2
3export function Headline() {
4  return (
5    <h1 className="text-6xl font-bold tracking-tight">
6      <MoText
7        effect="liquid-sheen"
8        colors={['#b8db1e', '#edff82', '#ffffff']}
9        speed={1.5}
10        interactive={true}
11      >
12        LIVING DYNAMICS
13      </MoText>
14    </h1>
15  );
16}