ShurIQ Motion Reference50 techniques + 30 typography + 10 grammar2026-04-28

Motion Techniques
Cavalry Reference Gallery

Fifty reusable motion-graphics techniques in sixteen categories. Thirty kinetic-typography patterns covering foundations through experimental. Seven ShurIQ Visual Grammar primitives plus a live system demo and two framework compositions (vg-swot · vg-five-forces). Ninety reference patterns total — every one a self-contained Cavalry script.

Length3–8 sec each

Composition1080×1080 @ 24fps

BridgeStallion · 127.0.0.1:8080

Sourcescenes/techniques/ · scenes/grammar/

Launchers./run-tech.sh · ./run-tech.sh grammar

← Phase 0 Brief Fiserv GTM Demos Techniques (50) Visual Grammar (10)

CATEGORY

Ambient

01ambient

particle-field

120 dots breathing in random rhythm. Atmospheric texture; every pulse independent.

./run-tech.sh particle-field

View source

27ambient

breathing-circle

Single ellipse oscillates scale + opacity in 4-second meditative breath cycle.

./run-tech.sh breathing-circle

View source

CATEGORY

Mathematical

02mathematical

wave-grid

16×16 grid scaling in 2D sine wave with phase-offset propagation.

./run-tech.sh wave-grid

View source

16mathematical

fibonacci-spiral

89 ellipses on phi-spiral coordinates, scale-pop sequentially outward.

./run-tech.sh fibonacci-spiral

View source

17mathematical

pendulum-wave

15 pendulums of incrementing length swing into phase-wave pattern.

./run-tech.sh pendulum-wave

View source

18mathematical

sine-cascade

Row of 30 vertical bars bobbing on phase-shifted sine waves.

./run-tech.sh sine-cascade

View source

13mathematical

spirograph

80 dots in dual-rotation: outer orbit + counter-rotating inner forms petal pattern.

./run-tech.sh spirograph

View source

CATEGORY

Radial

03radial

concentric-pulse

Hexagonal rings expanding from a center node, fading as they grow.

./run-tech.sh concentric-pulse

View source

14radial

sunburst-rays

24 thin tapered rectangles fanning from center, slow rotation with opacity wave.

./run-tech.sh sunburst-rays

View source

15radial

radar-sweep

Long thin rectangle rotating 360° with 8 trailing fade clones behind it.

./run-tech.sh radar-sweep

View source

33radial

iris-aperture

8 polygon blades rotate closed-to-open like a camera shutter; cobalt circle revealed through center hole.

./run-tech.sh iris-aperture

View source

34radial

polar-bloom

5 concentric rings of 5-point stars (8/12/16/20/24 each) rotate alternately, opacity wave per ring.

./run-tech.sh polar-bloom

View source

CATEGORY

Cosmic

04cosmic

orbital

Central body with 5 satellites at different radii and angular velocities.

./run-tech.sh orbital

View source

19cosmic

starfield-parallax

3 layers of stars drifting at different speeds; depth illusion via parallax.

./run-tech.sh starfield-parallax

View source

35cosmic

planet-orrery

5 planets orbit a sun at Kepler-relative speeds. Each orbit ring rendered faintly; sun has glow halo.

./run-tech.sh planet-orrery

View source

36cosmic

comet-streak

Single ellipse arcs across frame on parabolic path leaving 18-clone fade-trail; faint stars in background.

./run-tech.sh comet-streak

View source

CATEGORY

Explosive

05explosive

burst

60 particles fly outward from central pulsing core in three sequential burst waves.

./run-tech.sh burst

View source

20explosive

confetti-burst

60 small rectangles ejecting from point with randomized rotation and gravity arc, plus "ANNOUNCED!" trigger.

./run-tech.sh confetti-burst

View source

37explosive

shockwave-ring

Three staggered ellipse-stroke rings scale from 0 to viewport with opacity fade. Impact emphasis device.

./run-tech.sh shockwave-ring

View source

38explosive

shatter-shards

30 triangle shards form a logo cluster, hold, then fly apart radially with tumble rotation and fade.

./run-tech.sh shatter-shards

View source

CATEGORY

Typographic

06typographic

type-kinetic

Phrase letter-by-letter; each character pops in via scale + opacity stagger.

./run-tech.sh type-kinetic

View source

23typographic

marquee-text

Stock-ticker-style scroll: symbol + delta values flow horizontally at constant speed.

./run-tech.sh marquee-text

View source

30typographic

stagger-letter-rise

Letters rise from below baseline with 2-frame stagger and scale-pop resolve.

./run-tech.sh stagger-letter-rise

View source

39typographic

typewriter-cursor

Text reveals one character at a time, blinking cursor block tracks the leading edge — terminal aesthetic.

./run-tech.sh typewriter-cursor

View source

40typographic

word-explode

Word's letters scatter outward at random angles with rotation, then snap back to baseline with overshoot.

./run-tech.sh word-explode

View source

CATEGORY

Infographic

07infographic

climbing-bars

Eight vertical bars rise sequentially with overshoot then settle.

./run-tech.sh climbing-bars

View source

24infographic

meter-needle

Gauge needle sweeps 0 → 270° with overshoot and settle; counter readout at climax.

./run-tech.sh meter-needle

View source

28infographic

pyramid-stack

5 trapezoid tiers (wide bottom → narrow top) rise sequentially as labelled funnel stages.

./run-tech.sh pyramid-stack

View source

41infographic

funnel-flow

4 stacked stages (Awareness → Engagement → Qualification → Conversion) with 30 dots flowing through, narrowing per stage.

./run-tech.sh funnel-flow

View source

42infographic

pie-wedge-sweep

7 polygon wedges of varying angular size reveal sequentially to construct a donut chart with center label.

./run-tech.sh pie-wedge-sweep

View source

CATEGORY

Data-Viz

08data-viz

network-form

14 nodes appear, then 22 edges form via nearest-neighbor. Graph emerges to relationships.

./run-tech.sh network-form

View source

25data-viz

bubble-chart-grow

30 ellipses scale-pop into 2D scatter positions sized by data value, axes drawn first.

./run-tech.sh bubble-chart-grow

View source

29data-viz

dot-matrix-fill

100-dot grid fills sequentially to represent statistic — NYT-style stat reveal.

./run-tech.sh dot-matrix-fill

View source

43data-viz

candlestick-march

24 candlesticks step left-to-right with green/red color keys; finance reel aesthetic with wick + body per bar.

./run-tech.sh candlestick-march

View source

44data-viz

sparkline-draw

60 small bars incrementally appear forming a tiny trend line; "+47%" callout reveals at climax.

./run-tech.sh sparkline-draw

View source

CATEGORY

Grid

09grid reveal

heatmap-wave

12×12 colored grid revealing in diagonal wave (frame proportional to row+col).

./run-tech.sh heatmap-wave

View source

11glitch

fragment-tile

10×10 tile grid forms, shatters with random vectors, then reassembles from new directions.

./run-tech.sh fragment-tile

View source

26grid

checker-flip

8×8 checkerboard squares scale-flip in diagonal cascade with alternating colors.

./run-tech.sh checker-flip

View source

45grid

pixel-rain

Matrix-style: 30 columns of green rectangles drop down at varying speeds with leading bright cell + trailing fade.

./run-tech.sh pixel-rain

View source

CATEGORY

Counter

10counter

number-counter

Step-counter from 12 → 184,592 via 12 overlapping textShapes that fade between values.

./run-tech.sh number-counter

View source

CATEGORY

Cartographic

12cartographic

topo-contours

14 concentric many-sided polygons expanding at different rates with staggered fade.

./run-tech.sh topo-contours

View source

CATEGORY

Organic

14organic

liquid-ripple

3 tap points spawn 4 expanding ripple rings each, staggered in time.

./run-tech.sh liquid-ripple

View source

46organic

heart-rhythm

3 ECG heartbeats trace across baseline; red ellipse pulses on each spike. "72 BPM" readout right of waveform.

./run-tech.sh heart-rhythm

View source

CATEGORY

Directional

15directional

path-trace

Lead particle traces Lissajous figure-8; 14 trail dots follow at decreasing opacity.

./run-tech.sh path-trace

View source

31directional

arrow-cascade

Triangular polygon arrows fly across in echelon formation, fading as they exit frame.

./run-tech.sh arrow-cascade

View source

CATEGORY

Geometric

21geometric

nested-squares

12 concentric squares rotating at incrementing rates produce moiré interference.

./run-tech.sh nested-squares

View source

47geometric

hex-honeycomb

63-cell hexagonal grid pulses outward from center cell with scale wave radiating distance-from-origin.

./run-tech.sh hex-honeycomb

View source

48geometric

triangle-tessellation

216 triangles tile the canvas (alternating up/down orientation), flip in stagger to reveal alternating colors.

./run-tech.sh triangle-tessellation

View source

CATEGORY

Glitch

49glitch

scanline-glitch

VHS aesthetic: "SIGNAL LOST" headline with RGB-shift offset clones (red/green) jittering on x-axis at 5 glitch-burst frames; horizontal scanline bars flash randomly.

./run-tech.sh scanline-glitch

View source

CATEGORY

Cinematic

50cinematic

spotlight-iris

Four black mask rectangles initially squeeze into a small viewport letting only "REVEALED" + colorful BG dots show through; then snap-open to full frame for the big reveal.

