[V0_FILE]typescriptreact:file="valentine-card.tsx" isMerged="true" import { Heart } from "lucide-react" export default function ValentineCard() { return (

Happy

Valentine's Day

You're the CSS to my HTML

) } [V0_FILE]typescriptreact:file="page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Hearts } from "./hearts" import { Clouds } from "./clouds" import { Button } from "@/components/ui/button" import { Sparkles } from "./sparkles" export default function ValentinePage() { const [noCount, setNoCount] = useState(0) const [yesPressed, setYesPressed] = useState(false) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) // Expanded phrases for more variety const phrases = [ "¿Estás seguro?", "¿De verdad?", "¿En serio?", "¡Piénsalo otra vez!", "¿Última oportunidad?", "¿No te arrepentirás?", "¡Mejor el otro botón!", "¡No me hagas esto!", "¡Mira el botón verde!", "¡Dame una oportunidad!", ] const handleMouseMove = (e: React.MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } const getNoButtonPosition = () => { const phi = noCount * 0.5 const radius = Math.min(100 + noCount * 10, 200) const x = radius * Math.cos(phi) + Math.sin(mousePosition.x * 0.1) * 20 const y = radius * Math.sin(phi) + Math.cos(mousePosition.y * 0.1) * 20 return { x, y } } return (

{yesPressed && } ¿Quieres ser mi San Valentín? Two cute turtles holding a heart

{yesPressed && (

¡Yay! ¡Gracias por decir que sí! ❤️

Eres lo mejor que me ha pasado 💖

)}

) } [V0_FILE]typescriptreact:file="sparkles.tsx" isMerged="true" import { motion } from "framer-motion" import { useEffect, useState } from "react" export function Sparkles() { const [sparkles, setSparkles] = useState>([]) useEffect(() => { const interval = setInterval(() => { setSparkles((current) => { const newSparkle = { id: Date.now(), x: Math.random() * 100, y: Math.random() * 100, } return [...current, newSparkle].slice(-20) // Keep last 20 sparkles }) }, 300) return () => clearInterval(interval) }, []) return (

{sparkles.map((sparkle) => ( ))}

) } [V0_FILE]typescriptreact:file="clouds.tsx" isMerged="true" export function Clouds() { return (

{/* Top clouds */}

{Array.from({ length: 8 }, (_, i) => (

))}

{/* Bottom clouds */}

{Array.from({ length: 8 }, (_, i) => (

))}

) } [V0_FILE]css:file="globals.css" isMerged="true" @keyframes float { from { transform: translateX(0) translateY(0); } to { transform: translateX(20px) translateY(-10px); } } .text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .text-shadow-lg { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), 4px 4px 8px rgba(0, 0, 0, 0.1); } @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(180deg); } } [V0_FILE]typescriptreact:file="hearts.tsx" isEdit="true" isQuickEdit="true" import { motion } from "framer-motion" const HeartSVG = ({ color = "#ff4b4b" }) => ( ) export function Hearts() { // Create more hearts with varied sizes, delays, and colors const hearts = Array.from({ length: 15 }, (_, i) => ({ id: i, x: Math.random() * 100, delay: Math.random() * 10, duration: 10 + Math.random() * 10, scale: 0.3 + Math.random() * 0.7, opacity: 0.6 + Math.random() * 0.4, color: `hsl(${Math.random() * 40 + 340}, 100%, ${50 + Math.random() * 20}%)`, // Shades of red and pink })) return (

{hearts.map((heart) => ( ))}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This