KineticHub – Animated Blocks

توضیحات

کینتیک‌هاب یک مجموعه سبک از بلوک‌های متحرک گوتنبرگ است که برای طراحان، آژانس‌ها، توسعه‌دهندگان و سازندگان سایت طراحی شده تا بتوانند بدون خروج از ویرایشگر بلوک وردپرس، انیمیشن، رسانه و افکت‌های تعاملی رابط کاربری را به صفحات سایت خود اضافه کنند.

این افزونه شامل بلوک‌های بصری برای تایپوگرافی متحرک، ویدئوهای مودال، پخش‌کننده‌های صوتی، مقایسه قبل و بعد تصاویر، متن‌های مارکی (روان)، دکمه‌های تعاملی، پس‌زمینه‌های هیرو، جداکننده‌های اسکرول، چیدمان‌های اسکرول دو بخشی، لیست‌های نمایشی با افکت حرکت موس، جلوه‌های بصری محیطی و کانتینرهای آماده برای انیمیشن است.

کینتیک‌هاب برای گردش کار مدرن وردپرس طراحی شده است. بلوک‌ها را می‌توان مستقیماً در ویرایشگر اضافه، پیکربندی و دوباره استفاده کرد، در حالی که فایل‌های موردنیاز بخش نمایش سایت از طریق سیستم بارگذاری دارایی‌های بلوک وردپرس بارگذاری می‌شوند.

از کینتیک‌هاب برای ساخت موارد زیر استفاده کنید:

  • بخش‌های متحرک صفحه فرود (Landing Page)
  • صفحات پورتفولیو و آژانس‌ها
  • بخش‌های هیرو (Hero) تعاملی
  • معرفی و برجسته‌سازی محصولات و خدمات
  • چیدمان‌های محتوایی همراه با انیمیشن.
  • صفحات گوتنبرگ با محتوای رسانه‌ای غنی.
  • افکت‌های بصری سبک، بدون نیاز به صفحه‌ساز.

دموها و مستندات را از آدرس زیر مشاهده کنید:

https://getkinetichub.com

کینتیک‌هاب شامل ۱۲ بلوک گوتنبرگ است. فهرست کامل بلوک‌ها در بخش «بلوک‌ها» در ادامه قابل مشاهده است.

متمرکز بر عملکرد (Performance)

کینتیک‌هاب به‌گونه‌ای طراحی شده است که از افزایش غیرضروری حجم صفحات و اجرای کدهای اضافی در بخش نمایش سایت جلوگیری کند.

  • فایل‌های مربوط به بلوک‌ها از طریق سیستم ثبت دارایی‌های بلوک در وردپرس بارگذاری می‌شوند.
  • رفتارهای اجرایی مشترک توسط فایل‌های سبک سمت فرانت‌اند مدیریت می‌شوند.
  • در صورت پشتیبانی توسط تنظیمات بلوک، ویدئوهای جاسازی‌شده تنها پس از تعامل کاربر و به‌صورت بارگذاری تنبل (Lazy Load) اجرا می‌شوند.
  • افکت‌های سنگین مبتنی بر حرکت، به ترجیحات کاربر برای کاهش حرکت (Reduced Motion) احترام می‌گذارند.
  • تنظیمات کلی حرکت (Motion) از طریق پیشخوان کینتیک‌هاب قابل پیکربندی هستند.
  • بلوک‌ها به‌گونه‌ای طراحی شده‌اند که با قالب‌های مدرن وردپرس و ابزارهای بهینه‌سازی عملکرد سازگار باشند.

دسترسی‌پذیری

کینتیک‌هاب در تمام بلوک‌های پشتیبانی‌شده، رفتارهای سازگار با دسترس‌پذیری را در نظر گرفته است.

  • پشتیبانی از حالت «کاهش حرکت» (Reduced Motion) برای کاربرانی که ترجیح می‌دهند انیمیشن کمتری مشاهده کنند.
  • مدیریت فوکوس کیبورد در بخش‌هایی که از کنترل‌های تعاملی استفاده شده است.
  • متن جایگزین سازگار با صفحه‌خوان برای تایپوگرافی متحرک.
  • برچسب‌های ARIA برای کنترل‌های مودال ویدئو.
  • خروجی معنایی و رندر سمت سرور به‌صورت امن (با escape شدن داده‌ها).
  • بلوک‌های تعاملی به‌گونه‌ای طراحی شده‌اند که بدون وابستگی صرف به انیمیشن نیز قابل استفاده و کاربردی باشند.