./run-tech.sh spotlight-iris

View source

TYPOGRAPHY LAB · 30 TEXT-MOTION PATTERNS

Text in Motion

Thirty kinetic-typography patterns covering foundations, editorial, broadcast, and experimental modes. Browse for inspiration; point at one and we adapt it for the next deliverable.

T·01foundation

kinetic-headline

4 words enter from different angles + rotations, settle into a 2-line headline. Cobalt highlight on the third.

./run-tech.sh kinetic-headline

View source

T·02foundation

chromatic-aberration

RGB-shifted text clones (red/green) jitter on x-axis with periodic aberration spike — VHS / chromatic-shift aesthetic.

./run-tech.sh chromatic-aberration

View source

T·03foundation

paragraph-typewriter

Multi-line reveal at typing speed; blinking cobalt cursor follows the leading edge across line wraps.

./run-tech.sh paragraph-typewriter

View source

T·04foundation

vertical-marquee

Star Wars-style vertical text scroll. Title + chapter heading + body lines roll continuously upward.

./run-tech.sh vertical-marquee

View source

T·05foundation

kerning-spread

Letter-spacing animates from tight to wide and back over a sine cycle. Cobalt accent on the middle letter.

./run-tech.sh kerning-spread

View source

T·06foundation

caps-cascade

Uppercase letters drop in sequentially with capital-weight overshoot; cobalt accent every 4th letter; rule line draws under.

./run-tech.sh caps-cascade

View source

T·07data + emphasis

liquid-text

Letters bob on phase-shifted sine waves with subtle rotation — like text floating on water.

./run-tech.sh liquid-text

View source

T·08data + emphasis

highlight-sweep

Yellow highlight bar sweeps under the line, then a cobalt underline draws beneath as the trailing accent.

./run-tech.sh highlight-sweep

View source

T·09data + emphasis

ascii-fade

Random glyphs cycle at each character position before resolving to the final word — cipher-decoding aesthetic.

./run-tech.sh ascii-fade

View source

T·10data + emphasis

counter-with-words

Static modifier text ("PAID · RECEIVED · SETTLED") with animated $ value cycling through 11 step values.

./run-tech.sh counter-with-words

View source

T·11data + emphasis

quote-pull

Decorative quotation marks pop in at top-left and bottom-right; quote text reveals word-by-word between them.

./run-tech.sh quote-pull

View source

T·12data + emphasis

text-shatter

Letters explode outward from word with rotation + scale-down + opacity fade, then reassemble. Triangle shards eject too.

./run-tech.sh text-shatter

View source

T·13editorial

echo-text

Word repeats at decreasing opacity behind itself, drifting outward — visual echo / motion blur effect.

./run-tech.sh echo-text

View source

T·14editorial

chapter-title

Book chapter style: large italic Roman numeral, ornament rule with diamond, chapter title, subhead — full editorial frontispiece.

./run-tech.sh chapter-title

View source

T·15editorial

heading-with-rule

Eyebrow tag + heading fade in, horizontal rule draws beneath with cobalt accent block on the right.

./run-tech.sh heading-with-rule

View source

T·16editorial

tagline-reveal

Tagline reveals in 5 chunks with breath between — chunks land with subtle position drop into place. Cobalt accent on the punchline.

./run-tech.sh tagline-reveal

View source

T·17editorial

dictionary-define

Word + phonetic pronunciation + part-of-speech + numbered definitions reveal in editorial-stack sequence. Latin etymology footer.

./run-tech.sh dictionary-define

View source

T·18broadcast

lower-third

TV-style name/title bar slides in from left: cobalt accent block, ink bar with name + role, logo top-right.

./run-tech.sh lower-third

View source

T·19broadcast

breaking-news

Red BREAKING bar with pulsing tag + LIVE timestamp + black ticker bar with scrolling stock-style symbols + delta values.

./run-tech.sh breaking-news

View source

T·20broadcast

scrolling-credits

Film-style end credits roll: role/name pairs scroll upward at constant speed. Final ShurIQ · 2026 emerges in cobalt.

./run-tech.sh scrolling-credits

View source

T·21broadcast

count-down

5...4...3...2...1...GO sequential reveal. Each numeral pop-scales + concentric ring expands; color shifts cobalt → critical near zero.

./run-tech.sh count-down

View source

T·22broadcast

text-trim-paint

Letters drawn in stroke-only first (outline reveal), then fill in solid behind. Cobalt underline draws across at the end.

./run-tech.sh text-trim-paint

View source

T·23broadcast

bouncy-letter

Each letter has spring-bounce physics with phase offset. Squash on impact, stretch in air. Floor line for ground reference.

