Text Effects

Typewriter, glitch, gradient, outline, split entrances and more — laid out and animated letter by letter on canvas; hover to read each glyph’s state.

Tech: Canvas 2D, 逐字布局, easing

Typewriter — The text appears one by one, followed by a blinking cursor; after a pause, delete it word for word, and recycle.
Glitch Text — imitation of signal interference -- cutting text into strips and randomly misdirected and red, The two colour channels are staggered.
Gradient Shine — The text is filled with a horizontal colour gradient, which is smoothing to create a sense of movement; and a tilted white high light is plowed from the left to the right, like a metal reflection.
Outline Fill — First draw a contour of text (strokeText) and stagger several layers to the bottom right to form a stereo shadow; then solid colours "push" from left to right into text
Split & Fall — Split a sentence into a single word, with each word falling from above, with a bit of a jump on the ground; and then drop the picture down one by one after a moment.
Elastic Bounce-in — Each word is zoomed in from 0 to its original size, because "flexible" will go beyond the original size and bounce back several times before stopping, like Jell-O.
Blur to Clear — Each word begins with a dull beginning, and then becomes clear and sharp, like a lens to focus; then it stops and then changes from left to right.
Mirror Flip — One turn in turn per word horizontal axis (vertical scaling from 1 →1 →1) and one upside down below Here, A faded reflection, like standing
Wavy Text — The top and bottom of each word is a sine wave, followed by a little later than the previous word (phase difference), which is linked to a line of buoys that rise and fall on the water.
3D Perspective — The text is written on a backwards-down plane, which continues to move far away.
Neon Tube Text — The text is used as a light pipe with a liner, plus the same colour with a wide-scale blur (shadowBlur) as light.
Scramble — All words are dispersed from their respective positions in a random direction and rotated, and then removed back to the original sentence, looping.
Rolling Counter — Each number is a vertical 0-9 tape, the lowest level continues to scroll when the value increases; when the lower position goes from nine to zero, the upper one follows
Cipher Decode — The text is first displayed as a continuously changing charade, and then from the left to the right, a "decipher" becomes a real word, like the hacker interface in the movie.
Printer Ribbon — Simulates a small ticket printer - the head of the printing is scrutinised through the current line, and a line of paper is printed upwards.
Handwriting Progress — Painting the contours of the word with a dotted line technique -- extending the "real segment" of the dotted line slowly from 0 to the length of the contours, looking like a pen in a pen; every word
Karaoke Subtitles — In the line that you're singing, the color goes from left to right "brush" and the brushes turn to bright color and light; after the line goes to the next line, go up and down
Vertical Scroll Text — Chinese from right to left, Line up and down.
Page Flip — The top two and a half of each grid are separated, the top half is turned down, the first half of the new word is shown, and the lower part of the new word is the second half of the latter.
Liquid Morph — Draws the text on a hidden canvas, then cuts it across into thin strips, staggering each by the sine wave, and looks like the text moves in the water.
Pixel Reveal — The text is drawn on the hidden canvas, sampled by grid: the cells falling inside the font become a pixel.
Smoke Dissolve — Words are broken into tiny particles.
Magnetic Letters — Words float freely in the image with noise; the pointer is like a magnet, and the closer to the pointer, the more it is sucked back into its position in the sentence and set it straight.
Rainbow Bounce — Jump up and down every word in turn (|sin| Curves, like popping balls) while the colour flows along the chalk ring, the first word has the main color and the whole sentence crosses