سرویس‌های خارجی

افزونه هنگام فعال‌سازی به هیچ سرویس خارجی متصل نمی‌شود.

برخی از بلوک‌ها تنها زمانی محتوای رسانه‌ای سرویس‌های شخص ثالث را بارگذاری می‌کنند که مدیر سایت محتوایی را با استفاده از آن سرویس‌ها پیکربندی کرده باشد. برای مثال، بلوک «ویدئوی مودال کینتیک‌هاب» می‌تواند در صورتی که مدیر سایت یک آدرس YouTube یا Vimeo وارد کند، ویدئوهای یوتیوب یا ویمئو را به‌صورت جاسازی‌شده نمایش دهد.

ممکن است سرویس‌های شخص ثالث هنگام بارگذاری رسانه‌های جاسازی‌شده توسط مرورگر، داده‌های بازدیدکننده را دریافت کنند. این موضوع به آدرس رسانه تنظیم‌شده، سرویس ارائه‌دهنده استفاده‌شده و رفتار مرورگر کاربر بستگی دارد.

ارائه‌دهندگان ویدئوی اختیاریِ پشتیبانی‌شده شامل موارد زیر هستند:

  • یوتیوب
  • یوتیوب بدون کوکی
  • ویمئو

همچنین می‌توان از فایل‌های رسانه‌ای میزبانی‌شده روی هاست خود سایت استفاده کرد.

نقاط دسترسی (endpoint) ارائه‌دهنده که در صورت تنظیم توسط مدیر سایت ممکن است استفاده شوند:

  • YouTube video embeds: https://www.youtube.com/
  • جاسازی‌های یوتیوب با حریم خصوصی تقویت‌شده: https://www.youtube-nocookie.com/
  • تصاویر بندانگشتی یوتیوب: https://img.youtube.com/
  • جاسازی ویدئوهای Vimeo: https://player.vimeo.com/

سیاست‌های ارائه‌دهنده:

  • شرایط استفاده از خدمات یوتیوب: https://www.youtube.com/t/terms
  • سیاست حریم خصوصی یوتیوب: https://policies.google.com/privacy
  • شرایط استفاده از خدمات Vimeo: https://vimeo.com/terms
  • سیاست حریم خصوصی Vimeo: https://vimeo.com/privacy

کد منبع

این افزونه شامل فایل‌های JavaScript و CSS کامپایل‌شده است که با استفاده از npm و ابزارهای ساخت وردپرس تولید شده‌اند.

فایل‌های سورس نسخه رایگان که برای ساخت فایل‌های نهایی افزونه استفاده شده‌اند، به‌صورت عمومی در اینجا در دسترس هستند:

https://github.com/GetKineticHub/kinetichub-free-source/tree/wporg-free-source-1.0.14

شاخه سورس عمومی شامل فایل‌های سورس کامپایل‌نشده نسخه رایگان، فایل package.json، تنظیمات webpack و دستورالعمل‌های ساخت برای فایل‌های JavaScript و CSS است که در پوشه build/ نسخه نهایی قرار می‌گیرند.

دستورالعمل‌های ساخت

این افزونه از خط لوله استاندارد ساخت بلوک‌های وردپرس بر پایه @wordpress/scripts استفاده می‌کند.

برای بازسازی فایل‌های نهایی از شاخه سورس عمومی:

  1. مخزن عمومی سورس را کلون کنید.
  2. شاخه منبع مرتبط را بررسی کنید:

    wporg-free-source-1.0.14

  3. وابستگی‌های موردنیاز برای ساخت را نصب کنید:

    اجرای دستور نصب: npm install

  4. تولید فایل‌های نهایی (Production):

    اجرای دستور ساخت (Build): npm run build

فرآیند ساخت، فایل‌های سورس را از مخزن اصلی با استفاده از تنظیمات webpack موجود کامپایل کرده و در پوشه build قرار می‌دهد.

الزامات نصب

  • Node.js نسخه ۱۸ یا بالاتر
  • npm نسخه ۹ یا بالاتر

عکس‌های صفحه

بلوک‌ها

