"use client"; import { useEffect, useRef } from "react"; import { motion, useMotionValue, useTransform } from "framer-motion"; import { MoveHorizontal, Sparkle } from "lucide-react"; import { cn } from "@/lib/utils"; const seededRand = (i: number) => Math.abs(Math.sin(i * 127.1 + 311.7) * 43758.5453) % 1; interface Star { x: number; y: number; r: number; phase: number; twinkle: number; glint: boolean; } /** * A twinkling starfield rendered behind the revealed phrase. It fills the whole * stage but is visually clipped by the parent wipe, so the stars only appear in * the portion that has been revealed. */ function RevealStars({ count = 90 }: { count?: number }) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let raf = 0; let width = 0; let height = 0; let stars: Star[] = []; const n = Math.min(count, 300); stars = Array.from({ length: n }, (_, i) => ({ x: seededRand(i + 1), y: seededRand(i + 501), r: 0.4 + seededRand(i + 1001) * 1.4, phase: seededRand(i + 1501) * Math.PI * 2, twinkle: 0.6 + seededRand(i + 2001) * 2.2, glint: seededRand(i + 2501) > 0.86, })); function resize() { if (!canvas) return; const rect = canvas.getBoundingClientRect(); width = rect.width; height = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr); ctx?.setTransform(dpr, 0, 0, dpr, 0, 0); } let t = 0; function draw() { if (!ctx) return; t += 0.016; ctx.clearRect(0, 0, width, height); for (const s of stars) { const x = s.x * width; const y = s.y * height; const a = 0.22 + 0.78 * Math.abs(Math.sin(t * s.twinkle + s.phase)); ctx.globalAlpha = a; ctx.fillStyle = "#e9e6ff"; ctx.beginPath(); ctx.arc(x, y, s.r, 0, Math.PI * 2); ctx.fill(); if (s.glint) { ctx.globalAlpha = a * 0.65; ctx.strokeStyle = "#a99dff"; ctx.lineWidth = 0.6; const g = s.r * 3.6; ctx.beginPath(); ctx.moveTo(x - g, y); ctx.lineTo(x + g, y); ctx.moveTo(x, y - g); ctx.lineTo(x, y + g); ctx.stroke(); } } ctx.globalAlpha = 1; raf = requestAnimationFrame(draw); } resize(); draw(); const ro = new ResizeObserver(resize); ro.observe(canvas); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, [count]); return

Text Reveal Card