# Repetitive Typography — primitive for kinetic type (html)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

One title repeated in rows that slide and scale in until the whole screen is lined with the same words

- **Install:** `git clone https://github.com/codrops/RepetitiveTypography`
- **Registry:** codrops · **Framework:** html · **License:** MIT (per demo repo)
- **Docs and preview:** https://tympanus.net/Development/RepetitiveTypography/
- **Source:** https://github.com/codrops/RepetitiveTypography
- **Example:** https://skills.varg.ai/previews/lib-codrops-repetitive-typography.mp4?v=87958 (From the library’s repo (Codrops — Manoela Ilic))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Open with Codrops' Repetitive Typography (demo https://tympanus.net/Development/RepetitiveTypography/, article https://tympanus.net/codrops/?p=56972, code https://github.com/codrops/RepetitiveTypography, MIT): a single title grows, its letters split, copies fill the gaps and spread into rows that cover the whole frame, after which photos appear. The sequence is one GSAP timeline (introTimeline in src/js/index.js) that plays on load; create it paused and seek it from the frame (HyperFrames: window.__timelines; Remotion: tl.seek(frame / fps)), and drop the hover timelines. Replace "Summer 22" with my short title (one or two words work best), keep the high-contrast palette, and stop before the photo grid if I only need the type.

## Used in

- [Product launch film](https://skills.varg.ai/video/product-launch.md)
- [Feature announcement](https://skills.varg.ai/video/feature-announcement.md)
- [Ad variants for testing](https://skills.varg.ai/video/ad-variants.md)
- [Sale & offer promo](https://skills.varg.ai/video/offer-promo.md)
- [Faceless narrated video](https://skills.varg.ai/video/faceless-explainer.md)
- [Quiz, poll & would-you-rather](https://skills.varg.ai/video/quiz.md)
- [Meme format](https://skills.varg.ai/video/meme.md)
- [Changelog & release notes](https://skills.varg.ai/video/changelog.md)

## More kinetic type

- [Char Slam Explode](https://skills.varg.ai/component/hf.char-slam-explode.md) — `npx hyperframes add char-slam-explode`
- [Extended Keyframe](https://skills.varg.ai/component/hf.extended-keyframe.md) — `npx hyperframes add extended-keyframe`
- [Kinetic Center Build](https://skills.varg.ai/component/hf.kinetic-center-build.md) — `npx hyperframes add kinetic-center-build`
- [Kinetic Type](https://skills.varg.ai/component/hf.kinetic-type.md) — `npx hyperframes init my-video --example kinetic-type`
- [Kinetic Type Swap](https://skills.varg.ai/component/hf.kinetic-type-swap.md) — `npx hyperframes add kinetic-type-swap`
- [Shutter Slam](https://skills.varg.ai/component/hf.shutter-slam.md) — `npx hyperframes add shutter-slam`