tricklekit

Text animations that
into any React UI.

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

Example — every component installs the same way · browse all 47 ↓

$npx shadcn add https://tricklekit.dev/r/typewriter.json
→ writes components/trickle/typewriter.tsx + merges globals.css

47

Components

42

Pure server (zero JS)

<1kb

Median gzip / component

0

Animation deps

Catalog47 components

01

HighlighterSweep

gzip:<1kbclient:nosince:v0.1

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

02

TypoCorrect

gzip:<1.5kbclient:yessince:v0.1

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

03

TextReveal

gzip:<1kbclient:nosince:v0.1

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

04

Typewriter

gzip:<1.5kbclient:yessince:v0.1

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

05

WordCascade

gzip:<1kbclient:nosince:v0.1

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

06

CharStagger

gzip:<1kbclient:nosince:v0.1

Per-char fade or slide reveal with tighter rhythm.

07

GradientShift

gzip:<1kbclient:nosince:v0.1

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

08

ShinyShimmer

gzip:<1kbclient:nosince:v0.1

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

09

WordRotate

gzip:<1.5kbclient:yessince:v0.1

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

10

AuroraText

gzip:<1kbclient:nosince:v0.1

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

11

UnderlineDraw

gzip:<1kbclient:nosince:v0.1

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

12

DecryptScramble

gzip:<1.5kbclient:yessince:v0.1

Random characters scramble into the target text. Configurable charset.

13

InkBleed

gzip:<1kbclient:nosince:v0.1

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

14

Shatter

gzip:<1kbclient:nosince:v0.1

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

15

Echo

gzip:<1kbclient:nosince:v0.1

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

16

ConfettiText

gzip:<1kbclient:nosince:v0.1

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

17

MorphSwap

gzip:<1.5kbclient:yessince:v0.1

Cycles through words with letter-staggered morph between each.

18

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.

19

GlitchSplit

gzip:<1kbclient:nosince:v0.1

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

20

ScaleSlam

gzip:<1kbclient:nosince:v0.1

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

21

Stamp

gzip:<1kbclient:nosince:v0.1

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

22

MarqueeRibbon

gzip:<1kbclient:nosince:v0.1

Horizontally scrolling ribbon with edge-fade gradient masks.

23

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

Wobble3D

gzip:<1kbclient:nosince:v0.1

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

27

Spotlight

gzip:<1kbclient:nosince:v0.1

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

28

Magnetize

gzip:<1kbclient:nosince:v0.1

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

29

Float

gzip:<1kbclient:nosince:v0.1

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

30

PulseText

gzip:<1kbclient:nosince:v0.1

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

31

RainbowRoll

gzip:<1kbclient:nosince:v0.1

Hue rotates through the spectrum, staggered per character.

34

Flutter

gzip:<1kbclient:nosince:v0.1

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

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

Grain

gzip:<1kbclient:nosince:v0.1

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

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

Halftone

gzip:<1kbclient:nosince:v0.1

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

40

Bounce

gzip:<1kbclient:nosince:v0.1

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

41

SpinIn

gzip:<1kbclient:nosince:v0.1

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

42

Shutter

gzip:<1kbclient:nosince:v0.1

Vertical-bar mask reveal — like venetian blinds opening.

43

Plasma

gzip:<1kbclient:nosince:v0.1

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

44

Compress

gzip:<1kbclient:nosince:v0.1

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

45

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.

46

StaticText

gzip:<1kbclient:nosince:v0.1

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

47

Tear

gzip:<1kbclient:nosince:v0.1

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

48

Reflect

gzip:<1kbclient:nosince:v0.1

Mirror reflection beneath text with linear-gradient mask fade.

49

Phase

gzip:<1kbclient:nosince:v0.1

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

50

Mosaic

gzip:<1kbclient:nosince:v0.1

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

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.