# Motion Graphics Bank / بنك الحركات — source & integration catalogue

Generated directly for this website from verified standard libraries, 14 October 2026. All runtime demos below are original native CSS/JavaScript, with optional library integration recipes. No third-party runtime package is installed by this release.

Existing 1,048 previews: 24 original classic effects and 1,024 trajectory/choreography variants. Format inspiration: [Prompt Motion](https://prompt-motion.com/). Their implementation lives in services/creative-assets/motion-r6.js, motion-gallery-r5.js and creative-r4.css. The page exports a full per-item Markdown inventory of these alongside the new presets.

- **عدّ الأرقام / CountUp numbers**
  - Exact component/reference: `react-bits: CountUp`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Ease a number from zero to its target with formatted digits.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/CountUp-TS-TW
// Adjust the import to the file created by your registry command.
import CountUp from './CountUp';
export function Demo() { return <CountUp from={0} to={1000} duration={2.4} />; }
// The website HTML download uses the original native implementation.
```

- **كتابة حركية / Kinetic typography**
  - Exact component/reference: `react-bits: SplitText; Motion: stagger`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Stagger separate letter entrances and spring-like settling.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/SplitText-TS-TW
// Adjust the import to the file created by your registry command.
import SplitText from './SplitText';
export function Demo() { return <SplitText text="MOTION" />; }
// The website HTML download uses the original native implementation.
```

- **تمديد النص بالكشيدة / Kashida text stretching**
  - Exact component/reference: `Original JavaScript: Unicode U+0640 tatweel`
  - [GitHub: Original website CSS / JavaScript](https://github.com/3omarhs/crtv-rarities-dotnet/tree/codex/hostinger-v3/services/motion-effects) · [Package / documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
  - Insert tatweel only at a known joining pair in the Arabic sample. This is not a general Arabic justification engine.
  - Original local preview; library recipe is optional.

```javascript
// Native sample, no external package. Only a known joining pair:
const word = 'س' + '\u0640'.repeat(4) + 'لام';
document.querySelector('[data-kashida]').textContent = word;
// Do not insert tatweel after non-joining letters or use letter-spacing.
// For general Arabic text, use a shaping-aware layout system.
```

- **تكبير وتصغير / Zoom in / out**
  - Exact component/reference: `Animate.css: zoomIn / zoomOut`
  - [GitHub: Animate.css](https://github.com/animate-css/animate.css) · [Package / documentation](https://www.npmjs.com/package/animate.css)
  - Scale the scene around its center to simulate a lens zoom.
  - Original local preview; library recipe is optional.

```javascript
// npm install animate.css
import 'animate.css';
// <div className="animate__animated animate__zoomIn">Scene</div>
// animate__zoomOut performs the exit.
// Zoom changes scale; a dolly moves the actual camera.
```

- **حركة دولي / Dolly movement**
  - Exact component/reference: `Three.js: PerspectiveCamera; camera.position`
  - [GitHub: Three.js](https://github.com/mrdoob/three.js) · [Package / documentation](https://www.npmjs.com/package/three)
  - Move through depth; this preview is a CSS perspective simulation, not a rendered 3D camera.
  - Original local preview; library recipe is optional.

```javascript
// npm install three
import * as THREE from 'three';
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
// In your render loop, interpolate distance without changing fov:
camera.position.z = 8 - 3 * progress;
camera.lookAt(0, 0, 0);
// Set up scene/renderer; call renderer.render(scene, camera).
```

- **دوران ثلاثي الأبعاد / 3D orbit**
  - Exact component/reference: `Three.js: OrbitControls`
  - [GitHub: Three.js](https://github.com/mrdoob/three.js) · [Package / documentation](https://www.npmjs.com/package/three)
  - Orbit around an object; the demo rotates a CSS plane in perspective.
  - Original local preview; library recipe is optional.

```javascript
// npm install three
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.autoRotate = true;
// Each frame: controls.update(); renderer.render(scene, camera);
// On teardown: controls.dispose(); renderer.dispose();
```

- **تشويش لوني / RGB glitch**
  - Exact component/reference: `react-bits: GlitchText`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Offset colored text shadows in brief stepped shifts without full-screen flashes.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/GlitchText-TS-TW
// Adjust the import to the file created by your registry command.
import GlitchText from './GlitchText';
export function Demo() { return <GlitchText>GLITCH</GlitchText>; }
// The website HTML download uses the original native implementation.
```

- **تحديد بالقلم / Highlighter**
  - Exact component/reference: `magicui: Highlighter; rough-notation: annotate`
  - [GitHub: Magic UI](https://github.com/magicuidesign/magicui) · [Package / documentation](https://magicui.design/docs)
  - Draw a marker band behind text; Rough Notation is the annotation engine reference.
  - Original local preview; library recipe is optional.

```javascript
// npm install rough-notation (MIT alternative)
import { annotate } from 'rough-notation';
const mark = annotate(document.querySelector('#phrase'), {
  type: 'highlight', color: '#fde047', animationDuration: 900
});
mark.show();
// On teardown: mark.remove();
// Magic UI registry: npx shadcn@latest add @magicui/highlighter
```

- **لمعان نص بسيط / Minimal shiny text**
  - Exact component/reference: `react-bits: ShinyText`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Sweep a light band across text. “shinyminimal” is an unverified project alias, not an official component name.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/ShinyText-TS-TW
// Adjust the import to the file created by your registry command.
import ShinyText from './ShinyText';
export function Demo() { return <ShinyText text="SHINE" />; }
// The website HTML download uses the original native implementation.
```

- **انتقال القطع المنقسمة / Split cuts**
  - Exact component/reference: `Original CSS clip-path; Anime.js: timeline`
  - [GitHub: Anime.js](https://github.com/juliangarnier/anime) · [Package / documentation](https://www.npmjs.com/package/animejs)
  - Separate two clipped halves, then bring the next scene together.
  - Original local preview; library recipe is optional.

```javascript
// npm install animejs (v4)
import { createTimeline } from 'animejs';
const tl = createTimeline();
tl.add('.cut-left', { x: '-110%', duration: 900 }, 0)
  .add('.cut-right', { x: '110%', duration: 900 }, 0);
// Two absolute layers each clip half of the same scene.
// On teardown: tl.revert();
```

- **دوران مع عقارب الساعة / Clockwise rotation**
  - Exact component/reference: `Original CSS: transform rotate()`
  - [GitHub: Original website CSS / JavaScript](https://github.com/3omarhs/crtv-rarities-dotnet/tree/codex/hostinger-v3/services/motion-effects) · [Package / documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
  - Rotate with positive angles in an explicitly left-to-right stage; direction stays consistent in Arabic UI.
  - Original local preview; library recipe is optional.

```css
/* Set direction:ltr on the stage, even inside Arabic UI. */
@keyframes clockwise { to { transform: rotate(360deg); } }
.spin { animation: clockwise 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }
```

- **ظهور من الضبابية / Blur reveal**
  - Exact component/reference: `react-bits: BlurText`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Resolve a blurred word into crisp visible text.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/BlurText-TS-TW
// Adjust the import to the file created by your registry command.
import BlurText from './BlurText';
export function Demo() { return <BlurText text="FOCUS" />; }
// The website HTML download uses the original native implementation.
```

- **نص متدرج متحرك / Gradient text**
  - Exact component/reference: `react-bits: GradientText`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Move a colored gradient across the glyphs.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/GradientText-TS-TW
// Adjust the import to the file created by your registry command.
import GradientText from './GradientText';
export function Demo() { return <GradientText>COLOR</GradientText>; }
// The website HTML download uses the original native implementation.
```

- **آلة كاتبة / Typewriter**
  - Exact component/reference: `magicui: TypingAnimation`
  - [GitHub: Magic UI](https://github.com/magicuidesign/magicui) · [Package / documentation](https://magicui.design/docs)
  - Reveal characters sequentially with a caret.
  - Original local preview; library recipe is optional.

```javascript
// npx shadcn@latest add @magicui/typing-animation
import { TypingAnimation } from '@/components/ui/typing-animation';
// <TypingAnimation>HELLO</TypingAnimation>
// Native version updates textContent by character count.
```

- **فك رموز النص / Text scramble**
  - Exact component/reference: `react-bits: DecryptedText`
  - [GitHub: React Bits](https://github.com/DavidHDev/react-bits) · [Package / documentation](https://reactbits.dev)
  - Replace temporary symbols with the final phrase over time.
  - Original local preview; library recipe is optional.

```jsx
// Configured React/Tailwind/shadcn project. Check Commons Clause.
// npx shadcn@latest add @react-bits/DecryptedText-TS-TW
// Adjust the import to the file created by your registry command.
import DecryptedText from './DecryptedText';
export function Demo() { return <DecryptedText text="REVEAL" />; }
// The website HTML download uses the original native implementation.
```

- **مسح اتجاهي / Directional wipe**
  - Exact component/reference: `Original CSS: clip-path; Anime.js: timeline`
  - [GitHub: Anime.js](https://github.com/juliangarnier/anime) · [Package / documentation](https://www.npmjs.com/package/animejs)
  - Reveal a scene behind a moving clipping boundary.
  - Original local preview; library recipe is optional.

```javascript
// npm install animejs (v4)
import { animate } from 'animejs';
const reveal = animate('.scene', {
  clipPath: ['inset(0 100% 0 0)', 'inset(0 0% 0 0)'], duration: 1000
});
// On teardown: reveal.revert();
```

- **تلاشي متبادل / Cross dissolve**
  - Exact component/reference: `Motion: opacity animation`
  - [GitHub: Motion](https://github.com/motiondivision/motion) · [Package / documentation](https://www.npmjs.com/package/motion)
  - Fade one layer out as a second layer fades in.
  - Original local preview; library recipe is optional.

```javascript
// npm install motion
import { animate } from 'motion';
const a = animate('.layer-a', { opacity: [1, 0] }, { duration: 1 });
const b = animate('.layer-b', { opacity: [0, 1] }, { duration: 1 });
// On teardown: a.stop(); b.stop();
```

- **تكبير مرن / Spring scale**
  - Exact component/reference: `Motion: spring animation`
  - [GitHub: Motion](https://github.com/motiondivision/motion) · [Package / documentation](https://www.npmjs.com/package/motion)
  - Overshoot the target scale and settle into place.
  - Original local preview; library recipe is optional.

```javascript
// npm install motion
import { animate } from 'motion';
const animation = animate('.subject', { scale: [0.5, 1] }, {
  type: 'spring', stiffness: 180, damping: 16
});
// On teardown: animation.stop();
```

- **رسم مسار SVG / SVG stroke reveal**
  - Exact component/reference: `Anime.js: SVG drawing; rough-notation`
  - [GitHub: Anime.js](https://github.com/juliangarnier/anime) · [Package / documentation](https://www.npmjs.com/package/animejs)
  - Animate a dash offset to reveal a drawn stroke.
  - Original local preview; library recipe is optional.

```javascript
// Native SVG: pathLength="1" normalizes any stroke length.
// Set stroke-dasharray:1; stroke-dashoffset:1.
// Animate stroke-dashoffset to 0.
// For annotation presets: rough-notation annotate(...).show().
```

- **تحريك وتقريب كين بيرنز / Ken Burns pan & zoom**
  - Exact component/reference: `Original CSS transforms; Motion Canvas: tween`
  - [GitHub: Motion Canvas](https://github.com/motion-canvas/motion-canvas) · [Package / documentation](https://www.npmjs.com/package/@motion-canvas/core)
  - Combine a slow scale and sideways pan for a still scene.
  - Original local preview; library recipe is optional.

```css
/* Original CSS; no dependency or proprietary preset. */
@keyframes panZoom {
  from { transform: scale(1) translateX(-4%); }
  to { transform: scale(1.25) translateX(4%); }
}
.scene { animation: panZoom 8s ease-in-out alternate infinite; }
```

- **اهتزاز وتمايل / Wiggle / wobble**
  - Exact component/reference: `Animate.css: wobble`
  - [GitHub: Animate.css](https://github.com/animate-css/animate.css) · [Package / documentation](https://www.npmjs.com/package/animate.css)
  - Alternate small rotations and translations for a playful wobble.
  - Original local preview; library recipe is optional.

```javascript
// npm install animate.css
import 'animate.css';
// <div className="animate__animated animate__wobble">WIGGLE</div>
// Original demo alternates rotate(-6deg) and rotate(6deg).
```

- **قائمة متحركة / Animated List**
  - Exact component/reference: `magicui: AnimatedList`
  - [GitHub: Magic UI](https://github.com/magicuidesign/magicui) · [Package / documentation](https://magicui.design/docs)
  - Reveal notification items in sequence with a configurable delay.
  - Original local preview; library recipe is optional.

```javascript
// React + shadcn project:
// npx shadcn@latest add @magicui/animated-list
import { AnimatedList } from '@/components/ui/animated-list';
// <AnimatedList delay={900}>
//   <p>Scene ready</p><p>Audio ready</p><p>Export ready</p>
// </AnimatedList>
```

- **تقريب دولي معاكس / Dolly zoom**
  - Exact component/reference: `Three.js: PerspectiveCamera position + fov`
  - [GitHub: Three.js](https://github.com/mrdoob/three.js) · [Package / documentation](https://www.npmjs.com/package/three)
  - Move the camera while adjusting field of view to keep the subject size fixed; background depth changes. CSS preview is a simulation.
  - Original local preview; library recipe is optional.

```javascript
// npm install three
import * as THREE from 'three';
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
// Three.js; camera looks down -Z at a subject at z=0.
const startDistance = 8;
const startFovRadians = THREE.MathUtils.degToRad(50);
const visibleHeight = 2 * startDistance * Math.tan(startFovRadians / 2);
// Each frame, progress is in [0,1]:
const distance = startDistance - 3 * progress;
camera.position.z = distance;
camera.fov = THREE.MathUtils.radToDeg(2 * Math.atan(visibleHeight / (2 * distance)));
camera.updateProjectionMatrix();
// renderer.render(scene, camera); background objects need real depth.
```

## Library source registry

- **React Bits** — [GitHub](https://github.com/DavidHDev/react-bits), [package / documentation](https://reactbits.dev). MIT + Commons Clause; reference only, no vendored code.
- **Magic UI** — [GitHub](https://github.com/magicuidesign/magicui), [package / documentation](https://magicui.design/docs). MIT; component registry, not an assumed npm package.
- **rough-notation** — [GitHub](https://github.com/rough-stuff/rough-notation), [package / documentation](https://www.npmjs.com/package/rough-notation). MIT
- **CountUp.js** — [GitHub](https://github.com/inorganik/countUp.js), [package / documentation](https://www.npmjs.com/package/countup.js). MIT
- **react-countup** — [GitHub](https://github.com/glennreyes/react-countup), [package / documentation](https://www.npmjs.com/package/react-countup). MIT
- **NumberFlow** — [GitHub](https://github.com/barvian/number-flow), [package / documentation](https://www.npmjs.com/package/number-flow). MIT
- **Motion** — [GitHub](https://github.com/motiondivision/motion), [package / documentation](https://www.npmjs.com/package/motion). MIT; free core, optional paid products excluded.
- **Anime.js** — [GitHub](https://github.com/juliangarnier/anime), [package / documentation](https://www.npmjs.com/package/animejs). MIT
- **Three.js** — [GitHub](https://github.com/mrdoob/three.js), [package / documentation](https://www.npmjs.com/package/three). MIT
- **Animate.css** — [GitHub](https://github.com/animate-css/animate.css), [package / documentation](https://www.npmjs.com/package/animate.css). MIT
- **lottie-web** — [GitHub](https://github.com/airbnb/lottie-web), [package / documentation](https://www.npmjs.com/package/lottie-web). MIT; player license does not license every animation asset.
- **Motion Canvas** — [GitHub](https://github.com/motion-canvas/motion-canvas), [package / documentation](https://www.npmjs.com/package/@motion-canvas/core). MIT
- **Remotion** — [GitHub](https://github.com/remotion-dev/remotion), [package / documentation](https://www.npmjs.com/package/remotion). Custom license; some uses require payment. Reference only; excluded from free integration.
- **Original website CSS / JavaScript** — [GitHub](https://github.com/3omarhs/crtv-rarities-dotnet/tree/codex/hostinger-v3/services/motion-effects), [package / documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Original implementations. External sources are references, not runtime dependencies.

React Bits is a component registry, not an assumed npm package named react-bits. Magic UI is not a package named magicu. “shinyminimal” maps conceptually to ShinyText, not a verified alias. Kashida is a shaping-sensitive technique with an original sample implementation, not an attributed library. React Bits license is MIT + Commons Clause. Remotion is research-only, excluded from unconditional free integrations because some uses require payment. CSS camera previews are simulations; Three.js snippets explain actual camera movements. These are web demos and integration recipes, not installable native CapCut plugins. No proprietary editor code/assets or paid services are used.

Registry snippets require an existing configured React/Tailwind/shadcn project; use its generated file path. Plain npm snippets require a bundler. Production setup must pin selected package versions and retain their license notices. React Bits component snippets are install/use guidance rather than copied source. Gallery HTML downloads contain the actual working native implementation and source references.