Summarize this content to 400 words in Persian Lang \u0622\u06cc\u0627 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u0628\u0647 \u0627\u06cc\u0646 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u062c\u0644\u0633\u0627\u062a \u067e\u0648\u06a9\u0631 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0627\u0645\u0644\u06cc \u062a\u0631 \u06a9\u0646\u06cc\u062f\u061f \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React hooks \u0648 Web Animation API \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0631\u062a\u0627\u0628 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc Kollabe\u060c \u0627\u0628\u0632\u0627\u0631 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u067e\u0648\u06a9\u0631 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645.<\/p>\n
\u0686\u0627\u0644\u0634<\/p>\n
\u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u062c\u0644\u0633\u0627\u062a \u067e\u0648\u06a9\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9\u0646\u0648\u0627\u062e\u062a \u0634\u0648\u062f\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u062f\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631. \u062f\u0631 \u062d\u06cc\u0646 \u0633\u0627\u062e\u062a\u0646 Kollabe\u060c \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u06cc\u0645 \u0639\u0646\u0627\u0635\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647:<\/p>\n
\u0627\u0639\u0636\u0627\u06cc \u062a\u06cc\u0645 \u0631\u0627 \u062f\u0631\u06af\u06cc\u0631 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f
\n\u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u063a\u06cc\u0631\u06a9\u0644\u0627\u0645\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f
\n\u062c\u0644\u0633\u0627\u062a \u0627\u0632 \u0631\u0627\u0647 \u062f\u0648\u0631 \u0631\u0627 \u0634\u062e\u0635\u06cc \u062a\u0631 \u06a9\u0646\u06cc\u062f
\n\u06cc\u06a9 \u0639\u0627\u0645\u0644 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0628\u062f\u0648\u0646 \u0628\u0647 \u062e\u0637\u0631 \u0627\u0646\u062f\u0627\u062e\u062a\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n
\u0631\u0627\u0647 \u062d\u0644: \u0627\u0645\u0648\u062c\u06cc \u0647\u0627\u06cc \u067e\u0631\u0646\u062f\u0647<\/p>\n
\u0645\u0627 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u067e\u0631\u062a\u0627\u0628 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0627\u0639\u0636\u0627\u06cc \u062a\u06cc\u0645 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0627 \u067e\u0631\u062a\u0627\u0628 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0645\u0648\u062c\u06cc\u200c\u0647\u0627 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0635\u0641\u062d\u0647 \u0628\u0647 \u062a\u062e\u0645\u06cc\u0646\u200c\u0647\u0627 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0622\u0646 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
import { useCallback, useRef } from “react”;<\/p>\n
interface Point {
\n x: number;
\n y: number;
\n}<\/p>\n
interface DOMRect {
\n left: number;
\n top: number;
\n width: number;
\n height: number;
\n}<\/p>\n
\/**
\n * Generates a random number within a specified range.
\n *\/
\nconst getRandomNumber = (
\n min = 0.1,
\n max = 0.4,
\n isPositive = Math.random() < 0.5,
\n): number => {
\n const random = Math.random() * (max – min) + min;
\n return isPositive ? random : -random;
\n};<\/p>\n
\/**
\n * Calculates the center position of a DOM element.
\n *\/
\nconst getCenterPosition = (rect: DOMRect): Point => ({
\n x: rect.left + rect.width \/ 2,
\n y: rect.top + rect.height \/ 2,
\n});<\/p>\n
\/**
\n * Calculates the target position with a random offset from the center.
\n *\/
\nconst getTargetPosition = (rect: DOMRect): Point => {
\n const center = getCenterPosition(rect);
\n return {
\n x: center.x – getRandomNumber(0, 15, true),
\n y: center.y – getRandomNumber(0, 25, true),
\n };
\n};<\/p>\n
\/**
\n * Calculates the midpoint between two points.
\n *\/
\nconst getMidpoint = (start: Point, target: Point): Point => ({
\n x: (start.x + target.x) \/ 2,
\n y: (start.y + target.y) \/ 2,
\n});<\/p>\n
\/**
\n * Calculates the distance between two points.
\n *\/
\nconst getDistance = (start: Point, target: Point): number => {
\n return Math.sqrt(
\n Math.pow(target.x – start.x, 2) + Math.pow(target.y – start.y, 2),
\n );
\n};<\/p>\n
\/**
\n * Calculates the control point for the quadratic Bezier curve.
\n *\/
\nconst getControlPoint = (start: Point, target: Point): Point => {
\n const midpoint = getMidpoint(start, target);
\n const distance = getDistance(start, target);<\/p>\n
const angle = Math.atan2(target.y – start.y, target.x – start.x);
\n const perpAngle = angle + Math.PI \/ 2;
\n const controlPointDistance = distance * getRandomNumber(0.2, 0.4, true);<\/p>\n
return {
\n x: midpoint.x + Math.cos(perpAngle) * controlPointDistance,
\n y: midpoint.y + Math.sin(perpAngle) * controlPointDistance,
\n };
\n};<\/p>\n
\/**
\n * Creates and styles the emoji element.
\n *\/
\nconst createEmojiElement = (
\n emoji: string,
\n startPoint: Point,
\n): HTMLDivElement => {
\n const emojiElement = document.createElement(“div”);
\n Object.assign(emojiElement.style, {
\n position: “fixed”,
\n fontSize: “24px”,
\n pointerEvents: “none”,
\n zIndex: “1”,
\n left: “0”,
\n top: “0”,
\n transform: `translate(${startPoint.x}px, ${startPoint.y}px) translate(-50%, -50%)`,
\n });
\n emojiElement.textContent = emoji;
\n document.body.appendChild(emojiElement);
\n return emojiElement;
\n};<\/p>\n
\/**
\n * Calculates a point on a quadratic Bezier curve.
\n *\/
\nconst calculateBezierPoint = (
\n start: Point,
\n control: Point,
\n target: Point,
\n progress: number,
\n): Point => {
\n const easeProgress = 1 – Math.pow(1 – progress, 2);
\n return {
\n x:
\n Math.pow(1 – easeProgress, 2) * start.x +
\n 2 * (1 – easeProgress) * easeProgress * control.x +
\n Math.pow(easeProgress, 2) * target.x,
\n y:
\n Math.pow(1 – easeProgress, 2) * start.y +
\n 2 * (1 – easeProgress) * easeProgress * control.y +
\n Math.pow(easeProgress, 2) * target.y,
\n };
\n};<\/p>\n
\/**
\n * Custom hook for throwing emoji animations.
\n *\/
\nexport const useEmojiThrow = () => {
\n const animationRef = useRef<number>();
\n const emojiRef = useRef<HTMLDivElement | null>(null);<\/p>\n
const throwEmoji = useCallback(
\n (emoji: string, sourceId: string, targetId: string) => {
\n const sourceEl = document.getElementById(sourceId);
\n const targetEl = document.getElementById(targetId);<\/p>\n
if (!sourceEl || !targetEl) return;<\/p>\n
const startRect = sourceEl.getBoundingClientRect();
\n const targetRect = targetEl.getBoundingClientRect();<\/p>\n
const startPoint = getCenterPosition(startRect);
\n const targetPoint = getTargetPosition(targetRect);
\n const controlPoint = getControlPoint(startPoint, targetPoint);<\/p>\n
const emojiElement = createEmojiElement(emoji, startPoint);
\n emojiRef.current = emojiElement;<\/p>\n
let startTime = performance.now();
\n const duration = 1000; \/\/ Animation duration in milliseconds<\/p>\n
const animate = (currentTime: number) => {
\n const elapsed = currentTime – startTime;
\n const progress = Math.min(elapsed \/ duration, 1);<\/p>\n
const position = calculateBezierPoint(
\n startPoint,
\n controlPoint,
\n targetPoint,
\n progress,
\n );<\/p>\n
emojiElement.style.transform =
\n `translate(${position.x}px, ${position.y}px) translate(-50%, -50%)`;<\/p>\n
if (progress < 1) {
\n animationRef.current = requestAnimationFrame(animate);
\n } else {
\n emojiElement.style.transform =
\n `translate(${targetPoint.x}px, ${targetPoint.y}px) translate(-50%, -50%)`;
\n setTimeout(() => {
\n emojiElement.remove();
\n }, duration);
\n }
\n };<\/p>\n
requestAnimationFrame(() => {
\n startTime = performance.now();
\n animate(startTime);
\n });
\n },
\n [],
\n );<\/p>\n
const cleanup = useCallback(() => {
\n if (animationRef.current) {
\n cancelAnimationFrame(animationRef.current);
\n }
\n if (emojiRef.current) {
\n emojiRef.current.remove();
\n }
\n }, []);<\/p>\n
return { throwEmoji, cleanup };
\n};<\/p>\n
\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646<\/p>\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0627\u0645\u0644 \u0627\u0632 \u0646\u062d\u0648\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u06cc\u0645\u0648\u062c\u06cc \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a React \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
import React from ‘react’;
\nimport { useEmojiThrow } from ‘.\/useEmojiThrow’;<\/p>\n
const PlanningPokerRoom: React.FC = () => {
\n const { throwEmoji } = useEmojiThrow();<\/p>\n
const handleEmojiClick = (emoji: string) => {
\n \/\/ Assuming you have elements with these IDs in your DOM
\n throwEmoji(emoji, “source-player-avatar”, “target-player-avatar”);
\n };<\/p>\n
return (
\n <div className=”poker-room”>
\n <div id=”source-player-avatar” className=”avatar”>
\n Player 1
\n <\/div><\/p>\n
<div className=”emoji-controls”>
\n <button onClick={() => handleEmojiClick(“\ud83c\udf89”)}>Throw Confetti<\/button>
\n <button onClick={() => handleEmojiClick(“\ud83d\udc4d”)}>Throw Thumbs Up<\/button>
\n <button onClick={() => handleEmojiClick(“\u2764\ufe0f”)}>Throw Heart<\/button>
\n <\/div><\/p>\n
<div id=”target-player-avatar” className=”avatar”>
\n Player 2
\n <\/div>
\n <\/div>
\n );
\n};<\/p>\n
export default PlanningPokerRoom;<\/p>\n
\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc<\/p>\n
\u062d\u0631\u06a9\u062a \u0637\u0628\u06cc\u0639\u06cc: \u0627\u0632 \u0645\u0646\u062d\u0646\u06cc \u0647\u0627\u06cc Bezier \u062f\u0631\u062c\u0647 \u062f\u0648\u0645 \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0635\u0627\u0641 \u0648 \u0642\u0648\u0633 \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n
\u062a\u0635\u0627\u062f\u0641\u06cc \u0633\u0627\u0632\u06cc: \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062c\u0632\u0626\u06cc \u0631\u0627 \u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627 \u0648 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0647\u062f\u0641 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f<\/p>\n
\u0639\u0645\u0644\u06a9\u0631\u062f: \u0645\u0648\u0627\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 requestAnimationFrame \u0628\u0631\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0631\u0648\u0627\u0646<\/p>\n
\u067e\u0627\u06a9\u0633\u0627\u0632\u06cc: \u0634\u0627\u0645\u0644 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0645\u0646\u0627\u0633\u0628 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0648 \u0639\u0646\u0627\u0635\u0631 DOM \u0627\u0633\u062a<\/p>\n
\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc TypeScript: \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u0628\u0647\u062a\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u06a9\u0627\u0645\u0644\u0627 \u062a\u0627\u06cc\u067e \u0634\u062f\u0647 \u0627\u0633\u062a<\/p>\n
\u062c\u0632\u0626\u06cc\u0627\u062a \u0641\u0646\u06cc<\/p>\n
\u0627\u06cc\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0648\u0633\u0637:<\/p>\n
\u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0634\u0631\u0648\u0639 \u0648 \u067e\u0627\u06cc\u0627\u0646 \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 DOM
\n\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0645\u0648\u0642\u062a
\n\u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0622\u0646 \u062f\u0631 \u0627\u0645\u062a\u062f\u0627\u062f \u0645\u0646\u062d\u0646\u06cc Bezier
\n\u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646<\/p>\n
\u0631\u0627 useEmojiThrow \u0647\u0648\u06a9 \u062a\u0645\u0627\u0645 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631\u062a\u0627\u0628 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0647\u0627 \u0628\u06cc\u0646 \u0647\u0631 \u062f\u0648 \u0639\u0646\u0635\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0634\u0645\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
\u0622\u0646 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n
\u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0644\u06cc\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f \u0627\u062a\u0627\u0642 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0634\u06a9\u0644\u06a9\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646\u0627\u0646 \u0631\u0628\u0627\u062a \u067e\u0631\u062a\u0627\u0628 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u062c\u0644\u0633\u0647 \u067e\u0648\u06a9\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0631\u06cc\u0632\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 Kollabe \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\n
\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0627\u0632 \u062a\u0628\u062f\u06cc\u0644 \u0647\u0627\u06cc CSS \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f
\n\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647\u060c \u0639\u0646\u0627\u0635\u0631 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u062a\u0645\u06cc\u0632 \u0645\u06cc \u0634\u0648\u0646\u062f
\n\u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f
\n\u0641\u0631\u06cc\u0645 \u0647\u0627\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062f\u0631 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0644\u063a\u0648 \u0645\u06cc \u0634\u0648\u0646\u062f<\/p>\n
\u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u0628\u0627\u0644\u0642\u0648\u0647<\/p>\n
\u0634\u0645\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n
\u062a\u0646\u0638\u06cc\u0645 \u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646
\n\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0627\u06cc\u0645\u0648\u062c\u06cc
\n\u062a\u063a\u06cc\u06cc\u0631 \u062a\u0635\u0627\u062f\u0641\u06cc \u0645\u0633\u06cc\u0631
\n\u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u0634 \u06cc\u0627 \u0645\u0642\u06cc\u0627\u0633\u200c\u0628\u0646\u062f\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f
\n\u062a\u0648\u0627\u0628\u0639 \u0645\u062e\u062a\u0644\u0641 \u062a\u0633\u0647\u06cc\u0644 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n
\u0627\u06cc\u0646 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0633\u062a<\/p>\n
\u0627\u0641\u0632\u0648\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u067e\u0631\u062a\u0627\u0628 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062c\u0644\u0633\u0627\u062a \u067e\u0648\u06a9\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0631\u0627 \u0628\u0647 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u062a\u06cc\u0645\u06cc \u062c\u0630\u0627\u0628 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u062f. \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u06af\u0631 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0631\u0627\u0647 \u062d\u0644 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f\u060c Kollabe \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0633\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u062a\u06cc\u0645 \u062e\u0648\u062f \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n
\u0622\u06cc\u0627 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u0628\u0647 \u0627\u06cc\u0646 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u062c\u0644\u0633\u0627\u062a \u067e\u0648\u06a9\u0631 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0627\u0645\u0644\u06cc \u062a\u0631 \u06a9\u0646\u06cc\u062f\u061f \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React hooks \u0648 Web Animation API \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0631\u062a\u0627\u0628 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc Kollabe\u060c \u0627\u0628\u0632\u0627\u0631 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u06cc\u0632\u06cc \u067e\u0648\u06a9\u0631 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645.<\/p>\n