import React, { useState, useEffect } from 'react'; const App = () => { const [wave, setWave] = useState(0); // Эффект для изменения волнообразной анимации useEffect(() => { const interval = setInterval(() => { setWave((prevWave) => prevWave + 1); }, 100); // Интервал в 100 мс для более плавной анимации return () => clearInterval(interval); }, []); return ( <div style={styles.container}> <h1 style={styles.wavyText}> {['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd'].map((char, index) => ( <span key={index} style={{ display: 'inline-block', transform: `translateY(${Math.sin((index + wave) * 0.3) * 15}px)`, transition: 'transform 0.2s ease-in-out' }} > {char} </span> ))} </h1> </div> ); }; // Стили в виде JavaScript объектов const styles = { container: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundColor: '#f0f0f0' }, wavyText: { fontSize: '3rem', color: '#333', fontFamily: 'Arial, sans-serif' } }; export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter