Con gran ayuda de @pratik-wadekar, tengo la siguiente animación de texto de trabajo. Ahora mi problema es que cuando lo pruebo en diferentes tamaños de pantalla/móvil, la palabra animada plants se rompe en pedazos. Por ejemplo PLA y en la siguiente línea NTS. ¿Cómo puedo evitar esto? Así que siempre se mantiene como una palabra completa.

Primero traté de agregar \xC2\xA0 – non-breaking space or   antes y después de la palabra, pero esto no ayuda. La propiedad word-wrap de CSS permite que las palabras largas se puedan romper, pero desafortunadamente para el caso inverso para hacer que una palabra sea irrompible, no hay opción.

Parece que lo que necesito es la propiedad word-break: "keep-all CSS, pero cuando la aplico, todavía se rompe en pedazos en pantallas más pequeñas.

El códec

Y App.tsx :

 import React from "react"; import { styled } from "@mui/material/styles"; import { Typography } from "@mui/material"; const AnimatedTypography = styled(Typography)` & { position: relative; -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, 0.2)); font-size: 60px; } & span { color: #fbbf2c; font-family: "Alfa Slab One", sans-serif; position: relative; display: inline-block; text-transform: uppercase; animation: waviy 1s infinite; animation-delay: calc(0.1s * var(--i)); } @keyframes waviy { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-20px); } } `; interface Styles extends React.CSSProperties { "--i": number; } function App() { const string = "plants"; return ( <Typography variant={"h3"} fontWeight={"bold"}> All Your <AnimatedTypography> {string.split("").map((char, idx) => { const styles: Styles = { "--i": idx + 1 }; return ( <span key={`${char}-${idx}`} style={styles}> {char} </span> ); })} </AnimatedTypography> in One Place </Typography> ); } export default App;