# Generator Text Effect Playground

A marketing team types its own hero line into the typewriter, tries the rotating and prompt variants at a faster speed, and pastes the exported component with its install command.

- id: `generator-text-effect-playground`
- Page: https://agentic-ui-kit.com/components/generator-text-effect-playground
- Live preview: https://agentic-ui-kit.com/live/component/generator-text-effect-playground

## Install

```bash
agentic-ui add generator-text-effect-playground
npx shadcn@4.17.0 add @agentic-ui/generator-text-effect-playground
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typewriter-preview, text-scramble-preview, word-rotate-preview, split-reveal-preview, text-annotate-preview, gradient-text-preview, scroll-fill-preview, custom-copy-input, speed-and-stagger-token-timing, trigger-selection, theme-token-colours, personality-and-profile-preview, reduced-motion-preview, live-preview, presets, versioned-url-state, tsx-component-export, registry-install-command, timing-css-variables-export, tailwind-class-export, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** A marketing team types its own hero line into the typewriter, tries the rotating and prompt variants at a faster speed, and pastes the exported component with its install command., A designer compares the split reveal under the stripe and enterprise personalities before choosing one for a product page, then copies the timing variables to fade in the subtitle after the heading., A product team checks that a highlighted claim still reads correctly with reduced motion before shipping the annotate export.
- **Avoid when:** Body copy, forms, tables or error messages; text effects belong to headings, claims and hero lines., Live values that must be announced to assistive technology; use a live region or the number pieces instead., Projects that need custom glyph sets or per-character timing curves beyond the pieces' props; edit the exported component instead.
- **Preserve when adapting:** controls-preview-code-layout, shared-usage-for-preview-and-export, token-colours, reduced-motion-fallbacks
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/motion, @agentic-ui/motion-typewriter, @agentic-ui/motion-text-scramble, @agentic-ui/motion-word-rotate, @agentic-ui/motion-text-reveal-split, @agentic-ui/motion-text-annotate, @agentic-ui/fx-gradient-text, @agentic-ui/motion-scroll-text-fill, @agentic-ui/tokens, react
- **Motion:** profile expressive, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** fx-gradient-text, lib-generator-foundation, lib-motion, motion-scroll-text-fill, motion-text-annotate, motion-text-reveal-split, motion-text-scramble, motion-typewriter, motion-word-rotate