./run-tech.sh bouncy-letter

View source

T·24broadcast

blink-rhythm

Words blink in Morse-like rhythmic patterns; tempo varies row-to-row. Critical-red row blinks fastest.

./run-tech.sh blink-rhythm

View source

T·25experimental

glyph-cycle

Single character morphs through a sequence of typographic glyphs (§ ¶ ‡ ◊ ⌬ ⊛ ⌖ ⌘ ∞) — each pops with rotation + scale.

./run-tech.sh glyph-cycle

View source

T·26experimental

screen-fill

Word grows from tiny to HUGE filling screen; replacement word follows. Pure scale + opacity choreography.

./run-tech.sh screen-fill

View source

T·27experimental

vertical-text

CJK-style: 4 vertical columns of letters with rules between. Letters in each column drop in top-down with stagger.

./run-tech.sh vertical-text

View source

T·28experimental

ransom-note

Each letter different size/font/color/rotation on a "scrap" rectangle background — kidnapper-letter aesthetic.

./run-tech.sh ransom-note

View source

T·29experimental

text-mirror

Text + faded reflection beneath, separated by cobalt water-line. Both ride a subtle sine wave for water-surface feel.

./run-tech.sh text-mirror

View source

T·30experimental

strikethrough-line

Original word gets struck through with red line drawing across, fades; replacement slides in from below in cobalt.

./run-tech.sh strikethrough-line

View source

SHURIQ VISUAL GRAMMAR · CHORD-GRAPH CONSTELLATION STYLE

The Seven Primitives, in Motion

Every mark on a regulatory-grade ShurIQ report traces to one of seven primitives. Here they are reborn with the chord-graph aesthetic — dark canvas, seven-color musical-theory palette, three-tier glow, sqrt-scaled radii, opacity-weighted edges.

Source: hooktheory-graph-visualization-analysis · derived from Hooktheory Trends · 7 nodes encoding 5 dimensions simultaneously

iprimitive

entity-node

Nameable observed thing. Size = √degree · color = cluster · glow = identity. Three-tier rendering: outer blur, mid aura, solid core.

./run-tech.sh vg-entity-node

View source

iiprimitive

value-flow

Directed REA verb. Edge opacity 0.04–0.15 + particle stream where density encodes $ value. The narrow opacity band creates the constellation effect.

./run-tech.sh vg-value-flow

View source

iiiprimitive

event-marker

Dated occurrence. Vertical flagpole + ochre dot · strike-arrival pop · ripple outward · residual trail. Anchors temporal claims to evidence.

./run-tech.sh vg-event-marker

View source

ivprimitive

rubric-axis

Dimension scored [0,100]. Vertical track · animated needle tween · threshold band · peer-median dashed line. Anchors quantitative claims.

./run-tech.sh vg-rubric-axis

View source

vprimitive

gap

Structural hole — two clusters that should connect but don't. Dashed red edge · static-noise pulse · lightning-arc bridges · solid edge replaces gap.

./run-tech.sh vg-gap

View source

viprimitive

bridge

Proposed entity closing a gap. Accent-blue node materializes between clusters · dual-source pulse · wormhole connect · evidence bloom.

./run-tech.sh vg-bridge

View source

viiprimitive

consensus-score

Statement on subjectiveness spectrum [0,1]: personal → team → emerging → professional → legal. Whisker spread · dispersion cloud · agreement crystallization.

./run-tech.sh vg-consensus-score

View source

viiicomposition

vg-swot

Operational read · two orthogonal rubric-axis cross the canvas (internal × external, helpful × harmful) · four quadrants populate with entity-nodes · threats wear gap-style dashed rings · opportunities bloom bridge-blue · net leverage crystallizes at bottom. Composition of existing primitives, not a new mark.

./run-tech.sh vg-swot

View source

ixcomposition

vg-five-forces

Industry pressure read · four forces at cardinal vertices around a center industry-rivalry node · each spoke carries a rubric-axis intensity bar · value-flow particles converge inward · industry attractiveness rolls up as inverse of mean pressure. Pentagon math from beta-pentagon-bps, repurposed for Porter.

./run-tech.sh vg-five-forces

View source

∞system demo

vg-system · The Whole Grammar

Twelve seconds. All seven primitives compose a single live ShurIQ panel: ten entity-nodes form two clusters · faint value-flow edges connect them · three event-markers anchor a timeline · a structural gap appears in red dashed pulse · a bridge materializes accent-blue and replaces the gap · a rubric-axis on the right scores 62 with anticipation curve · a consensus-score crystallizes at 0.62 below. Watch the whole regulatory grammar unfold in one composition.

./run-tech.sh vg-system

View source · 280+ keyframes

← Back to Showcase