React DOM-এর জন্য গতি · React Native-এর Animated API

গতি একবার লিখুন। মসৃণ চলে, কখনো ভাঙে না।

Animated, React Native-এর Animated-কে ওয়েবে আনে। একটি মান প্রতি ফ্রেমে React রেন্ডার ছাড়াই যত খুশি এলিমেন্ট চালায়, সমর্থিত গতি ব্রাউজার নিজেই চালায়, আর প্রতিটি বাধা স্ক্রিনে যা আছে সেখান থেকে এগোয়।

শুরু করুন উদাহরণ দেখুন

ইনস্টল করুন

npm install @kkwaenggwari/animated

একটি ঘড়ির মান ৬৪টি আকৃতির ঢেউ চালায়। মঞ্চের ওপর পয়েন্টার নাড়ান।

এই বিল্ডে মাপা

ডেস্কটপ PC-তে হেডলেস Chrome-এ 1.0.0 বিল্ড দিয়ে মাপা। সংখ্যা ডিভাইসের ওপর নির্ভর করে। আমরা কীভাবে মেপেছি

0.00ms৪০০টি এলিমেন্ট নড়ার সময় প্রতি ফ্রেমের JavaScript
Animated এলিমেন্টে transform আর opacity-র সীমিত গতি ব্রাউজার চালায়। পাতার নিজস্ব ফ্রেম callback কোনো কাজ করে না।
0.13msএকটি মান ১০,০০০ এলিমেন্ট চালালে প্রতি ফ্রেমের JavaScript
মান একটি CSS ভেরিয়েবল লেখে; প্রতিটি এলিমেন্ট CSS-এ তা থেকে নিজের স্টাইল তৈরি করে।
0গতির সময় React রেন্ডার
মান কখনো React স্টেটের মধ্য দিয়ে যায় না। আপনার props বদলালে কম্পোনেন্ট রেন্ডার হয়, ফ্রেম বদলালে নয়।

01 · সহজ

যে API আপনি আগেই জানেন, সাধারণ React style-এ

timing, spring, interpolate, loop আর Animated.event React Native-এর নাম আর কনফিগারেশন বজায় রাখে। মান সরাসরি সাধারণ style prop-এ যায়, তাই প্রথম গতির আগে কোনো বিশেষ কম্পোনেন্ট শিখতে হয় না।

Animated.View-কে Animated.div নাম দিয়ে React Native-এর কোড নিয়ে আসুন।
একটি মান একসঙ্গে একটি ফিতা, একটি ডায়াল আর এক সারি কার্ড চালাতে পারে, প্রতিটি নিজের পরিসরে।
useAnimated রেসিপির মালিক: মাউন্টে শুরু হয়, নির্ভরতা বদলালে আবার শুরু হয় আর আনমাউন্টে পরিষ্কার করে।

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { Easing, delay, loop, sequence, spring, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const curves = {
  linear: Easing.linear,
  inOut: Easing.inOut(Easing.cubic),
  back: Easing.out(Easing.back(1.7)),
  bounce: Easing.bounce,
};

export default function App({ tempo = 'spring', duration = 900, easing = 'inOut' }) {
  // One value. The recipe restarts when a prop changes.
  const progress = useAnimated(
    0,
    (value) => {
      const go = (toValue) =>
        tempo === 'spring'
          ? spring(value, { toValue, stiffness: 120, damping: 11 })
          : timing(value, { toValue, duration, easing: curves[easing] });
      loop(sequence([go(1), delay(500), go(0), delay(500)]));
    },
    [tempo, duration, easing],
  );

  const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '200px'] });
  const turn = progress.interpolate({ inputRange: [0, 1], outputRange: ['-90deg', '180deg'] });

  return (
    <div className="stage">
      <div className="track">
        <div className="fill" style={{ transform: `scaleX(${progress})` }} />
      </div>
      <div className="row">
        <div className="dial">
          <i style={{ transform: `rotate(${turn})` }} />
        </div>
        <div className="lane">
          <div className="puck" style={{ transform: `translateX(${x})` }} />
        </div>
      </div>
      <div className="cards">
        {[0, 1, 2, 3].map((index) => {
          const start = index * 0.15;
          const lift = progress.interpolate({
            inputRange: [start, start + 0.55],
            outputRange: ['0px', '-26px'],
            extrapolate: 'clamp',
          });
          return (
            <div key={index} className="card" style={{ transform: `translateY(${lift})` }}>
              {index + 1}
            </div>
          );
        })}
      </div>
      <p className="note">One value → 7 elements, ordinary React style</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.track {
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid #e4e6ef;
  border-radius: 50%;
}

.dial i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #8fb0ff;
  transform-origin: left center;
}

.lane {
  flex: 1 1 244px;
  max-width: 260px;
  height: 44px;
  border-radius: 999px;
  background: #f5f6fb;
}

.puck {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7cff;
}

.cards {
  display: flex;
  gap: 12px;
  padding-top: 30px;
}

.card {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

.note {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

React Native-এর মতোই কল

Spinner.jsx

// React Native
<Animated.View style={{ transform: [{ rotate }] }} />

// React DOM with @kkwaenggwari/animated — the rest is identical
<Animated.div style={{ transform: [{ rotate }] }} />

const spin = useAnimatedValue(0);
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });

Animated.loop(
  Animated.timing(spin, { toValue: 1, duration: 900, easing: Easing.linear, useNativeDriver: true }),
).start();