این افزونه 12 بلوک ارائه می‌دهد.

  • Kinetic Ambient Aura Static decorative ambient glow effect rendered server-side.
  • Kinetic Box Structured container block with motion-ready layout and hover interaction controls.
  • Kinetic Video Modal Enterprise-ready video container with graceful lazy loading, inline playback, and strict URL safelists.
  • Kinetic Split Scroll Split-screen layout with sticky scrolling media, synchronized text, and hardware-accelerated physics.
  • Kinetic Marquee Infinite scrolling marquee optimized for logos and images with hardware-accelerated physics.
  • Kinetic Hero Mesh Full-width hero section with an animated generative canvas background and layered content.
  • Kinetic Before/After Interactive image comparison slider with CSS-based masking and hardware-accelerated transitions.
  • Kinetic Magnetic Button High-performance magnetic button with advanced hover physics, glassmorphism, and dynamic scaling.
  • Kinetic Cursor Reveal Interactive list with floating media reveals and cursor-following previews.
  • Kinetic Audio Player Ultra-optimized Gutenberg audio player with waveform, seek controls, and accessible playback UI.
  • Kinetic Scroll Divider Server-rendered animated divider with strict validation and graceful degradation.
  • Kinetic Typography Animated headline block with character splitting and scroll-triggered text effects.

نصب

  1. کینتیک‌هاب را از مخزن افزونه‌های وردپرس نصب کنید یا پوشه افزونه را در مسیر /wp-content/plugins/ بارگذاری کنید.
  2. افزونه را از طریق صفحه «افزونه‌ها» در وردپرس فعال کنید.
  3. ویرایشگر بلوک وردپرس را باز کنید و عبارت «Kinetic» را جستجو کنید تا یکی از بلوک‌های کینتیک‌هاب را اضافه کنید.
  4. از پیشخوان کینتیک‌هاب در بخش مدیریت وردپرس استفاده کنید تا تنظیمات کلی و وضعیت فعال بودن بلوک‌ها را پیکربندی کنید.

سوالات متداول

آیا کینتیک‌هاب با ویرایشگر بلوک وردپرس (گوتنبرگ) سازگار است؟

بله. کینتیک‌هاب برای ویرایشگر بلوک وردپرس (گوتنبرگ) طراحی شده است. بلوک‌های موجود را می‌توانید مستقیماً در گوتنبرگ اضافه و تنظیم کنید.

آیا کینتیک‌هاب به یک صفحه‌ساز نیاز دارد؟

خیر. کینتیک‌هاب به‌صورت مستقیم با ویرایشگر بلوک وردپرس (گوتنبرگ) کار می‌کند و نیازی به صفحه‌ساز جداگانه ندارد.

آیا افزونه هنگام فعال‌سازی به سرویس‌های خارجی متصل می‌شود؟

خیر. کینتیک‌هاب هنگام فعال‌سازی به هیچ سرویس خارجی متصل نمی‌شود.

یوتیوب یا ویمئو چه زمانی بارگذاری می‌شوند؟

یوتیوب یا ویمئو فقط زمانی بارگذاری می‌شوند که مدیر سایت، یک بلوک را با آدرس YouTube یا Vimeo پیکربندی کرده باشد. نحوه بارگذاری به نوع بلوک، سرویس انتخاب‌شده و رفتار مرورگر بازدیدکننده بستگی دارد.

آیا می‌توانم از رسانه‌های میزبانی‌شده روی هاست خودم استفاده کنم؟

بله. بلوک‌های رسانه‌ای پشتیبانی‌شده، در صورت نیاز، می‌توانند از فایل‌های رسانه‌ای میزبانی‌شده روی سایت شما استفاده کنند.

آیا این افزونه باعث کاهش سرعت سایت من خواهد شد؟

کینتیک‌هاب به‌گونه‌ای طراحی شده است که فایل‌های موردنیاز بلوک‌ها را از طریق سیستم بارگذاری دارایی‌های بلوک در وردپرس بارگذاری کند و از ایجاد بار اضافی و غیرضروری در بخش نمایش سایت جلوگیری کند. عملکرد نهایی افزونه به تعداد بلوک‌های استفاده‌شده، طراحی صفحه، حجم فایل‌های رسانه‌ای، هاست، قالب و سایر افزونه‌های فعال بستگی دارد.

