lkdsgnr

Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.
This plugin uses a Smart Grid Delay logic to detect your layout structure and animate elements naturally, whether they are in a multi-column desktop grid or a single-column mobile view.
<h3>How does it work?</h3>
Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:
<h4>1. Smart Grid Delay logic</h4>
The core of this plugin is the <code>calculateColumnsInGroup</code> algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:
<ul>
<li>Dynamically checks the physical position (<code>offsetTop</code>) of elements.</li>
<li>Detects when a new row begins.</li>
<li>Resets the delay counter for every new row.</li>
<li>Result: Animations look professional and perfectly staggered on any screen size automatically.</li>
</ul>
<h4>2. Performance (Vanilla JS)</h4>
<ul>
<li>Zero Dependencies: No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.</li>
<li>IntersectionObserver API: I use the modern browser API to detect scrolling, which is much more efficient than listening to the <code>scroll</code> event.</li>
<li>GPU Acceleration: CSS properties use <code>will-change</code> to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.</li>
</ul>
<h4>3. Accessibility first</h4>
This plugin automatically respects the user’s operating system preferences.
<ul>
<li>Reduced Motion Support: If a visitor has “Reduce Motion” enabled in their system (Windows, macOS, iOS, Android), the plugin automatically disables all entrance animations to prevent motion sickness.</li>
<li>Inclusive Design: Your site remains compliant with modern web standards without extra work.</li>
</ul>
<h4>4. Developer friendly</h4>
<ul>
<li>No-JS Fallback: If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.</li>
<li>CSS Variables: I moved hardcoded values to CSS Custom Properties (<code>:root</code>). You can globally change animation duration, easing, or distance directly in your theme’s CSS without editing plugin files.</li>
<li>Simple Class System: Just add <code>.shps-animated</code> and an effect class.</li>
</ul>
<h3>Available effects</h3>
<ul>
<li>Slide Up: <code>.shps-slide-up</code> (Classic elegant entrance)</li>
<li>Zoom Out: <code>.shps-zoom-out</code> (Modern scaling effect)</li>
<li>Slide Right: <code>.shps-slide-right</code></li>
<li>Slide Left: <code>.shps-slide-left</code></li>
</ul>
<h3>How to use?</h3>
<ol>
<li>Single Element: Add <code>shps-animated shps-slide-up</code> to any HTML element or Block.</li>
<li>Grid/Group: Wrap elements in a container with class <code>shps-group</code> to enable the Smart Grid Delay.</li>
</ol>
Example HTML:
<pre><code><div class="shps-group">
 <div class="shps-animated shps-slide-up">Card 1</div>
 <div class="shps-animated shps-slide-up">Card 2</div>
 <div class="shps-animated shps-slide-up">Card 3</div>
</div>
</code></pre>
<h3>Manual delays & overrides</h3>
You have two ways to control delays manually if you want to highlight specific items.
Method 1: Helper Classes (Recommended for static HTML)
Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.
<ul>
<li><code>.shps-delay-100</code> (0.1s) … to <code>.shps-delay-1000</code> (1.0s). Numeric values ​​in increments of 100.</li>
</ul>
Method 2: CSS Overrides (Recommended for dynamic loops)
If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific classes to individual items, use CSS with <code>!important</code> to override the inline styles applied by the plugin.
<pre><code>/* Example: Force 3rd item to wait 1 second */
.shps-group .shps-animated:nth-child(3) {
 transition-delay: 1.0s !important;
}
</code></pre>
<h3>Security & privacy</h3>
This plugin is designed to be safe and lightweight:
<ul>
<li>100% GDPR Compliant: No external calls, no tracking, no cookies, and no IP collection.</li>
<li>Zero Dependencies: Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.</li>
<li>Database Free: The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.</li>
<li>Self-Contained: All assets are loaded locally. No reliance on external CDNs.</li>
</ul>

Shapes Smart Scroll Animations

Add high-performance entrance animations with Smart Grid Delay logic. Zero dependencies, GPU accelerated, and Accessibility ready.

Init HTML