02 · দ্রুত

প্রতি ফ্রেমে React রেন্ডার নেই

হুকের মান একটি CSS ভেরিয়েবল। রৈখিক ইন্টারপোলেশন আর গাণিতিক কাজ সেই ভেরিয়েবলের নিখুঁত calc() এক্সপ্রেশন হয়ে যায়, তাই প্রতিটি ফ্রেম একটি লেখা আর বাকিটা ব্রাউজার হিসাব করে। Animated.<tag> এলিমেন্টে transform আর opacity-র সীমিত গতি ব্রাউজার ফ্রেম callback ছাড়াই চালায়।

বিন্দুর সংখ্যা বদলান: কাউন্টার দেখায় React প্রতিটি পরিবর্তনে একবার রেন্ডার হয়েছে, কখনো প্রতি ফ্রেমে নয়।
scope মান প্রতিটি এলিমেন্টের বদলে কন্টেইনারে একবার লেখে।
inspect(element) জানায় প্রতিটি প্রপার্টি কোন পথ ব্যবহার করে আর কেন।

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

03 · স্থিতিশীল

যেকোনো জায়গায় থামান। এটি এগিয়ে চলে।

নতুন লক্ষ্য শুরু হয় স্ক্রিনে এলিমেন্ট যেখানে আছে সেখান থেকে, আর স্প্রিং বেগও ধরে রাখে, তাই মাঝপথের মোড় আগে থামার বদলে মসৃণভাবে বাঁক নেয়। হুকে ঘোষিত কন্ট্রোলার প্রতিস্থাপন আর আনমাউন্টে থেমে ছেড়ে দেওয়া হয়, আর সার্ভারে রেন্ডার হওয়া markup হাইড্রেশনের পরেও অ্যানিমেট হতে থাকে।

দ্রুত দুবার ক্লিক করুন: spring-এ পথ বাঁকে, timing-এ অবস্থান থাকে কিন্তু নতুন বক্ররেখা শুরু হয়।
থামালে মান যেখানে আছে সেখানেই থাকে; কিছুই শেষ অবস্থায় লাফ দেয় না।
আনমাউন্ট, রুট বদল বা লুকানো ট্যাবের পরে কোনো ভুলে যাওয়া ফ্রেম লুপ থাকে না।

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { useRef } from 'react';
import {
  Easing,
  spring,
  timing,
  useAnimatedListener,
  useAnimatedValueXY,
} from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tempo = 'spring', stiffness = 140, damping = 14 }) {
  const point = useAnimatedValueXY({ x: 80, y: 120 });
  const canvas = useRef(null);

  const moveTo = (event) => {
    const box = event.currentTarget.getBoundingClientRect();
    const toValue = { x: event.clientX - box.left, y: event.clientY - box.top };
    // A new target starts from where the puck is now.
    const motion =
      tempo === 'spring'
        ? spring(point, { toValue, stiffness, damping })
        : timing(point, { toValue, duration: 700, easing: Easing.inOut(Easing.cubic) });
    motion.start();
  };

  // Draw the path the puck actually travels.
  const last = useRef(null);
  useAnimatedListener(point, ({ x, y }) => {
    const context = canvas.current?.getContext('2d');
    if (!context) return;
    context.fillStyle = 'rgba(11, 20, 64, 0.025)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    if (last.current) {
      context.strokeStyle = tempo === 'spring' ? '#8fb0ff' : '#ffffff';
      context.lineWidth = 4;
      context.lineCap = 'round';
      context.beginPath();
      context.moveTo(last.current.x, last.current.y);
      context.lineTo(x, y);
      context.stroke();
    }
    last.current = { x, y };
  });

  return (
    <div className="stage">
      <div className="track" onPointerDown={moveTo}>
        <canvas ref={canvas} width={720} height={320} />
        <div
          className="puck"
          style={{
            transform: `translate(calc(${point.x} * 1px - 50%), calc(${point.y} * 1px - 50%))`,
          }}
        />
        <p>Click anywhere. Click again before it stops.</p>
      </div>
    </div>
  );
}

styles.css

.stage {
  padding: 20px;
}

.track {
  position: relative;
  height: 320px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.track canvas {
  position: absolute;
  inset: 0;
  width: 720px;
  height: 320px;
}

.puck {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2854ff;
}

.track p {
  position: absolute;
  inset: auto 16px 12px;
  margin: 0;
  color: #b8c4ef;
  font-size: 14px;
  pointer-events: none;
}

আপনি যা তৈরি করতে পারেন

সমন্বয়যোগ্য সেটিংস আর পুরো সোর্স কোডসহ পূর্ণ প্যাটার্ন।

সব উদাহরণ

Animated দিয়ে তৈরি

তৈরি কম্পোনেন্ট দরকার? Animated Chorus।

ঘুরন্ত সংখ্যা, সরে যাওয়া কার্ড হাইলাইট, অগ্রগতি, শিট আর অ্যানিমেটেড তালিকা, যা সরাসরি React আর React Native-এ বসে যায়। এই তিনটি এখনই এই পাতায় চলছে।

Animated Chorus দেখুন

তিন মিনিটে শুরু করুন

প্যাকেজ ইনস্টল করুন, প্রথম মান নাড়ান, তারপর সামনের কাজের গাইড বেছে নিন।

npm install @kkwaenggwari/animated