آیا می‌توانم بلوک‌هایی را که استفاده نمی‌کنم غیرفعال کنم؟

بله. پیشخوان کینتیک‌هاب دارای بخش مدیریت بلوک‌ها است و به مدیران سایت این امکان را می‌دهد که بلوک‌های در دسترس را مدیریت کنند.

آیا کینتیک‌هاب از قابلیت «کاهش حرکت» (Reduced Motion) پشتیبانی می‌کند؟

بله. افکت‌های حرکتی کینتیک‌هاب از تنظیمات «کاهش حرکت» (Reduced Motion) دستگاه یا مرورگر کاربر پشتیبانی می‌کنند تا افرادی که ترجیح می‌دهند انیمیشن کمتری ببینند، تجربه راحت‌تری داشته باشند.

آیا می‌توانم از چند بلوک کینتیک‌هاب در یک صفحه استفاده کنم؟

بله. کینتیک‌هاب به‌گونه‌ای طراحی شده است که از چندین بلوک در یک صفحه پشتیبانی می‌کند. برای دستیابی به بهترین عملکرد، از رسانه‌های بهینه استفاده کنید و از به‌کارگیری بیش از حد افکت‌های سنگین در یک صفحه خودداری کنید.

دموها را از کجا می‌توانم مشاهده کنم؟

دموها و مستندات در آدرس زیر در دسترس هستند:

https://getkinetichub.com

نقد و بررسی‌ها

2 جولای 2026
We used KineticHub on a new client site we recently built and the result speaks for itself. The animated Gutenberg blocks are smooth and tasteful — they give the site a genuinely modern, techy feel without ever tipping into gimmicky. Our client absolutely loves them. What impressed us most from a developer standpoint is that it’s done right: the code is clean, and there’s no measurable hit to page load speed or Google’s Core Web Vitals. That’s rare for an animation plugin, and it’s exactly what you want when you care about performance as much as presentation. Big thanks to the KineticHub team — highly recommended.
30 ژوئن 2026
Really nice plugin for adding animated sections to WordPress without using a full page builder. The blocks are easy to work with, the effects look modern, and everything feels well integrated with Gutenberg. The Typography, Hero Mesh, Marquee, and Video Modal blocks are especially useful for landing pages and client websites. Great start and looking forward to future updates.
خواندن تمامی 2 نقد و بررسی‌

توسعه دهندگان و همکاران

“KineticHub – Animated Blocks” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند.

مشارکت کنندگان

ترجمه “KineticHub – Animated Blocks” به زبان شما.

علاقه‌ مند به توسعه هستید؟

کد را مرور کنید، مخزن SVN را بررسی کنید، یا از طریق RSS در گزارش توسعه مشترک شوید.

گزارش تغییرات

1.0.14

  • Improved Kinetic Box compatibility with nested fixed-position content by removing an unnecessary persistent 3D rendering context.
  • Fixed Hero Mesh so valid markup from nested blocks, including SVG and canvas content, is preserved correctly.
  • Fixed the Magnetic Button extended hover area intercepting clicks on the Gutenberg block appender.
  • Improved Cursor Reveal viewport clamping so floating previews remain within the visible page area.
  • Improved Scroll Divider and Magnetic Button lifecycle handling when blocks are dynamically removed and reinserted.
  • Improved Kinetic Typography cleanup after entry animations complete.
  • Improved block inserter descriptions so they accurately describe the features available in KineticHub Free.
  • Added a usage-gated, permanently dismissible WordPress.org review request after the plugin has been used for a while.
  • Improved uninstall cleanup so KineticHub-owned settings are removed correctly.

1.0.13

  • Fixed: full-width Hero Mesh produced a horizontal scrollbar on themes defining root padding when placed outside a padded container.
  • Fixed: full-width Kinetic Typography could overflow or misalign on themes defining root padding when placed outside a padded container; migrated to the same padding-aware full-width technique used by Hero Mesh.
  • Fixed: Cursor Reveal’s Wide and Full width alignment options had no visible effect due to missing CSS.
  • Fixed: the floating hover preview could extend past the viewport edge and cause a horizontal scrollbar on full-width layouts.
  • Fixed: Kinetic Typography’s hover-triggered Plexus background effect could accumulate duplicate window resize listeners on repeated hover.
  • Fixed: Hero Mesh’s grain animation and Classic background mode did not fully respect the operating system’s reduced-motion preference.

