"use client"; // Adapted from 21st.dev/@kedhareswer/components/lanyard-badge (MIT) import { type CSSProperties, type ReactNode, useEffect, useRef, useState, } from "react"; type Particle = { x: number; y: number; px: number; py: number; w: number }; type Constraint = [number, number, number]; type StrapTheme = { color: string; ink: string; text: string; label: string; plain?: boolean; }; export interface LanyardBadgeProps { front?: ReactNode; back?: ReactNode; title?: string; subtitle?: string; name?: string; role?: string; strapText?: string; strapLabel?: string; strapColor?: string; /** Ink on the woven strap; falls back to `inkColor`. */ strapInkColor?: string; inkColor?: string; cardColor?: string; flipButton?: boolean; cardWidth?: number; height?: CSSProperties["height"]; className?: string; } const PERSIAN_FONT = "var(--font-estedad), Tahoma, Arial, sans-serif"; function canvasFontFamily() { if (typeof document === "undefined") return "Tahoma, Arial, sans-serif"; const fromVar = getComputedStyle(document.documentElement) .getPropertyValue("--font-estedad") .trim(); return fromVar ? `${fromVar}, Tahoma, Arial, sans-serif` : "Tahoma, Arial, sans-serif"; } function integrate( particles: Particle[], dt: number, gravity: number, damping: number, ) { for (const p of particles) { if (!p.w) continue; const vx = (p.x - p.px) * damping; const vy = (p.y - p.py) * damping; p.px = p.x; p.py = p.y; p.x += vx; p.y += vy + gravity * dt * dt; } } function solveConstraints( particles: Particle[], constraints: Constraint[], iterations: number, ) { for (let i = 0; i < iterations; i++) { for (const [ai, bi, rest] of constraints) { const a = particles[ai]; const b = particles[bi]; const sum = a.w + b.w; if (!sum) continue; const dx = b.x - a.x; const dy = b.y - a.y; const dist = Math.hypot(dx, dy) || 1e-6; const corr = (dist - rest) / (dist * sum); a.x += dx * corr * a.w; a.y += dy * corr * a.w; b.x -= dx * corr * b.w; b.y -= dy * corr * b.w; } } } function springAngle( state: { a: number; v: number }, target: number, dt: number, torque: number, ) { state.v += (-(state.a - target) * 18 - state.v * 3.2 + torque) * dt; state.a += state.v * dt; } function angleBetween(a: Particle, b: Particle) { return Math.atan2(b.x - a.x, b.y - a.y); } function drawSeal( ctx: CanvasRenderingContext2D, x: number, y: number, r: number, ) { ctx.save(); ctx.translate(x, y); ctx.lineWidth = Math.max(0.8, r * 0.018); for (const scale of [1, 0.9, 0.62, 0.26]) { ctx.beginPath(); ctx.arc(0, 0, r * scale, 0, Math.PI * 2); ctx.stroke(); } for (let i = 0; i < 16; i++) { ctx.save(); ctx.rotate((i / 16) * Math.PI * 2); ctx.beginPath(); ctx.ellipse(0, -r * 0.76, r * 0.07, r * 0.13, 0, 0, Math.PI * 2); ctx.stroke(); ctx.rotate(Math.PI / 16); ctx.beginPath(); ctx.arc(0, -r * 0.95, r * 0.018, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } for (let i = 0; i < 8; i++) { ctx.save(); ctx.rotate((i / 8) * Math.PI * 2); ctx.beginPath(); ctx.moveTo(0, -r * 0.26); ctx.bezierCurveTo(r * 0.12, -r * 0.4, r * 0.1, -r * 0.52, 0, -r * 0.6); ctx.bezierCurveTo(-r * 0.1, -r * 0.52, -r * 0.12, -r * 0.4, 0, -r * 0.26); ctx.stroke(); ctx.restore(); } ctx.beginPath(); ctx.arc(0, 0, r * 0.07, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } function buildStrapTexture( length: number, width: number, dpr: number, theme: StrapTheme, ) { const canvas = document.createElement("canvas"); canvas.width = Math.max(1, Math.round(width * dpr)); canvas.height = Math.max(1, Math.round(length * dpr)); const ctx = canvas.getContext("2d"); if (!ctx) return canvas; ctx.setTransform(0, dpr, -dpr, 0, canvas.width, 0); ctx.fillStyle = theme.color; ctx.fillRect(0, 0, length, width); ctx.strokeStyle = ctx.fillStyle = theme.ink; if (!theme.plain) { ctx.save(); ctx.beginPath(); ctx.rect(0, 0, length, width); ctx.clip(); ctx.textBaseline = "middle"; const family = canvasFontFamily(); const script = `700 ${Math.round(width * 0.42)}px ${family}`; const display = `800 ${Math.round(width * 0.34)}px ${family}`; ctx.font = script; const textW = ctx.measureText(theme.text).width; ctx.font = display; const labelW = ctx.measureText(theme.label).width; const gap = width * 0.6; let x = width * 0.4; let flip = 1; while (x < length) { ctx.globalAlpha = 0.55; drawSeal(ctx, x + width * 1.3, width * (0.5 + flip * 0.28), width * 1.35); x += width * 2.8; ctx.globalAlpha = 0.95; ctx.font = script; ctx.fillText(theme.text, x, width * 0.52); x += textW + gap; if (theme.label) { ctx.font = display; ctx.fillText(`- ${theme.label} -`, x, width * 0.53); x += labelW + ctx.measureText("- -").width + gap; } flip = -flip; } ctx.restore(); } ctx.globalAlpha = 0.35; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 1.5); ctx.lineTo(length, 1.5); ctx.moveTo(0, width - 1.5); ctx.lineTo(length, width - 1.5); ctx.stroke(); return canvas; } function useReducedMotion() { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = (e: MediaQueryListEvent) => setReduced(e.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } function SealMark({ className = "", style, }: { className?: string; style?: CSSProperties; }) { const angles = Array.from({ length: 16 }, (_, i) => i * 22.5); return ( ); } function ArrowMark({ className = "", style, }: { className?: string; style?: CSSProperties; }) { return ( ); } export function LanyardBadge({ front, back, title = "طرحَک", subtitle = "کامپوننت‌های متحرک ری‌اکت", name = "طرحَک", role = "ری‌اکت · موشن · تیلویند", strapText = "طرحَک", strapLabel = "TARHAK", strapColor = "#7a5c3e", strapInkColor, inkColor = "#1f1406", cardColor = "#b8860b", flipButton = true, cardWidth = 240, height = "100svh", className = "", }: LanyardBadgeProps) { const strapInk = strapInkColor ?? "#f5e6b8"; // Deep jewelry gold — amber/bronze, not pale yellow. const cardGold = "linear-gradient(155deg, #daa520 0%, #c99410 26%, #b8860b 52%, #9a7209 76%, #7a5a08 100%)"; const rootRef = useRef(null); const canvasRef = useRef(null); const badgeRef = useRef(null); const cardRef = useRef(null); const reducedMotion = useReducedMotion(); const flipRef = useRef(() => {}); const [flipped, setFlipped] = useState(false); const [width, setWidth] = useState(cardWidth); const flippedRef = useRef(flipped); flippedRef.current = flipped; useEffect(() => { const root = rootRef.current; if (!root) return; const update = () => { const vw = window.innerWidth; const cw = root.clientWidth || vw; // Mobile: larger badge so it reads closer in the preview. const mobileCap = vw < 480 ? 252 : vw < 768 ? 256 : cardWidth; const next = Math.min( cardWidth, mobileCap, Math.max(196, Math.round(cw * (vw < 768 ? 0.72 : 0.48))), ); setWidth((prev) => (prev === next ? prev : next)); }; update(); const ro = new ResizeObserver(update); ro.observe(root); window.addEventListener("resize", update); return () => { ro.disconnect(); window.removeEventListener("resize", update); }; }, [cardWidth]); const cardH = Math.round(width * 1.5); const ringR = Math.max(7, Math.round(width * 0.036)); const clipH = Math.round(width * 0.1); const strapThemeRef = useRef({ strapText, strapLabel, strapColor, inkColor: strapInk, }); strapThemeRef.current = { strapText, strapLabel, strapColor, inkColor: strapInk, }; const strapKey = [strapText, strapLabel, strapColor, strapInk].join("|"); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; const badge = badgeRef.current; const card = cardRef.current; const ctx = canvas?.getContext("2d"); if (!root || !canvas || !badge || !card || !ctx) return; const strapW = Math.max(14, Math.round(width * 0.1)); const loopH = strapW * 2.2; const cardHang = ringR * 2 + clipH + cardH * 0.55; const segments = 14; let particles: Particle[] = []; let constraints: Constraint[] = []; let leftIds: number[] = []; let rightIds: number[] = []; let loopIds: number[] = []; let join = 0; let clip = 0; let tip = 0; let rest = 1; let dpr = 1; let viewW = 1; let viewH = 1; let strapTex: HTMLCanvasElement | null = null; let loopTex: HTMLCanvasElement | null = null; const spin = { a: 0, v: 0 }; let targetSpin = flippedRef.current ? Math.PI : 0; spin.a = targetSpin; const add = (x: number, y: number, w: number) => { particles.push({ x, y, px: x, py: y, w }); return particles.length - 1; }; const chain = (a: number, b: number, count: number, stretch: number) => { const pa = particles[a]; const pb = particles[b]; const seg = (Math.hypot(pb.x - pa.x, pb.y - pa.y) * stretch) / count; const ids = [a]; for (let i = 1; i < count; i++) { ids.push( add( pa.x + ((pb.x - pa.x) * i) / count, pa.y + ((pb.y - pa.y) * i) / count, 1, ), ); } ids.push(b); for (let i = 0; i < count; i++) constraints.push([ids[i], ids[i + 1], seg]); return { ids, rest: seg }; }; const layout = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); viewW = Math.max(1, root.clientWidth); viewH = Math.max(1, root.clientHeight); canvas.width = Math.round(viewW * dpr); canvas.height = Math.round(viewH * dpr); particles = []; constraints = []; const mid = viewW / 2; const narrow = viewW < 480; const spread = Math.min(viewW * (narrow ? 0.2 : 0.16), width * (narrow ? 0.62 : 0.55)); const top = -strapW * 2; const hangY = Math.max( viewH * (narrow ? 0.1 : 0.14), Math.min( viewH * (narrow ? 0.36 : 0.42), viewH - (loopH + ringR * 2 + clipH + cardH) - (narrow ? 12 : 28), ), ); const leftAnchor = add(mid - spread, top, 0); join = add(mid, hangY, 1.4); const left = chain(leftAnchor, join, segments, 1.03); const rightAnchor = add(mid + spread, top, 0); const right = chain(rightAnchor, join, segments, 1.03); clip = add(mid, hangY + loopH, 0.8); const loop = chain(join, clip, 3, 1); tip = add(mid, hangY + loopH + cardHang, 0.25); constraints.push([clip, tip, cardHang]); leftIds = left.ids; rightIds = right.ids; loopIds = loop.ids; rest = left.rest; const theme = strapThemeRef.current; const base = { color: theme.strapColor, ink: theme.inkColor, text: theme.strapText, label: theme.strapLabel, }; strapTex = buildStrapTexture(rest * segments + 4, strapW, dpr, base); loopTex = buildStrapTexture(loopH + 4, strapW * 0.8, dpr, { ...base, plain: true, }); if (reducedMotion) { for (let i = 0; i < 900; i++) { integrate(particles, DT, GRAVITY, 0.98); solveConstraints(particles, constraints, ITER); } } else { particles[tip].x += width * 0.55; particles[tip].px = particles[tip].x - 2; spin.v = 5; } }; const DT = 1 / 120; const GRAVITY = 2400; const ITER = 18; const drawRibbon = ( ids: number[], tex: HTMLCanvasElement, step: number, shade: number, ) => { const tw = tex.width; for (let i = 0; i < ids.length - 1; i++) { const a = particles[ids[i]]; const b = particles[ids[i + 1]]; const dx = (b.x - a.x) * dpr; const dy = (b.y - a.y) * dpr; const len = Math.hypot(dx, dy) || 1e-6; const ux = dx / len; const uy = dy / len; const px = uy; const py = -ux; const along = i * step * dpr; const seg = step * dpr; const stretch = len / seg; ctx.setTransform( px, py, ux * stretch, uy * stretch, a.x * dpr - (px * tw) / 2 - ux * stretch * along, a.y * dpr - (py * tw) / 2 - uy * stretch * along, ); const slice = Math.min(seg + 1.5, tex.height - along); if (slice > 0) ctx.drawImage(tex, 0, along, tw, slice, 0, along, tw, slice); const alpha = 0.22 * (1 - Math.max(0, px * shade)); ctx.fillStyle = `rgba(0,0,0,${alpha.toFixed(3)})`; ctx.fillRect(0, along, tw, seg + 1); } }; const metal = (x0: number, y0: number, x1: number, y1: number) => { const g = ctx.createLinearGradient(x0, y0, x1, y1); g.addColorStop(0, "#f4efe4"); g.addColorStop(0.45, "#b9b0a0"); g.addColorStop(0.55, "#8f8778"); g.addColorStop(1, "#ece6da"); return g; }; const paint = () => { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); if (!strapTex || !loopTex) return; ctx.imageSmoothingEnabled = true; drawRibbon(leftIds, strapTex, rest, -1); drawRibbon(rightIds, strapTex, rest, 1); drawRibbon(loopIds, loopTex, loopH / 3, 0); const a = particles[join]; const b = particles[clip]; const ang = Math.atan2(b.x - a.x, b.y - a.y); const s = strapW / 20; ctx.setTransform(dpr, 0, 0, dpr, a.x * dpr, a.y * dpr); ctx.rotate(-ang); ctx.shadowColor = "rgba(0,0,0,0.3)"; ctx.shadowBlur = 6 * dpr; ctx.shadowOffsetY = 2 * dpr; ctx.fillStyle = metal(-16 * s, 0, 16 * s, 0); ctx.beginPath(); ctx.roundRect(-15 * s, -14 * s, 30 * s, 17 * s, 3 * s); ctx.fill(); ctx.beginPath(); ctx.roundRect(-11 * s, 1 * s, 22 * s, 15 * s, [ 2 * s, 2 * s, 6 * s, 6 * s, ]); ctx.fill(); ctx.shadowColor = "transparent"; ctx.fillStyle = "rgba(40,36,30,0.55)"; ctx.fillRect(-10 * s, -9 * s, 20 * s, 2.2 * s); ctx.fillRect(-5 * s, 6 * s, 10 * s, 3 * s); ctx.strokeStyle = "rgba(255,255,255,0.6)"; ctx.lineWidth = 0.8 * s; ctx.beginPath(); ctx.moveTo(-13 * s, -12.5 * s); ctx.lineTo(13 * s, -12.5 * s); ctx.stroke(); ctx.setTransform(dpr, 0, 0, dpr, b.x * dpr, (b.y + ringR * 0.8) * dpr); ctx.lineWidth = Math.max(2.5, ringR * 0.38); ctx.strokeStyle = metal(-ringR, -ringR, ringR, ringR); ctx.beginPath(); ctx.arc(0, 0, ringR, 0, Math.PI * 2); ctx.stroke(); }; const syncDom = () => { const a = particles[clip]; const b = particles[tip]; const ang = angleBetween(a, b); badge.style.transform = `translate3d(${(a.x - width / 2).toFixed(2)}px,${(a.y + ringR).toFixed(2)}px,0) rotate(${(-ang).toFixed(4)}rad)`; card.style.transform = `perspective(1100px) rotateY(${spin.a.toFixed(4)}rad)`; const dim = 1 - Math.abs(Math.cos(spin.a)); card.style.setProperty("--lyd-dim", (dim * 0.5).toFixed(3)); card.style.setProperty( "--lyd-shine", `${(50 + Math.sin(spin.a) * 70 + ang * 90).toFixed(1)}%`, ); }; type Drag = { id: number; ox: number; oy: number; tx: number; ty: number; sx: number; sy: number; moved: boolean; }; let drag: Drag | null = null; const localPoint = (e: PointerEvent): [number, number] => { const rect = root.getBoundingClientRect(); return [e.clientX - rect.left, e.clientY - rect.top]; }; const flip = () => { targetSpin = targetSpin === 0 ? Math.PI : 0; setFlipped(targetSpin !== 0); }; flipRef.current = flip; const onDown = (e: PointerEvent) => { if (e.button > 0) return; const [x, y] = localPoint(e); const p = particles[clip]; drag = { id: e.pointerId, ox: p.x - x, oy: p.y - y, tx: p.x, ty: p.y, sx: x, sy: y, moved: false, }; particles[clip].w = 0; badge.setPointerCapture(e.pointerId); badge.style.cursor = "grabbing"; }; const onMove = (e: PointerEvent) => { if (!drag || e.pointerId !== drag.id) return; const [x, y] = localPoint(e); drag.tx = x + drag.ox; drag.ty = y + drag.oy; if (Math.hypot(x - drag.sx, y - drag.sy) > 5) drag.moved = true; }; const onUp = (e: PointerEvent) => { if (!drag || e.pointerId !== drag.id) return; if (!drag.moved) flip(); drag = null; particles[clip].w = 0.8; badge.style.cursor = "grab"; }; badge.addEventListener("pointerdown", onDown); badge.addEventListener("pointermove", onMove); badge.addEventListener("pointerup", onUp); badge.addEventListener("pointercancel", onUp); let raf = 0; let acc = 0; let last = performance.now(); let time = 0; const tick = (now: number) => { acc += Math.min(0.05, (now - last) / 1000); last = now; let steps = 0; while (acc >= DT && steps < 8) { acc -= DT; steps++; time += DT; if (drag) { const p = particles[clip]; p.px = p.x; p.py = p.y; p.x += (drag.tx - p.x) * 0.35; p.y += (drag.ty - p.y) * 0.35; } const tipP = particles[tip]; if (!reducedMotion && !drag) { tipP.x += (22 * Math.sin(time * 0.7) + 12 * Math.sin(time * 1.9)) * DT * DT; } integrate(particles, DT, GRAVITY, 0.992); solveConstraints(particles, constraints, ITER); const vx = (tipP.x - tipP.px) / DT; springAngle( spin, targetSpin, DT, vx * 0.03 + (reducedMotion ? 0 : 0.6 * Math.sin(time * 0.5)), ); } paint(); syncDom(); raf = requestAnimationFrame(tick); }; layout(); paint(); syncDom(); raf = requestAnimationFrame(tick); const ro = new ResizeObserver(() => { if ( Math.abs(root.clientWidth - viewW) < 1 && Math.abs(root.clientHeight - viewH) < 1 ) { return; } layout(); paint(); syncDom(); }); ro.observe(root); return () => { cancelAnimationFrame(raf); ro.disconnect(); badge.removeEventListener("pointerdown", onDown); badge.removeEventListener("pointermove", onMove); badge.removeEventListener("pointerup", onUp); badge.removeEventListener("pointercancel", onUp); }; }, [reducedMotion, width, cardH, ringR, clipH, strapKey]); const faceStyle: CSSProperties = { position: "absolute", inset: 0, borderRadius: width * 0.06, overflow: "hidden", backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", boxShadow: "0 18px 40px -12px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.2)", }; const shine = (

); const slot = (

); const scale = width / 240; const defaultFront = (

{title}

{subtitle}

); const defaultBack = (

{name}

{role}

); return (

); } export default function LanyardBadgeDemo() { return (

); }