Init Chat Engine is a clean and minimal frontend chatbox plugin, designed for homepage or site-wide communication with comprehensive administrative controls.
This plugin is the core user system behind the <a href="https://en.inithtml.com/init-plugin-suite-minimalist-powerful-and-free-wordpress-plugins/" rel="nofollow ugc">Init Plugin Suite</a> – optimized for frontend-first interaction, extensibility, and real-time gamification.
GitHub repository: <a href="https://github.com/brokensmile2103/init-chat-engine" rel="nofollow ugc">https://github.com/brokensmile2103/init-chat-engine</a>
Key Features:
Frontend Experience: 
– Built with 100% REST API and Vanilla JS 
– No jQuery, no bloat – blazing fast 
– Fully embeddable via <code>[init_chatbox]</code> shortcode 
– Guest messaging support (optional) 
– Smart polling system (adaptive 3.5–10s based on activity) 
– Browser notifications when new messages arrive 
– Scroll-up to load history, scroll-down to auto-scroll 
– Optimistic sending & “new message” jump button 
– Clean UI with customizable themes 
– Template override supported (<code>chatbox.php</code>)
Administrative Control: 
– Complete Settings Panel – Basic, Security, and Advanced configurations 
– Message Management – Search, view, delete messages with pagination 
– User Moderation – Ban/unban users by IP or user ID with expiration 
– Rate Limiting – Prevent spam with configurable message limits 
– Word Filtering – Block messages containing prohibited words 
– Statistics Dashboard – View chat activity, user engagement, and trends 
– Cleanup Tools – Automatic and manual cleanup of old messages 
– Custom CSS Support – Full styling customization options
Security & Moderation: 
– IP-based and user-based banning system 
– Configurable rate limiting (messages per minute) 
– Word filtering with custom blocked word lists 
– Message moderation queue (optional) 
– Automatic cleanup of old messages and expired bans 
– Admin override capabilities
Multilingual Ready: 
– Translation-ready with full <code>.pot</code> file included 
– Vietnamese translation included 
– Easy to translate to any language
Perfect for community-based sites, forums, fanpages, manga readers, SaaS dashboards, customer support, or any interactive chat widget.
<h3>Shortcode Attributes</h3>
Shortcode <code>[init_chatbox]</code> supports the following attributes:
<ul>
<li><code>height</code> – Set chat height (e.g., <code>height="400px"</code>)</li>
<li><code>width</code> – Set chat width (e.g., <code>width="100%"</code>)</li>
<li><code>theme</code> – Apply custom theme (e.g., <code>theme="dark"</code>)</li>
<li><code>show_avatars</code> – Override avatar setting (<code>true</code>/<code>false</code>)</li>
<li><code>show_timestamps</code> – Override timestamp setting (<code>true</code>/<code>false</code>)</li>
<li><code>title</code> – Add custom chat title</li>
<li><code>class</code> – Add custom CSS classes</li>
<li><code>id</code> – Set custom container ID</li>
</ul>
Example: <code>[init_chatbox height="500px" title="Community Chat" theme="modern"]</code>
<h3>Filters for Developers</h3>
This plugin provides filters and actions to allow developers to extend word filtering, message processing, and chat behavior without modifying core files.
<code>init_plugin_suite_chat_engine_word_filter_strategy</code> 
Modify word filtering strategy (<code>substring</code>, <code>word</code>, <code>regex</code>). 
Applies to: Message validation 
Params: <code>string $strategy</code>, <code>array $settings</code>, <code>string $message</code>
<code>init_plugin_suite_chat_engine_blocked_words</code> 
Modify the blocked-words list before validation. 
Applies to: Message validation 
Params: <code>array $blocked_words</code>, <code>array $settings</code>, <code>string $message</code>
<code>init_plugin_suite_chat_engine_bypass_filter</code> 
Bypass filtering under custom conditions (VIP, internal users, etc.). 
Applies to: Message validation 
Params: <code>bool $bypass</code>, <code>string $message</code>, <code>WP_User|null $user</code>, <code>array $settings</code>
<code>init_plugin_suite_chat_engine_word_block_hit</code> (action) 
Triggered when a word filter rule blocks a message. 
Applies to: Message validation 
Params: <code>string $blocked_word</code>, <code>string $message</code>, <code>string $strategy</code>
<code>init_plugin_suite_chat_engine_enrich_message_row</code> 
Extend chat message data (add flags, metadata, user info, etc.). 
Applies to: Backend DB → JSON output 
Params: <code>array $message_row</code>, <code>WP_User|null $user</code>
<h3>License</h3>
This plugin is licensed under the GPLv2 or later. 
You are free to use, modify, and distribute it under the same license.

Init Chat Engine – Real-Time, Community, Extensible

A lightweight, real-time community chat system built with REST API and Vanilla JS. No jQuery, no reload. Full admin panel with moderation tools.

Shapes Smart Scroll Animations vs Init Chat Engine – Real-Time, Community, Extensible