1.0.12

  • Fixed a remaining Hero Mesh alignfull horizontal overflow that could add a small horizontal scrollbar on some Windows browsers, while preserving full-width behavior at the page root and contained behavior inside Kinetic Box and columns.

1.0.11

  • Fixed Hero Mesh overflow when an alignfull Hero Mesh block is placed inside constrained containers such as Kinetic Box or columns, while preserving normal full-width behavior when used directly in the page.
  • Improved Hero Mesh contained rendering by removing unnecessary isolation and keeping Gradient/Blobs motion proportional in smaller containers.
  • Reduced Hero Mesh viewport cold-start margin to improve scroll/interaction smoothness near visibility thresholds.

1.0.10

  • Fixed a Hero Mesh layout regression where the block could overflow constrained containers such as columns, groups, and demo cards.
  • Softened the Hero Mesh Film Grain Noise effect so it is less visually aggressive by default.
  • Kept full-width Hero Mesh behavior scoped to alignfull layouts.

1.0.9

  • Fixed Hero Mesh canvas layout behavior to prevent layout shift and ensure block styles enqueue correctly.
  • Added block asset metadata validation to prevent stale block asset versions and missing file references.
  • Improved Typography accessibility by preserving readable screen-reader text without unsupported ARIA attributes.
  • Fixed editor iframe stylesheet loading for global KineticHub variables and animation styles.
  • Improved Split Scroll pagination dot touch targets and keyboard focus behavior.
  • Added Magnetic Button editor warnings for low-contrast color choices and optional accessible color presets.

1.0.8

  • Fixed Typography wrapping in narrow containers when using split text animations.
  • Improved Typography spacing between split words and ampersand characters.
  • Improved Typography SEO notice spacing in the editor.
  • Restored Cursor Reveal mask animation behavior.
  • Added list layout controls to Cursor Reveal.
  • Fixed Magnetic Button hover scale conflicts with Float, Lift Up, and Scale Up effects.
  • Fixed Kinetic Box grayscale-to-color hover transition behavior.
  • Normalized upgrade messaging across block controls.
  • Added a lightweight KineticHub Pro dashboard banner for the free plugin.

1.0.7

  • Fixed Magnetic Button SVG icon scaling and added left, center, and right alignment.
  • کنترل‌های کاربردی Cursor Reveal در نسخه رایگان بازیابی شده‌اند، از جمله تایپوگرافی واکنش‌گرا، استایل‌دهی زیرنویس، اندازه‌بندی رسانه، ماسک‌های نمایشی، فیلترهای هاور و یک بزرگ‌نمایی نسبی و ملایم هنگام هاور.
  • Balanced Scroll Divider vertical spacing.
  • Added Split Scroll media reordering and restored compatibility with third-party nested blocks.
  • Improved the Audio Player Extended layout on smaller screens.

1.0.6

  • Fixed unexpected output during activation caused by UTF-8 BOM characters in the plugin bootstrap file.

1.0.5

  • Improved Split Scroll mobile inline media layout when sticky media on mobile is disabled.
  • Improved Split Scroll mobile media grouping so each media item stays with its related content section.
  • Reduced large spacer gaps in Split Scroll mobile inline mode.

1.0.4

  • Fixed Magnetic Button icon clipping and hover layer rendering issues.
  • Fixed Kinetic Box nested block rendering by preserving valid child block markup such as canvas and SVG elements.
  • Fixed Hero Mesh, Before/After Slider, and other visual child blocks when nested inside Kinetic Box.
  • Fixed Split Scroll mobile media fallback when sticky media on mobile is disabled.
  • Updated selected block preview images.

1.0.2

  • Fixed a WordPress.org package bootstrap issue that could require a missing vendor dependency on activation.

1.0.1

  • Updated the plugin display name for clearer branding in the WordPress Plugins screen.
  • Improved the WordPress.org readme content and formatting.

1.0.0

  • نخستین انتشار پایدار.
  • Added 12 Gutenberg blocks.
  • Added contextual block asset loading.
  • Added reduced-motion handling for motion-heavy effects.
  • Added KineticHub dashboard for global settings and block management.
  • Added source files and build instructions for WordPress.org distribution.