import React, { useState, useEffect } from 'react'; // --- Компонент кнопки входа --- const LoginScreen = ({ onLogin }) => { return (
{/* Заголовок */}
Welcome
{/* Фиолетовая кнопка */}
Enter
Click to open your heart
); }; // --- Компонент Сердца из текста --- const HeartScreen = () => { const [particles, setParticles] = useState([]); useEffect(() => { // Генерируем точки внутри сердца const points = []; const scale = 14; const offsetX = window.innerWidth / 2; const offsetY = window.innerHeight / 2 + 20; // Чуть ниже центра // Уравнение сердца: (x^2 + y^2 - 1)^3 - x^2 * y^3 <= 0 let attempts = 0; while (points.length < 600 && attempts < 20000) { attempts++; const x = (Math.random() - 0.5) * 4; const y = (Math.random() - 0.5) * 4; const eq = Math.pow(x * x + y * y - 1, 3) - x * x * Math.pow(y, 3); if (eq <= 0) { points.push({ id: points.length, x: offsetX + x * scale, y: offsetY - y * scale, // Инвертируем Y // Случайная задержка появления для эффекта "наполнения" delay: Math.random() * 2500, size: Math.random() * 8 + 10, // Размер шрифта // Красивые красные оттенки color: `rgb(255, ${Math.floor(Math.random() * 50)}, ${Math.floor(Math.random() * 50)})` }); } } // Сортируем по задержке, чтобы появлялись слоями points.sort((a, b) => a.delay - b.delay); setParticles(points); }, []); return (
{/* Контейнер для букв */}
{particles.map((p) => (
i love you
))}
{/* Текст поверх сердца */}
Love you.
{/* Встроенные CSS-анимации */}
); }; // --- Главный компонент --- export default function App() { const [stage, setStage] = useState('login'); return (
{stage === 'login' ? (
setStage('heart')} /> ) : (
)}
); }