← PluginsTypography
text-kineticOfficial · by ShadereraKinetic type
Canvas2D text primitives: ASCII scramble, decode in and scramble out, horizontal band glitch, fit to width, hollow outlines, timecode.
Add it to a filmOr ask your agent
“Use the shaderera-plugins skill to add text-kinetic to this film and wire it in, then run check and show me a still.”
- Type
- component · Typography
- Version
- 0.1.0 · published
- Licence
- MIT
- Built on
- No other plugins
- npm
- No packages
- Copies
- Tags
- glitch, scramble, decode, ascii, text, kinetic typography, captions
READMEtext-kinetic
How to
use it.
Canvas2D text that moves like data: ASCII scramble, decode-in and scramble-out, band glitch, fit to width, hollow outlines.
import { decoded, fitWidth, glitched, scramble } from './type/kinetic.ts'// in open: await host.io.font('assets/fonts/IBMPlexMono-SemiBold.ttf', 'IBM Plex Mono SemiBold')const font = '"IBM Plex Mono SemiBold"' // a family alone: the size is put in front of itconst d = decoded('BEAT GRID', t, { from: 2, to: 4, frame: options.frame, seed: 1 })if (d.visible) { ctx.fillStyle = '#fff' const size = fitWidth(ctx, font, 'BEAT GRID', W * 0.6) glitched(ctx, d.text, W / 2, H / 2, { font, size, frame: options.frame, align: 'center', amount: d.settled ? 0.2 : 1 })}ctx.fillText(scramble('174.3 BPM', options.frame, 0.4), 40, 40) // a number that never settlesDeterministic: every choice is a hash of the frame and the character. Pass options.frame.
font is a family alone, with no size or weight: the functions write ${size}px ${font}, and 64px 600 "IBM Plex Mono" is not a CSS font, so the canvas would fall back to another face. Register each weight under its own family name.
More in Typography05 plugins
More in Typography
text-code-wallOfficial · by ShadereraCode wallThe project's own source as a wall of text that scrolls and jumps on the beat, glitched and scrambled, with a claim cut out of the middle.text-feature-captionsOfficial · by ShadereraFeature captionsHuge titles with a small note, several to a scene, swapping on the beat through ASCII noise, each placed anew in one of four layouts inside the safe area.text-glyph-morphOfficial · by ShadereraGlyph morphOne glyph outline or word morphing into another: contours resampled by arc length, paired outer to outer and hole to hole, a contour with no partner grown from a point, the in-between a pure function of k.text-glyph-outlinesOfficial · by ShadereraGlyph outlinesText from a font file as geometry: contours flattened to polylines with the original curves kept, fill triangles with holes cut correctly, and a closed extruded mesh with normals, each with per-glyph ranges so letters can move apart.text-timed-cuesOfficial · by ShadereraTimed cuesLyrics, subtitles and word timings read from LRC (with word times), SRT, WebVTT and JSON (rows, cues or Whisper segments with words): the line and the word at t, times only.