Entropy Scrambler
/187scrrambletxtGSAP ScrambleTextPlugin cycles random glyphs, then decodes to the target string.

187TYPE skill
Designs kinetic, variable, and 3D type that reacts to scroll, audio, or input — without hurting readability.
Type lab
Every kinetic-typography pattern in the 187TYPE catalog, built as a real, interactive demo you can play with — each labelled with its /187… command and the technique behind it. All honour prefers-reduced-motion.
Hover, click, and drag them — real GSAP ScrambleText, Physics2D, and DrawSVG, not canned playback.
/187scrrambletxtGSAP ScrambleTextPlugin cycles random glyphs, then decodes to the target string.
/187gravitytxtGSAP Physics2DPlugin gives each character velocity, angle, and gravity — real ballistic motion.
/187randunderlineGSAP DrawSVGPlugin animates a hand-drawn SVG path from 0→100% under the word.
/187varfontTweens font-variation-settings 'wght' on a variable font — thin to black in one smooth pull.
/187fittextFont-size binary-searches to exactly fill its container width; drag the slider to resize the box.
/187textcursorThe follow-cursor's label swaps to each hovered element's data-cursor value with a quickTo lag.
/187charstaggerEach letter is a span with an incrementing CSS animation-delay — a cheap, GPU-only stagger.
/187underlineA pseudo-element underline scales in from the left on hover — the cleanest link tell there is.
/187cursormarqA custom cursor pill holds a looping text marquee that follows the pointer inside the field.
/187scrambletriOne scramble engine triggered by load, scroll, or click — here it cycles through target words.
/187fullnavA full-screen overlay menu whose oversized links scale and stagger in behind a blurred backdrop.
Scroll- and timeline-driven entrances — clip wipes, marker sweeps, staggered word highlights.
/187gradwavePer-character conic-gradient text; each letter's gradient position phase-shifts on a sine wave.
/187titlewipeA single headline revealed by tweening a clip-path inset from one edge — power4 easing.
/187maskrevealSplitText lines wiped in with an animated clip-path inset, staggered top to bottom.
/187highlighterA marker highlight sweeps across each line by animating background-size on a no-repeat gradient.
/187scrollhighlightSplitText words toggle an active colour in sequence, driven by scroll progress on the real page.
/187welcomewordsCharacters stagger up from the baseline, hold, then clear — the classic splash-loader intro.
Always-on motion systems — circular type, infinite tickers, rotating word carousels, live utilities.
/187rotatetextA timeline loops a word list — fade the current out, slide the next up into place, repeat.
/187bigtypoCloned oversized text driven by gsap.utils.wrap for a seamless, never-ending horizontal loop.
/187radialtxtEach glyph is rotated around a shared centre; the whole ring spins continuously, pausing on hover.
/187loopselectorA word list cycles with the active term wrapped in a sliding highlight box on a timeline.
/187readtimeCounts words via a TreeWalker and divides by 200 wpm; a MutationObserver keeps it live as content changes.
/187skeletonA 45° linear-gradient sweep on a 200% background — the standard content-loading shimmer.
Triggers
| Trigger | |
|---|---|
| /187type | |
| 187TYPE | |
| type | |
| kinetic type | |
| variable font | |
| 3d typography | |
| text motion | |
| typography animation | |
| hero headline motion |
Use cases
Design kinetic headlines and hero type
Animate variable-font axes on interaction or scroll
Build 3D text scenes with R3F/Three.js
Check type motion for readability and reduced-motion
Output contract
Routing
| Route to | When |
|---|---|
| 187GSAP | timeline or scrolltrigger sequencing is needed |
| 187HERO | type lives inside a full-screen hero |
| 187ACCESS+ | readability, motion, or photosensitive review is required |
Templates
| Template | When to use |
|---|---|
| kinetic-type-spec.md | Designing animated type |
| variable-font-plan.md | Animating font axes |