lkdsgnr

<p>Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.</p>
<p>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.</p>
<h3>How does it work?</h3>
<p>Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:</p>
<h4>1. Smart Grid Delay logic</h4>
<p>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:</p>
<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><strong>Zero Dependencies:</strong> No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.</li>
<li><strong>IntersectionObserver API:</strong> I use the modern browser API to detect scrolling, which is much more efficient than listening to the <code>scroll</code> event.</li>
<li><strong>GPU Acceleration:</strong> 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>
<p>This plugin automatically respects the user’s operating system preferences.</p>
<ul>
<li><strong>Reduced Motion Support:</strong> 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><strong>Inclusive Design:</strong> Your site remains compliant with modern web standards without extra work.</li>
</ul>
<h4>4. Developer friendly</h4>
<ul>
<li><strong>No-JS Fallback:</strong> If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.</li>
<li><strong>CSS Variables:</strong> 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><strong>Simple Class System:</strong> Just add <code>.shps-animated</code> and an effect class.</li>
</ul>
<h3>Available effects</h3>
<ul>
<li><strong>Slide Up:</strong> <code>.shps-slide-up</code> (Classic elegant entrance)</li>
<li><strong>Zoom Out:</strong> <code>.shps-zoom-out</code> (Modern scaling effect)</li>
<li><strong>Slide Right:</strong> <code>.shps-slide-right</code></li>
<li><strong>Slide Left:</strong> <code>.shps-slide-left</code></li>
</ul>
<h3>How to use?</h3>
<ol>
<li><strong>Single Element:</strong> Add <code>shps-animated shps-slide-up</code> to any HTML element or Block.</li>
<li><strong>Grid/Group:</strong> Wrap elements in a container with class <code>shps-group</code> to enable the Smart Grid Delay.</li>
</ol>
<p><strong>Example HTML:</strong></p>
<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>
<p>You have two ways to control delays manually if you want to highlight specific items.</p>
<p><strong>Method 1: Helper Classes (Recommended for static HTML)</strong></p>
<p>Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.</p>
<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>
<p><strong>Method 2: CSS Overrides (Recommended for dynamic loops)</strong></p>
<p>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.</p>
<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>
<p>This plugin is designed to be safe and lightweight:</p>
<ul>
<li><strong>100% GDPR Compliant:</strong> No external calls, no tracking, no cookies, and no IP collection.</li>
<li><strong>Zero Dependencies:</strong> Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.</li>
<li><strong>Database Free:</strong> The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.</li>
<li><strong>Self-Contained:</strong> 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.

Jacob Orbach

<p>GhostChat is a lightweight, privacy-focused live chat widget for WordPress. Reply from Gmail, the mobile PWA, or the dashboard — your choice.</p>
<p><strong>Why GhostChat?</strong></p>
<ul>
<li><strong>~10KB widget</strong> – 20-35x smaller than tawk.to, Crisp, Tidio, LiveChat</li>
<li><strong>Zero tracking, zero cookies</strong> – No cookie banners needed</li>
<li><strong>15-30ms latency</strong> – Edge-powered global delivery</li>
<li><strong>Gmail threading</strong> – Reply from your inbox, conversations stay in sync</li>
<li><strong>WooCommerce auto-integration</strong> – Page context on all plans, cart context on Pro & Business</li>
<li><strong>Real-time messaging</strong> – Instant customer replies</li>
<li><strong>CRM Lite</strong> – Built-in contacts, conversation history, and notes</li>
<li><strong>Team support</strong> – Invite agents, assign conversations (Business plan)</li>
<li><strong>Webhooks & Bot Agent API</strong> – Integrate with your stack (Pro & Business)</li>
<li><strong>Auto-translate</strong> – 133+ languages, real-time visitor message translation (Pro & Business)</li>
<li><strong>Canned responses</strong> – Save time with pre-written replies</li>
<li><strong>Mobile PWA dashboard</strong> – Reply from your phone like WhatsApp</li>
<li><strong>GDPR-friendly</strong> – No cookies, no tracking, no consent banner needed</li>
<li><strong>Easy setup</strong> – Takes 30 seconds to configure</li>
</ul>
<p><strong>How it works:</strong></p>
<ol>
<li>Sign up free at <a href="https://app.ghostchat.dev/signup" rel="nofollow ugc">GhostChat</a></li>
<li>Create a site and get your Site ID</li>
<li>Enter your Site ID in the plugin settings</li>
<li>The chat widget appears on your site automatically</li>
</ol>
<p><strong>Pricing:</strong></p>
<ul>
<li><strong>Free (forever)</strong>: 1 site, 30-day history, unlimited canned responses, no credit card required</li>
<li><strong>Pro ($5/mo)</strong>: 3 sites, 1-year history, business hours, visitor context & page journey, WooCommerce cart context, CSV export, webhooks, Bot Agent API, auto-translate (133+ languages)</li>
<li><strong>Business ($25/mo)</strong>: Everything in Pro plus 10 sites, unlimited history, team (up to 5 agents), remove GhostChat branding, priority support</li>
</ul>
<p><strong>Perfect for:</strong></p>
<ul>
<li>Small businesses</li>
<li>Freelancers</li>
<li>E-commerce stores</li>
<li>Support teams</li>
<li>Anyone who values privacy and performance</li>
</ul>
<p><strong>WooCommerce Integration:</strong></p>
<p>Running a WooCommerce store? The plugin auto-detects WooCommerce and sends your agents real-time context — zero configuration required. Your agents see:</p>
<ul>
<li>Page type, product name, cart items, total, and item count — <strong>Pro & Business</strong></li>
<li>Custom data via <code>GhostChat.setContext()</code> — <strong>Pro & Business</strong></li>
<li>Updates in real-time on AJAX cart changes</li>
</ul>
<h3>Privacy Policy</h3>
<p>GhostChat does not collect, store, or transmit any personal data from your WordPress site. The plugin only:</p>
<ul>
<li>Stores your Site ID in your WordPress database (wp_options table)</li>
<li>Loads the chat widget script from api.ghostchat.dev</li>
<li>When WooCommerce is active, sends page context and cart data (page type, product name, items, total, count) on Pro and Business plans, and custom setContext() data on Pro and Business plans</li>
<li>Does not set any cookies</li>
<li>Does not track visitors</li>
<li>Does not send any data to third parties besides the GhostChat service</li>
</ul>
<p>Chat conversations are handled by GhostChat service. Please review GhostChat’s privacy policy at https://ghostchat.dev/privacy for details on how chat data is handled.</p>
<h3>Support</h3>
<p>Need help? We’re here for you:</p>
<ul>
<li>Email: jacob@ghostchat.dev</li>
<li>WordPress Setup Guide: https://ghostchat.dev/chat-widget-for-wordpress</li>
<li>Dashboard: https://app.ghostchat.dev</li>
<li>Website: https://ghostchat.dev</li>
</ul>
<h3>About GhostChat</h3>
<p>GhostChat is a privacy-first live chat platform that prioritizes page speed and visitor privacy. We believe live chat shouldn’t slow down your site or compromise your visitors’ privacy.</p>
<p>Learn more at <a href="https://ghostchat.dev" rel="nofollow ugc">ghostchat.dev</a></p>


GhostChat

Lightweight live chat (~10KB) for WordPress. Reply from Gmail. Zero tracking, zero cookies, GDPR-friendly.

Shapes Smart Scroll Animations vs GhostChat