tricklekit

Text animations that into any React UI.

Example — every component installs the same way

$npx shadcn add https://tricklekit.dev/r/typewriter.json

→ writes components/trickle/typewriter.tsx + merges globals.css

browse all 47 ↓

runtime
0 deps · pure CSS keyframes
bundle
<1kb median (gzip) · per component
react
18.3+ · next 15+ · tailwind v4
ssr
safe by construction · 42 of 47 zero-JS

Why

Pure CSS, zero runtime.

Every keyframe runs natively in the browser. No motion library, no animation engine, no extra bundle weight. 42 of 47 components are pure server components — they ship zero client JS.

How

SSR-safe by construction.

The server renders the final HTML with animation classes applied. The browser starts the animation immediately on first paint — no flash, no hydration mismatch, no JS required.

Distribution

You own the source.

Shadcn-style. Run one CLI command and the component file lives in your repo. No version lock-in, no upgrade churn, customize freely.

Catalog47 components · 7 groups

Reveal7
01

TextReveal

gzip:<1kbclient:nosince:v0.1

Fade-up, blur, slide, or scale reveal — per char, per word, or as a single block.

02

Typewriter

gzip:<1.5kbclient:yessince:v0.1

Character-by-character typing with caret. Multi-string cycling.

03

WordCascade

gzip:<1kbclient:nosince:v0.1

Words slide in from below, staggered. Reads like a careful sentence.

04

CharStagger

gzip:<1kbclient:nosince:v0.1

Per-char fade or slide reveal with tighter rhythm.

05

DecryptScramble

gzip:<1.5kbclient:yessince:v0.1

Random characters scramble into the target text. Configurable charset.

06

TypoCorrect

gzip:<1.5kbclient:yessince:v0.1

Letters fly in misspelled, then correct themselves character-by-character.

07

InkBleed

gzip:<1kbclient:nosince:v0.1

Reveals via clip-path circle from origin + blur unmask.

Emphasis5
08

HighlighterSweep

gzip:<1kbclient:nosince:v0.1

Sequential word highlight reveal driven by a CSS background-size keyframe.

09

UnderlineDraw

gzip:<1kbclient:nosince:v0.1

Underline draws left-to-right under the text. Configurable thickness + color.

10

Spotlight

gzip:<1kbclient:nosince:v0.1

Bright spot moves across text via radial-gradient bg-clip-text.

11

Stamp

gzip:<1kbclient:nosince:v0.1

Drops huge from above with motion blur, slams flat with hard impact, recoils, then settles.

12

ConfettiText

gzip:<1kbclient:nosince:v0.1

One-shot burst of small colored squares from each character on mount.

Color6
13

AuroraText

gzip:<1kbclient:nosince:v0.1

Animated multi-stop aurora gradient — green/sky/violet/amber.

14

ShinyShimmer

gzip:<1kbclient:nosince:v0.1

Light glare panning across text. Always-on or hover-only.

15

GradientShift

gzip:<1kbclient:nosince:v0.1

Animated gradient bg-clip-text via @property — angle rotates smoothly.

16

RainbowRoll

gzip:<1kbclient:nosince:v0.1

Hue rotates through the spectrum, staggered per character.

17

NeonFlicker

gzip:<1kbclient:nosince:v0.1

Cold-start sputter — sign tries to ignite, sputters out, sputters back, then settles to a steady hum with rare flickers.

18

Plasma

gzip:<1kbclient:nosince:v0.1

Flowing colored plasma blobs inside text via bg-clip + multi radial-gradient.

Motion11
19

Bounce

gzip:<1kbclient:nosince:v0.1

Each letter drops in then bounces in place 2-3 times like a ball settling.

20

Float

gzip:<1kbclient:nosince:v0.1

Letters bob gently up and down with phase-offset stagger.

21

Magnetize

gzip:<1kbclient:nosince:v0.1

Letters scattered, then snap into place with a slight overshoot.

22

ScaleSlam

gzip:<1kbclient:nosince:v0.1

Letters slam in from huge to normal with a slight bounce.

23

SpinIn

gzip:<1kbclient:nosince:v0.1

Each letter spins in two full turns on the z-axis, scaling up from zero.

24

Wave

gzip:<1kbclient:nosince:v0.1

Letters undulate vertically in a sine-wave pattern. Pure CSS infinite loop.

25

Stretch

gzip:<1kbclient:nosince:v0.1

Letters stretch wide-and-short, then settle to natural size.

26

Compress

gzip:<1kbclient:nosince:v0.1

Each letter drops in tall, gets slammed flat by a hydraulic press, then springs back to natural size.

27

Wobble3D

gzip:<1kbclient:nosince:v0.1

Letters rotate around the Y-axis. Pure CSS perspective + rotateY.

28

Flutter

gzip:<1kbclient:nosince:v0.1

Subtle random tremor per character, infinite loop. Like nervous text.

29

PulseText

gzip:<1kbclient:nosince:v0.1

Text breathes with a soft scale pulse while two ring waves radiate outward like a sonar ping.

Glitch4
30

GlitchSplit

gzip:<1kbclient:nosince:v0.1

Horizontal slices of the text shift sideways in brief stutter bursts. Broken-signal feel.

31

Shatter

gzip:<1kbclient:nosince:v0.1

Each letter assembles from four triangular shards converging from random offsets.

32

Tear

gzip:<1kbclient:nosince:v0.1

Text rips into top and bottom halves with jagged edges, then heals back together.

33

MorphSwap

gzip:<1.5kbclient:yessince:v0.1

Cycles through words with letter-staggered morph between each.

Texture6
34

Grain

gzip:<1kbclient:nosince:v0.1

Text dissolves into a fine dot pattern, then dots merge until the letters resolve solid.

35

Pixelate

gzip:<1kbclient:nosince:v0.1

Each letter resolves through a chunky pixel grid that snaps in 6 discrete steps. True 8-bit feel.

36

Scanline

gzip:<1kbclient:nosince:v0.1

CRT-style horizontal scanlines passing over text. Constant grain overlay.

37

Halftone

gzip:<1kbclient:nosince:v0.1

Halftone dots pulse with increasing amplitude (like a heartbeat building) before merging into solid text.

38

Wireframe

gzip:<1kbclient:nosince:v0.1

Each letter drops in as a thick outline that scans across, refines to a thin line, then fills.

39

Mosaic

gzip:<1kbclient:nosince:v0.1

Text starts as visible mosaic tiles, then dissolves into clarity as the tiles grow and merge.

Sequence8
40

WordRotate

gzip:<1.5kbclient:yessince:v0.1

Vertical wheel cycling through a list of words. Crossfade with subtle slide.

41

CarouselFlip

gzip:<1kbclient:nosince:v0.1

Letters live around an invisible 3D ring that spins three full revolutions like a globe, then unwrap and snap into the spelled word.

42

Echo

gzip:<1kbclient:nosince:v0.1

Five staggered ghost copies pulse outward from the word, fading and blurring as they go.

43

Phase

gzip:<1kbclient:nosince:v0.1

Text phases out and back — fades, blurs, and slips sideways like passing through a barrier.

44

Shutter

gzip:<1kbclient:nosince:v0.1

Vertical-bar mask reveal — like venetian blinds opening.

45

MarqueeRibbon

gzip:<1kbclient:nosince:v0.1

Horizontally scrolling ribbon with edge-fade gradient masks.

46

StaticText

gzip:<1kbclient:nosince:v0.1

TV-style static noise overlays text, then fades to clear. Atomic texture reveal.

47

Reflect

gzip:<1kbclient:nosince:v0.1

Mirror reflection beneath text with linear-gradient mask fade.