ONONC

Text Animations

Typographic effects that draw the eye — reveals, gradients, decoding, and counters. All stay screen-reader friendly.

Gradient & styled

19
Gradient in motion
Customizable

Gradient Text

A living gradient that pans across the letters.
CSS
Polished & shiny
Customizable

Shiny Text

A glare that sweeps across muted text on a loop.
CSS
Customizable

Glitch Text

Two color channels jitter and clip for a CRT glitch.
CSS
Customizable

Wavy Text

Each letter rides a continuous sine wave.
CSS
Notice the highlight
Customizable

Highlight Text

A marker stroke sweeps in behind the text on view.
motionscroll
Hover this link
Customizable

Gradient Underline

A gradient underline that grows in on hover and focus.
CSSlink
The important part
Customizable

Underline Draw

A hand-drawn gradient underline draws in beneath the text.
motionscroll
Customizable

Neon Text

Glowing sign text with a subtle flicker and deep blur halo.
CSS
HOLOGRAM
Customizable

Holographic Text

Iridescent text whose colors shift through the spectrum continuously.
CSS
SHADOW
Customizable

Shadow Text

Multi-layered colored shadows that pulse and create dimensional depth.
CSS
Breathe
Customizable

Breathing Text

Text gently expands and contracts like a breathing rhythm.
CSS
Customizable

Ghost Text

Ethereal text that fades in and out like an apparition, with a subtle drift.
CSS
Pulse
Customizable

Glow Pulse Text

Expanding glow rings pulse outward from the text like a heartbeat.
CSS
Breaking • UPDATES • rolling • continuously •
Customizable

Ticker Text

News-ticker style scrolling text that loops seamlessly.
CSS
Stripes
Customizable

Striped Text

Animated diagonal stripes flow through the letters.
CSS
Customizable

Twinkle Text

Each character twinkles with staggered random delays like starlight.
CSS
Wave passing through
Customizable

Pulse Wave Text

A brightness wave sweeps left to right through the text in a loop.
CSS
Customizable

Color Cycle Text

Each character independently cycles through the brand palette.
CSS
Customizable

Flicker In Text

Rapid stroboscopic on/off flicker before text stabilizes, like dying neon.
CSS

Reveal on view

19
Customizable

Split Reveal

Words slide up from behind a mask, staggered, on view.
motionscroll
Customizable

Blur In

Words resolve from a soft blur as they fade in.
motionscroll

Customizable

Scroll Reveal

Words light up one by one as the line scrolls through view.
motionscroll
Customizable

Flip Text

Each character flips up into place on view.
motion3D
Customizable

Letters Pull-Up

Each letter springs up and fades in, staggered, on view.
motionscroll
Wiped into view
Customizable

Text Reveal

A clip-path mask wipes the text into view.
motionscroll
Customizable

Decrypt Text

Characters resolve out of random glyphs in scattered order.
motionscroll
Customizable

Line Reveal

Each line slides up from behind a mask, in sequence.
motionscroll
Tracking in
Customizable

Tracking In

Letter-spacing expands out of a blur as the text fades in.
motionscroll
Customizable

Staggered Fade

Each character fades, slides, and rotates into place one by one.
motionscroll
Customizable

Rising Text

Each character rises up from below with a spring settle.
motionscroll
Customizable

Kinetic Reveal

Words burst in with scale, rotation, and blur in a springy sequence.
motionscroll
Customizable

Clip-Draw Text

SVG stroke outline draws in character-by-character, then fills.
motionSVG
Customizable

Revolve Text

Each character does a 360 spin on its own axis, staggered on view.
motion3D
Customizable

Gravity Text

Letters drop in from above with heavy bounce physics and wobble settle.
motionscroll
Customizable

Zoom Blur Text

Characters zoom in from a huge distant scale with extreme motion blur.
motionscroll
Customizable

Warp In Text

Characters warp in from a compressed, skewed state with an energetic snap.
motionscroll
  
Customizable

Expand Text

Text expands from compressed letter-spacing into natural breathing room.
motionscroll
Above the foldBelow the surface
Customizable

Dual Tone Text

Two text layers slide apart vertically as you scroll.
motionscroll

Looping & typing

9
I build
Customizable

Typewriter

Types and deletes through a rotating list of phrases.
loop
Made for designers
Customizable

Rotating Text

Swaps through words in a vertical slot.
motionloop
Customizable

Scramble Text

Glyphs flicker and lock into the final string.
hover
Customizable

Focus Text

Focus rolls across the words, blurring all but the active one.
motionloop
Customizable

Fire Text

Letters flicker with flame-like scale, opacity, and blur in a continuous loop.
motionloop
It’s fluid
Customizable

Morphing Text

Each word scales down while the next scales up in a smooth morph.
motionloop
DEPARTING
Customizable

Split Flap

Retro split-flap display. Each word flips down like a departure board.
motionloop
Customizable

Swap Cascade

Random glyphs cascade left to right, locking into the target text.
motionloop
Customizable

Digi-Clock Text

Characters flip through glyphs like a digital clock, then resolve.
motion

Numbers

2
$0
Customizable

Count Up

Eases a number to its target the first time it's seen.
motionscroll
Customizable

Number Ticker

Odometer digits that roll to the target on view.
motionscroll

Pointer-reactive

9
Customizable

Text Pressure

Letters swell and thicken toward the cursor.
pointer
Customizable

Scatter Text

Characters fly apart and reassemble on hover like scattered cards.
motionhover
Customizable

Perspective Text

Text tilts in 3D towards the mouse with a parallax glow.
pointer
Customizable

Elastic Text

Letters stretch toward the pointer like a rubber band.
pointer
Customizable

Ripple Text

Letters undulate away from the cursor like ripples on water.
pointer
Customizable

Shake Text

Text vibrates with random micro-displacements on pointer move.
pointer
Customizable

Shatter Text

Characters shatter outward and reform on hover, like breaking glass.
motionhover
Customizable

Magnetic Text

Each letter is pulled toward the cursor like iron filings to a magnet.
pointer
Customizable

Split Color Text

Text is split horizontally at the cursor: top half in one color, bottom in another.
pointer