[V0_FILE]jpeg:file="public/images/starry-night.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/van-gogh-noite-estrelada-d.jpg-DXxtHmWzbUjEIdMbQvOhVKBuliziow.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/star-field.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" interface Star { id: number x: number y: number size: number opacity: number twinkleSpeed: number } export function StarField() { const [stars, setStars] = useState([]) useEffect(() => { const generateStars = () => { const newStars: Star[] = [] for (let i = 0; i < 50; i++) { newStars.push({ id: i, x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 3 + 1, opacity: Math.random() * 0.8 + 0.2, twinkleSpeed: Math.random() * 3 + 2, }) } setStars(newStars) } generateStars() }, []) return (

{stars.map((star) => (

⭐

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, fontFamily: { parisienne: ["Brush Script MT", "Lucida Handwriting", "Apple Chancery", "cursive"], "dm-serif": ["Georgia", "Times New Roman", "serif"], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/starry-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function StarryBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Configurar canvas const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Estrelas const stars: Array<{ x: number y: number size: number opacity: number twinkleSpeed: number phase: number }> = [] // Criar estrelas for (let i = 0; i < 150; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.8 + 0.2, twinkleSpeed: Math.random() * 0.02 + 0.01, phase: Math.random() * Math.PI * 2, }) } // Animação let animationId: number const animate = () => { // Gradiente de fundo inspirado em Van Gogh const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height) gradient.addColorStop(0, "#0a1a3a") gradient.addColorStop(0.3, "#1e3a8a") gradient.addColorStop(0.7, "#1e40af") gradient.addColorStop(1, "#1e3a8a") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Desenhar estrelas com efeito de piscar stars.forEach((star) => { star.phase += star.twinkleSpeed const twinkle = Math.sin(star.phase) * 0.3 + 0.7 ctx.save() ctx.globalAlpha = star.opacity * twinkle ctx.fillStyle = "#ffd700" ctx.shadowBlur = star.size * 3 ctx.shadowColor = "#ffd700" ctx.beginPath() ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2) ctx.fill() ctx.restore() // Movimento sutil das estrelas star.x += Math.sin(star.phase * 0.1) * 0.1 star.y += Math.cos(star.phase * 0.1) * 0.05 // Reposicionar se sair da tela if (star.x < 0) star.x = canvas.width if (star.x > canvas.width) star.x = 0 if (star.y < 0) star.y = canvas.height if (star.y > canvas.height) star.y = 0 }) animationId = requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) cancelAnimationFrame(animationId) } }, []) return (

Para Marisa

Estrelas Interativas

{selectedStar.memory}

Mensagem Estelar