rofl code

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;