'use client'; import React, { useRef, useEffect, useCallback } from 'react'; export default function PhoneWidget() { const stageRef = useRef(null); const onMove = useCallback((e: MouseEvent) => { const el = stageRef.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; el.style.setProperty('--rx', `${(-py * 8).toFixed(2)}deg`); el.style.setProperty('--ry', `${(px * 10).toFixed(2)}deg`); el.style.setProperty('--tx', `${(px * 18).toFixed(1)}px`); el.style.setProperty('--ty', `${(py * 18).toFixed(1)}px`); }, []); const onLeave = useCallback(() => { const el = stageRef.current; if (!el) return; el.style.setProperty('--rx', '0deg'); el.style.setProperty('--ry', '0deg'); el.style.setProperty('--tx', '0px'); el.style.setProperty('--ty', '0px'); }, []); useEffect(() => { const el = stageRef.current; if (!el) return; el.addEventListener('mousemove', onMove); el.addEventListener('mouseleave', onLeave); return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); }; }, [onMove, onLeave]); return ( <>

{/* Glow ring */}

{/* Phone shell */}

{/* Shimmer sweep */}

{/* Dynamic island */}

{/* Header */}

Good Morning

Loyaly ✦

{/* LYT balance card */}

Total LYT

284

≈ ₹284 redeemable

{/* Activity feed */}

{[ { label: 'Daily Login', pts: '+50', color: '#4ade80' }, { label: 'Walking 5k Steps', pts: '+80', color: '#4ade80' }, { label: 'Spin Wheel', pts: '-50', color: '#f87171' }, ].map((item, i) => (

{item.label} {item.pts}

))}

{/* Nav dots */}

{[1, 0, 0, 0].map((a, i) => (

))}

{/* Floating chip — top left */}

↑

+120 LYT

just now

{/* Floating chip — bottom right */}

Redeemable

₹284.00

); }