4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T21c9,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import styles from "./like-button.module.css"; const DEGREES_TO_RADIANS = 180; const ANGLE_OFFSET_BASE = 90; const DELAY_DIVISOR = 1000; const ROTATION_MULTIPLIER = 6; const SCALE_BASE = 0.8; const SCALE_DIVISOR = 30; const PARTICLE_SIZE_STAR_LARGE = 12; const PARTICLE_SIZE_STAR_MEDIUM = 10; const PARTICLE_SIZE_CIRCLE_LARGE = 6; const PARTICLE_SIZE_CIRCLE_MEDIUM = 5; const PARTICLE_ANGLE_LEFT = -60; const PARTICLE_ANGLE_CENTER = 0; const PARTICLE_ANGLE_LEFT_SMALL = -30; const THUMB_ANIMATION_DURATION = 1200; const PARTICLE_ANIMATION_DURATION = 1000; const LIKE_STATE_DELAY = 100; const AUTO_PLAY_INTERVAL = 3000; const PARTICLE_RETURN_DELAY_OUTER = 0; const PARTICLE_RETURN_DELAY_INNER = 0.05; type Particle = { id: number; type: "star" | "circle"; angle: number; distance: number; delay: number; returnDelay: number; rotation: number; size: number; scale: number; color: string; }; function LikeButton({ isPlaying = false, onClick, className, particleCount = 5, colors = ["var(--foreground)"], colorMode = "alternating", }: { isPlaying?: boolean; onClick?: () => void; className?: string; particleCount?: number; colors?: string[]; colorMode?: "alternating" | "random"; }) { const [particles, setParticles] = useState([]); const [isThumbAnimating, setIsThumbAnimating] = useState(false); const [isLiked, setIsLiked] = useState(false); const intervalRef = useRef(null); const [isFilled, setIsFilled] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const createParticle = useCallback( (angleOffset: number, type: "star" | "circle", size: number, color: string): Particle => { const baseAngle = -Math.PI / 2; const angle = baseAngle + (angleOffset * Math.PI) / DEGREES_TO_RADIANS; const absAngle = Math.abs(angleOffset); let returnDelay = PARTICLE_RETURN_DELAY_OUTER; if (absAngle === PARTICLE_ANGLE_CENTER) { returnDelay = PARTICLE_RETURN_DELAY_INNER; } else if (absAngle === Math.abs(PARTICLE_ANGLE_LEFT_SMALL)) { returnDelay = PARTICLE_RETURN_DELAY_INNER; } else if (absAngle === Math.abs(PARTICLE_ANGLE_LEFT)) { returnDelay = PARTICLE_RETURN_DELAY_OUTER; } return { id: Date.now() + angleOffset + size + Math.random(), type, angle, distance: 40, delay: (angleOffset + ANGLE_OFFSET_BASE) / DELAY_DIVISOR, returnDelay, rotation: angleOffset * ROTATION_MULTIPLIER, size, scale: SCALE_BASE + size / SCALE_DIVISOR, color, }; }, [] ); const createParticleSet = useCallback((): Particle[] => { const particles: Particle[] = []; const angleSpread = 120; const angleStep = particleCount > 1 ? angleSpread / (particleCount - 1) : 0; const startAngle = -angleSpread / 2; for (let i = 0; i < particleCount; i++) { const angleOffset = startAngle + i * angleStep; const type: "star" | "circle" = i % 2 === 0 ? "star" : "circle"; const size = type === "star" ? i % 3 === 0 ? PARTICLE_SIZE_STAR_LARGE : PARTICLE_SIZE_STAR_MEDIUM : i % 3 === 0 ? PARTICLE_SIZE_CIRCLE_LARGE : PARTICLE_SIZE_CIRCLE_MEDIUM; let color: string; if (colorMode === "random") { color = colors[Math.floor(Math.random() * colors.length)]; } else { color = colors[i % colors.length]; } particles.push(createParticle(angleOffset, type, size, color)); } return particles; }, [particleCount, colors, colorMode, createParticle]); const startThumbAnimation = useCallback(() => { setIsThumbAnimating(true); setIsFilled(true); setIsAnimating(true); setTimeout(() => { setIsThumbAnimating(false); setIsFilled(false); setIsAnimating(false); }, THUMB_ANIMATION_DURATION); }, []); const startParticleAnimation = useCallback(() => { setParticles(createParticleSet()); setTimeout(() => { setParticles([]); }, PARTICLE_ANIMATION_DURATION); }, [createParticleSet]); const handleClick = (e: React.MouseEvent | React.TouchEvent) => { e.preventDefault(); e.stopPropagation(); if (isAnimating || isPlaying) { return; } const newLikedState = !isLiked; if (newLikedState) { startThumbAnimation(); startParticleAnimation(); setTimeout(() => { setIsLiked(true); }, LIKE_STATE_DELAY); } else { setIsLiked(false); setIsFilled(false); } onClick?.(); }; const handleTouchStart = (e: React.TouchEvent) => { if (isAnimating) { e.preventDefault(); e.stopPropagation(); } }; useEffect(() => { if (isPlaying) { startThumbAnimation(); startParticleAnimation(); intervalRef.current = setInterval(() => { startThumbAnimation(); startParticleAnimation(); }, AUTO_PLAY_INTERVAL); } else if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } return () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, [isPlaying, startThumbAnimation, startParticleAnimation]); return (

{particles.map((particle) => (

))}

); } export { LikeButton }; 50:T12aa,.container { min-height: 200px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .animationWrapper { position: relative; width: 100%; max-width: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px; overflow: visible; } .particlesContainer { position: absolute; inset: -60px -40px; overflow: visible; pointer-events: none; z-index: 1; } .particle { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; animation: particleOut 0.5s ease-out var(--delay) forwards, particleReturn 0.5s ease-out calc(0.65s + var(--return-delay)) forwards; opacity: 0; transform: translate(-50%, -50%) scale(0); } .starShape { width: var(--size); height: var(--size); position: relative; display: block; transform: rotate(var(--rotation)); } .starShape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--particle-color, var(--foreground)); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .circleShape { width: var(--size); height: var(--size); background: var(--particle-color, var(--foreground)); border-radius: 50%; transform: scale(var(--scale)); } .thumbButton { padding: 16px; border-radius: 50%; transition: transform 0.25s ease; position: relative; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; touch-action: manipulation; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; -webkit-tap-highlight-color: transparent !important; tap-highlight-color: transparent !important; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-perspective: 1000; perspective: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: visible; margin: 4px 0; outline: none; will-change: transform, opacity; } .thumbButton:hover { transform: scale(1.05); } @media (hover: none) and (pointer: coarse) { .thumbButton:hover { transform: none; } } .thumbButton:focus { outline: none; } .thumbButton:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .thumbIcon { transition: all 0.25s ease; width: 24px; height: 24px; will-change: transform, opacity; -webkit-transform: translateZ(0); transform: translateZ(0); } .scaledIcon { transform: scale(1.1); } .fillAnimation { animation: fillThumb 0.25s ease-out forwards; } @keyframes particleOut { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 100% { transform: translate( calc(-50% + (cos(var(--angle)) * var(--distance))), calc(-50% + (sin(var(--angle)) * var(--distance))) ) scale(1); opacity: 0.9; } } @keyframes particleReturn { 0% { transform: translate( calc(-50% + (cos(var(--angle)) * var(--distance))), calc(-50% + (sin(var(--angle)) * var(--distance))) ) scale(1); opacity: 0.9; } 50% { transform: translate( calc(-50% + (cos(var(--angle)) * var(--distance) * 0.1)), calc(-50% + (sin(var(--angle)) * var(--distance) * 0.1)) ) scale(0.3); opacity: 0.25; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } } @keyframes fillThumb { 0% { fill: none; } 100% { fill: var(--primary); } } @keyframes thumbTilt { 0% { transform: rotate(0deg) scale(1) translateZ(0); } 50% { transform: rotate(-30deg) scale(1.2) translateZ(0); } 100% { transform: rotate(0deg) scale(1) translateZ(0); } } .animateThumbTilt { animation: thumbTilt 1.15s cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-animation: thumbTilt 1.15s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 768px) { .thumbButton { min-height: 48px; min-width: 48px; padding: 16px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .container { min-height: 160px; } .thumbButton, .thumbIcon { transform-origin: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } } @-webkit-keyframes thumbTilt { 0% { -webkit-transform: rotate(0deg) scale(1) translateZ(0); } 50% { -webkit-transform: rotate(-30deg) scale(1.2) translateZ(0); } 100% { -webkit-transform: rotate(0deg) scale(1) translateZ(0); } } .container { -webkit-overflow-scrolling: touch; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/brook/ui/like-button/like-button.tsx","content":"$4f","type":"registry:file","target":"~/components/ui/like-button/like-button.tsx"},{"path":"registry/brook/ui/like-button/like-button.module.css","content":"$50","type":"registry:file","target":"~/components/ui/like-button/like-button.module.css"}],"className":"h-[70svh] min-h-80"}]]}]