# 104 Text CSS animations

Headline, per-character and word-level text effects: entrances, loops, glows, reveals and physics-style motion. Bundle: 8.4 KB gzip (45.5 KB minified).

```js
import "@salkomdesignstudio/sds-motion-forge/categories/text";
```

- [Arc Orbit](https://sds-motion-forge.netlify.app/animations/arc-orbit/) — `.sds-arc-orbit` — Each child orbits in with stagger delay
- [Aurora Text](https://sds-motion-forge.netlify.app/animations/aurora-text/) — `.sds-aurora-text` — Six-colour gradient clip sweeps through text
- [Blur Focus](https://sds-motion-forge.netlify.app/animations/blur-focus/) — `.sds-blur-focus` — Sharpens from heavy blur with tracking
- [Bounce Drop In](https://sds-motion-forge.netlify.app/animations/bounce-drop-in/) — `.sds-bounce-drop-in` — Drops in with a squashy bounce
- [Bounce In Up](https://sds-motion-forge.netlify.app/animations/bounce-in-up/) — `.sds-bounce-in-up` — Multi-step elastic Y-axis bounce entrance
- [Bounce Loop](https://sds-motion-forge.netlify.app/animations/bounce-loop/) — `.sds-bounce-loop` — Bounces continuously (loop)
- [Center Burst](https://sds-motion-forge.netlify.app/animations/center-burst/) — `.sds-center-burst` — Chars start at center, fan out
- [Char Orbit](https://sds-motion-forge.netlify.app/animations/char-orbit/) — `.sds-char-orbit` — Orbits in from above with rotation
- [Chromatic Shift](https://sds-motion-forge.netlify.app/animations/chromatic-shift/) — `.sds-chromatic-shift` — Slow hue-rotate + saturate colour cycle
- [Cinema Title](https://sds-motion-forge.netlify.app/animations/cinema-title/) — `.sds-cinema-title` — Letter-spacing collapses with blur in cinematic style
- [Cipher Reveal](https://sds-motion-forge.netlify.app/animations/cipher-reveal/) — `.sds-cipher-reveal` — Brightness and blur resolve like decryption
- [Color Cycle](https://sds-motion-forge.netlify.app/animations/color-cycle/) — `.sds-color-cycle` — Cycles through a flowing gradient (loop)
- [Data Stream](https://sds-motion-forge.netlify.app/animations/data-stream/) — `.sds-data-stream` — Clip-path + brightness data-decode entrance
- [Depth Charge](https://sds-motion-forge.netlify.app/animations/depth-charge/) — `.sds-depth-charge` — Deep warp from Z-space with delay
- [Depth Warp](https://sds-motion-forge.netlify.app/animations/depth-warp/) — `.sds-depth-warp` — Flies in from deep Z-space
- [Door Open](https://sds-motion-forge.netlify.app/animations/door-open/) — `.sds-door-open` — Swings open like a door in 3D
- [Drop Bounce](https://sds-motion-forge.netlify.app/animations/drop-bounce/) — `.sds-drop-bounce` — Drops and bounces on the floor
- [Drop & Settle](https://sds-motion-forge.netlify.app/animations/drop-settle/) — `.sds-drop-settle` — Per-char staggered fall from above
- [Echo Out](https://sds-motion-forge.netlify.app/animations/echo-out/) — `.sds-echo-out` — Casts a layered echo shadow
- [Elastic Bounce](https://sds-motion-forge.netlify.app/animations/elastic-bounce/) — `.sds-elastic-bounce` — Spring overshoot with cubic-bezier(0.34,1.56,0.64,1)
- [Elastic Stamp](https://sds-motion-forge.netlify.app/animations/elastic-stamp/) — `.sds-elastic-stamp` — Scales in from zero with elastic rotation
- [Explode Formation](https://sds-motion-forge.netlify.app/animations/explode-formation/) — `.sds-explode-formation` — Scattered start, spring to position
- [Film Burn](https://sds-motion-forge.netlify.app/animations/film-burn/) — `.sds-film-burn` — Sepia-tinted focus-pull entrance
- [Flicker On](https://sds-motion-forge.netlify.app/animations/flicker-on/) — `.sds-flicker-on` — Light-bulb turn-on with stepped opacity flicker
- [Flip X](https://sds-motion-forge.netlify.app/animations/flip-x/) — `.sds-flip-x` — Flips in on the X axis
- [Flip Y](https://sds-motion-forge.netlify.app/animations/flip-y/) — `.sds-flip-y` — Flips in on the Y axis
- [Float Bob](https://sds-motion-forge.netlify.app/animations/float-bob/) — `.sds-float-bob` — Gently floats and bobs (loop)
- [Focus Pull](https://sds-motion-forge.netlify.app/animations/focus-pull/) — `.sds-focus-pull` — Camera-focus pull from soft to sharp
- [Fold Down](https://sds-motion-forge.netlify.app/animations/fold-down/) — `.sds-fold-down` — Folds down into view on a 3D hinge
- [Fold Up](https://sds-motion-forge.netlify.app/animations/fold-up/) — `.sds-fold-up` — Folds up into view on a 3D hinge
- [Glitch Flicker](https://sds-motion-forge.netlify.app/animations/glitch-flicker/) — `.sds-glitch-flicker` — Flickering analog noise with slicing displacement
- [Glitch Slide](https://sds-motion-forge.netlify.app/animations/glitch-slide/) — `.sds-glitch-slide` — Glitch-steps into place
- [Glow Pulse](https://sds-motion-forge.netlify.app/animations/glow-pulse/) — `.sds-glow-pulse` — Pulses with a soft neon glow (loop)
- [Gradient Sweep](https://sds-motion-forge.netlify.app/animations/gradient-sweep/) — `.sds-gradient-sweep` — Moving gradient mask over the text
- [Grand Entrance](https://sds-motion-forge.netlify.app/animations/grand-entrance/) — `.sds-grand-entrance` — Big orchestrated scale-blur entrance
- [Gravity Bounce](https://sds-motion-forge.netlify.app/animations/gravity-bounce/) — `.sds-gravity-bounce` — Falls under gravity, inelastic floor bounce
- [Gravity Drop](https://sds-motion-forge.netlify.app/animations/gravity-drop/) — `.sds-gravity-drop` — Falls from above with overshoot bounce
- [Heartbeat](https://sds-motion-forge.netlify.app/animations/heartbeat-text/) — `.sds-heartbeat-text` — Beats like a heartbeat (loop)
- [Heat Shimmer](https://sds-motion-forge.netlify.app/animations/heat-shimmer/) — `.sds-heat-shimmer` — Subtle heat-distortion skewX + scaleY loop
- [Highlight Burn](https://sds-motion-forge.netlify.app/animations/highlight-burn/) — `.sds-highlight-burn` — Highlight marker swipes across the text
- [Hologram Text](https://sds-motion-forge.netlify.app/animations/hologram-text/) — `.sds-hologram-text` — Holographic skew flicker with hue rotation
- [Ink Bleed](https://sds-motion-forge.netlify.app/animations/ink-bleed/) — `.sds-ink-bleed` — Letter-spacing collapses as blur resolves
- [Iris Open](https://sds-motion-forge.netlify.app/animations/iris-open/) — `.sds-iris-open` — Opens from a circular iris
- [Jello](https://sds-motion-forge.netlify.app/animations/jello/) — `.sds-jello` — Jiggles with a jello skew
- [Kinetic Wave](https://sds-motion-forge.netlify.app/animations/kinetic-wave/) — `.sds-kinetic-wave` — Each child bounces up/down in a wave
- [Levitate](https://sds-motion-forge.netlify.app/animations/levitate/) — `.sds-levitate` — Gentle float with subtle rotation
- [Light Speed](https://sds-motion-forge.netlify.app/animations/light-speed/) — `.sds-light-speed` — Streaks in with a skewed light-speed motion
- [Liquid Rise](https://sds-motion-forge.netlify.app/animations/liquid-rise/) — `.sds-liquid-rise` — Rises up with skew and blur in one fluid arc
- [Magnetic Drift](https://sds-motion-forge.netlify.app/animations/magnetic-drift/) — `.sds-magnetic-drift` — Circular XY drift like magnetic field pull
- [Morph Word](https://sds-motion-forge.netlify.app/animations/morph-word/) — `.sds-morph-word` — ScaleX + skewX + letter-spacing morphing loop
- [Neon Flare](https://sds-motion-forge.netlify.app/animations/neon-flare/) — `.sds-neon-flare` — Pulsing neon glow with colour shift
- [Neon Flicker In](https://sds-motion-forge.netlify.app/animations/neon-flicker-in/) — `.sds-neon-flicker-in` — Flickers on like a neon sign
- [Neon Pulse Text](https://sds-motion-forge.netlify.app/animations/neon-pulse-text/) — `.sds-neon-pulse-text` — Neon text glow that breathes on a loop
- [Oscillate](https://sds-motion-forge.netlify.app/animations/oscillate/) — `.sds-oscillate` — Sine-wave Y + rotate + scaleX oscillation
- [Pendulum](https://sds-motion-forge.netlify.app/animations/pendulum/) — `.sds-pendulum` — Swings like a pendulum (loop)
- [Perspective Swing](https://sds-motion-forge.netlify.app/animations/perspective-swing/) — `.sds-perspective-swing` — Swings in on the Y-axis with perspective
- [Phantom Blur](https://sds-motion-forge.netlify.app/animations/phantom-blur/) — `.sds-phantom-blur` — Crystallises from a bright radial blur
- [Pixel In](https://sds-motion-forge.netlify.app/animations/pixel-in/) — `.sds-pixel-in` — Resolves from a pixelated blur
- [Pop In](https://sds-motion-forge.netlify.app/animations/pop-in/) — `.sds-pop-in` — Pops in from zero with a spring
- [Prism Split](https://sds-motion-forge.netlify.app/animations/prism-split/) — `.sds-prism-split` — Chromatic aberration effect on loop
- [Refract](https://sds-motion-forge.netlify.app/animations/refract/) — `.sds-refract` — RGB glitch split, loops smoothly
- [Reveal Down Mask](https://sds-motion-forge.netlify.app/animations/reveal-down-mask/) — `.sds-reveal-down-mask` — Wipes down behind a mask
- [Reveal Up Mask](https://sds-motion-forge.netlify.app/animations/reveal-up-mask/) — `.sds-reveal-up-mask` — Wipes up behind a mask
- [Ripple Text](https://sds-motion-forge.netlify.app/animations/ripple-text/) — `.sds-ripple-text` — Letter-spacing + scale + blur ripple entrance
- [Roll In](https://sds-motion-forge.netlify.app/animations/roll-in/) — `.sds-roll-in` — Rolls in rotating from the left
- [Rubber Band](https://sds-motion-forge.netlify.app/animations/rubber-band/) — `.sds-rubber-band` — Stretches like a rubber band
- [Scramble Decode](https://sds-motion-forge.netlify.app/animations/scramble-decode/) — `.sds-scramble-decode` — Blurs and skews repeatedly like decoding
- [Shadow Lift](https://sds-motion-forge.netlify.app/animations/shadow-lift/) — `.sds-shadow-lift` — Lifts up casting a soft shadow
- [Shatter In](https://sds-motion-forge.netlify.app/animations/shatter-in/) — `.sds-shatter-in` — Explodes in from massive scale with blur
- [Shimmer Sweep](https://sds-motion-forge.netlify.app/animations/shimmer-sweep/) — `.sds-shimmer-sweep` — A light shimmer sweeps across (loop)
- [Signal Wave](https://sds-motion-forge.netlify.app/animations/signal-wave/) — `.sds-signal-wave` — Wider stagger wave, slower period
- [Skew Slide](https://sds-motion-forge.netlify.app/animations/skew-slide/) — `.sds-skew-slide` — Slides in with a skew shear
- [Slant Rise](https://sds-motion-forge.netlify.app/animations/slant-rise/) — `.sds-slant-rise` — Rises in on a slant
- [Slice Reveal](https://sds-motion-forge.netlify.app/animations/slice-reveal/) — `.sds-slice-reveal` — Wipes in from left via clip-path
- [Slide Blur Left](https://sds-motion-forge.netlify.app/animations/slide-blur-left/) — `.sds-slide-blur-left` — Slides from left through a blur
- [Slide Blur Right](https://sds-motion-forge.netlify.app/animations/slide-blur-right/) — `.sds-slide-blur-right` — Slides from right through a blur
- [Smoke Reveal](https://sds-motion-forge.netlify.app/animations/smoke-reveal/) — `.sds-smoke-reveal` — Resolves from a smoke-like blur field
- [Split Reveal](https://sds-motion-forge.netlify.app/animations/split-reveal/) — `.sds-split-reveal` — Polygon clip-path splits open from center
- [Spotlight](https://sds-motion-forge.netlify.app/animations/spotlight/) — `.sds-spotlight` — Brightens in under a spotlight
- [Squash Stretch](https://sds-motion-forge.netlify.app/animations/squash-stretch/) — `.sds-squash-stretch` — Squashes then stretches into place
- [Stagger Chars](https://sds-motion-forge.netlify.app/animations/stagger-chars/) — `.sds-stagger-chars` — Up to 12 children stagger in with skewY
- [Static Burst](https://sds-motion-forge.netlify.app/animations/static-burst/) — `.sds-static-burst` — Glitchy signal-noise corruption loop
- [Streak In](https://sds-motion-forge.netlify.app/animations/streak-in/) — `.sds-streak-in` — High-speed streak entrance from the left
- [Strike Through](https://sds-motion-forge.netlify.app/animations/strike-through/) — `.sds-strike-through` — Strike line draws across
- [Swing In](https://sds-motion-forge.netlify.app/animations/swing-in/) — `.sds-swing-in` — Swings in with a pendulum overshoot
- [Tada](https://sds-motion-forge.netlify.app/animations/tada/) — `.sds-tada` — Celebratory scale-and-rotate tada
- [Tracking Contract](https://sds-motion-forge.netlify.app/animations/tracking-contract/) — `.sds-tracking-contract` — Letters contract into place
- [Tracking Expand](https://sds-motion-forge.netlify.app/animations/tracking-expand/) — `.sds-tracking-expand` — Letters expand out into place
- [Typewriter Pro](https://sds-motion-forge.netlify.app/animations/typewriter-pro/) — `.sds-typewriter-pro` — Classic typewriter with blinking cursor
- [Typing Caret](https://sds-motion-forge.netlify.app/animations/typing-caret/) — `.sds-typing-caret` — Types out with a blinking caret
- [Underline Grow](https://sds-motion-forge.netlify.app/animations/underline-grow/) — `.sds-underline-grow` — Underline draws on from left
- [Unfurl](https://sds-motion-forge.netlify.app/animations/unfurl/) — `.sds-unfurl` — Clip-path inset + scaleX unfurls from the left
- [Vapor Rise](https://sds-motion-forge.netlify.app/animations/vapor-rise/) — `.sds-vapor-rise` — Rises and sharpens from a vapor blur
- [Velocity Blur](https://sds-motion-forge.netlify.app/animations/velocity-blur-text/) — `.sds-velocity-blur-text` — Streaks in from left with motion blur
- [Velvet Drop](https://sds-motion-forge.netlify.app/animations/velvet-drop/) — `.sds-velvet-drop` — Drops in with a soft blur and bounce
- [Vibrate](https://sds-motion-forge.netlify.app/animations/vibrate/) — `.sds-vibrate` — Rapid vibrate buzz (loop)
- [Wave Cascade](https://sds-motion-forge.netlify.app/animations/wave-cascade/) — `.sds-wave-cascade` — Disturbance propagates char-to-char (loop)
- [Weight Drop](https://sds-motion-forge.netlify.app/animations/weight-drop/) — `.sds-weight-drop` — Overshoot gravity with extreme easing
- [Wipe Left](https://sds-motion-forge.netlify.app/animations/wipe-left/) — `.sds-wipe-left` — Clip-wipes in to the left
- [Wipe Right](https://sds-motion-forge.netlify.app/animations/wipe-right/) — `.sds-wipe-right` — Clip-wipes in to the right
- [Wobble](https://sds-motion-forge.netlify.app/animations/wobble/) — `.sds-wobble` — Wobbles side to side on entry
- [Word Blur In](https://sds-motion-forge.netlify.app/animations/word-blur-in/) — `.sds-word-blur-in` — Blur resolves to sharp with scale focus
- [Zoom Out In](https://sds-motion-forge.netlify.app/animations/zoom-out-in/) — `.sds-zoom-out-in` — Settles from oversized with blur
- [Zoom Punch](https://sds-motion-forge.netlify.app/animations/zoom-punch/) — `.sds-zoom-punch` — Punches in from tiny to full with overshoot