Skip to content
187WEB NATASHA technical blueprint — coordinate grid map of the mascot geometry

187TYPE skill

187TYPE — Kinetic / variable 3D typography.

Designs kinetic, variable, and 3D type that reacts to scroll, audio, or input — without hurting readability.

Type lab

23 live type effects

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.

Interactive11

Hover, click, and drag them — real GSAP ScrambleText, Physics2D, and DrawSVG, not canned playback.

Hover

Entropy Scrambler

/187scrrambletxt

GSAP ScrambleTextPlugin cycles random glyphs, then decodes to the target string.

Click

Physics-Based Falling Text

/187gravitytxt

GSAP Physics2DPlugin gives each character velocity, angle, and gravity — real ballistic motion.

Hoverunderline

Squiggly Underline Draw

/187randunderline

GSAP DrawSVGPlugin animates a hand-drawn SVG path from 0→100% under the word.

Hoverweight

Variable Weight

/187varfont

Tweens font-variation-settings 'wght' on a variable font — thin to black in one smooth pull.

Drag
FIT

Binary-Search Fit

/187fittext

Font-size binary-searches to exactly fill its container width; drag the slider to resize the box.

Hover
ArticleGalleryDemo
read

Context-Aware Cursor

/187textcursor

The follow-cursor's label swaps to each hovered element's data-cursor value with a quickTo lag.

Hover

Character-Stagger Button

/187charstagger

Each letter is a span with an incrementing CSS animation-delay — a cheap, GPU-only stagger.

Draw-In Underline

/187underline

A pseudo-element underline scales in from the left on hover — the cleanest link tell there is.

Hover
move across me
view · view · view · view ·

Marquee-Text Cursor

/187cursormarq

A custom cursor pill holds a looping text marquee that follows the pointer inside the field.

Click

Unified Scramble Engine

/187scrambletri

One scramble engine triggered by load, scroll, or click — here it cycles through target words.

Click

Oversized Type Nav

/187fullnav

A full-screen overlay menu whose oversized links scale and stagger in behind a blurred backdrop.

Reveals & entrances6

Scroll- and timeline-driven entrances — clip wipes, marker sweeps, staggered word highlights.

Live
CHROMATIC

Staggered Chromatic Wave

/187gradwave

Per-character conic-gradient text; each letter's gradient position phase-shifts on a sine wave.

Live
HEADLINE

Typographic Wipe Title

/187titlewipe

A single headline revealed by tweening a clip-path inset from one edge — power4 easing.

Live
Design asprecise,measured craft

Clip-Path Line Reveal

/187maskreveal

SplitText lines wiped in with an animated clip-path inset, staggered top to bottom.

Live
Key insight oneKey insight two

Marker-Pen Reveal

/187highlighter

A marker highlight sweeps across each line by animating background-size on a no-repeat gradient.

Live
wordslightuponebyoneastheyenter

Word Highlighter

/187scrollhighlight

SplitText words toggle an active colour in sequence, driven by scroll progress on the real page.

Live
WELCOME

Typing-Intro Sequence

/187welcomewords

Characters stagger up from the baseline, hold, then clear — the classic splash-loader intro.

Kinetic & looping6

Always-on motion systems — circular type, infinite tickers, rotating word carousels, live utilities.

Live
We buildkineticvariablereactive3D

Rotating Word Carousel

/187rotatetext

A timeline loops a word list — fade the current out, slide the next up into place, repeat.

Live
KINETIC TYPOGRAPHY — 

Infinite Type Ticker

/187bigtypo

Cloned oversized text driven by gsap.utils.wrap for a seamless, never-ending horizontal loop.

Live
187TYPE · KINETIC · REACTIVE · 187

Circular Text Rotator

/187radialtxt

Each glyph is rotated around a shared centre; the whole ring spins continuously, pausing on hover.

Live
FASTERSHARPERSMOOTHER

Word Selector + Highlight

/187loopselector

A word list cycles with the active term wrapped in a sliding highlight box on a timeline.

Drag
19 words1 min read

Reading-Time Estimator

/187readtime

Counts words via a TreeWalker and divides by 200 wpm; a MutationObserver keeps it live as content changes.

Live

Shimmer Skeleton

/187skeleton

A 45° linear-gradient sweep on a 200% background — the standard content-loading shimmer.

Triggers

How to invoke 187TYPE

Trigger
/187type
187TYPE
type
kinetic type
variable font
3d typography
text motion
typography animation
hero headline motion

Use cases

When to route to 187TYPE

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

What 187TYPE delivers

  1. 1Type motion spec
  2. 2Variable-font axis plan
  3. 33D text render notes
  4. 4Readability / accessibility review
  5. 5Next actions

Routing

When to hand off to another skill

Route toWhen
187GSAPtimeline or scrolltrigger sequencing is needed
187HEROtype lives inside a full-screen hero
187ACCESS+readability, motion, or photosensitive review is required

Templates

Artifacts 187TYPE produces

TemplateWhen to use
kinetic-type-spec.mdDesigning animated type
variable-font-plan.mdAnimating font axes