# 🎉 Introducing Kinetic — physics, interactions, and animated canvas effects for your Elements pages **URL:** \ **Category:** Elements Store\ **Tags:** animation, physics\ **Created:** [April 24, 2026, 1:28pm UTC](https://forums.realmacsoftware.com/t/introducing-kinetic-physics-interactions-and-animated-canvas-effects-for-your-elements-pages/55860 "2026-04-24T13:28:09Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Massimo](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/massimo/32/25456_2.png) [@Massimo](https://forums.realmacsoftware.com/u/Massimo)\ **Post date:** [April 24, 2026, 1:28pm UTC](https://forums.realmacsoftware.com/t/introducing-kinetic-physics-interactions-and-animated-canvas-effects-for-your-elements-pages/55860/1 "2026-04-24T13:28:09Z")
Hi everyone 👋 Super excited to share Kinetic — my most ambitious Elements component to date, now live on the store. Kinetic brings cursor-driven interactions, physics, animated canvas effects, and custom cursors to any section of your page, all from a single component. A bullet list can only take you so far with something this visual — **please do have a look at the live demo linked below** to get a real feel for what it does. [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/9/b91f710f2a6751e0d01cb2a93209c48b59a9ac6b.jpeg "Kinetic for Elements") ](https://www.youtube.com/watch?v=peSm0qDZaLI) ## 4 Item Sources Kinetic can animate different kinds of content — pick the one that fits your workflow: • **Custom Items** — configure items inside Kinetic’s own collection (position, size, color). Ideal for decorative clouds, logo grids, or fully controlled compositions. • **Auto Shapes** — tell Kinetic how many shapes (square, circle, triangle, rectangle, pill, or random) you want and it generates and distributes them automatically. Great for quick hero scenes. • **Text Split** — target any text element with a CSS class and Kinetic will turn every single letter into a physics body. Headings that scatter on drag, words that tilt in 3D, letters that fall and pile up — it all works out of the box. • **Set Item by Class** — drop any native Elements component (Container, Image, Text, Button…) into the Kinetic dropzone, add the `kinetic-item` class, and Kinetic adopts it without touching its internal structure. Full design freedom, full effect power. ## 4 Interaction Modes Once your items are in place, they react to the cursor according to the mode you pick: • **Attract to Cursor** — items gently follow the cursor within a configurable radius • **Repel from Cursor** — items push away from the cursor • **Gravity** — full Matter.js physics: items fall, collide, bounce, and pile up realistically. Multiple start modes (Drop / Drop from Outside / Settled / Static), optional Drag & Snap Back, cursor that can act as an invisible physical body, and collision-aware obstacles. • **3D Tilt** — cards and images tilt in space following the cursor, with configurable perspective, damping, and an optional glare sweep across their surface. Each mode has its own set of controls — you’ll see only what’s relevant to the mode you’ve chosen. ## 4 Auto Layout Presets When you have a bunch of Custom Items, positioning each one by hand is a chore. Auto Layout distributes them for you with these presets: • **Circle / Oval** — items arranged on a circle or ellipse • **Cloud** — soft, organic cluster • **Random** — scattered with controlled bounds • **Grid** — regular rows and columns Spread, rotation, and (optionally) animated rotation are all configurable. ## Canvas Effects In parallel with the items, Kinetic can render an animated canvas behind or around them: • **Connection Lines** — lines drawn between nearby items, with opacity that fades with distance. Turns a scatter of items into a living constellation. • **Mesh Grid** — a grid of lines (square or triangle cells) that warps near the cursor. • **Starfield** — a scattered field of stars with varying size and brightness, with optional twinkle animation and 3D warp flight. Canvas effects work alongside any interaction mode — physics + connection lines, 3D tilt + mesh grid, and so on. ## 7 Custom Cursors Replace the system cursor inside the Kinetic area with one of seven fully configurable variants: • **Glow** — soft radial glow around the pointer • **Ring** — hollow ring • **Solid** — solid disc • **Dot** — small precise dot • **Pulse** — animated pulsing disc • **Ripple (Border)** — expanding hollow ring trail • **Ripple (Solid)** — expanding filled disc trail Size, colors, and behavior are all configurable per cursor type. ## Animation and scroll-aware extras Kinetic has a set of features that make entrances and scrolling feel intentional: • **Stagger Entrance** — items fade, scale, slide, zoom, or bounce into view progressively. Can start on page load, or on scroll when Kinetic crosses a chosen viewport line. • **Idle Animation** — items gently float when no interaction is happening. Intensity is configurable, rotation can be locked, and hover behavior can be set to pause or keep active. • **Scroll Force** — items react to page scroll speed. Faster scrolling applies stronger force — pages feel physically alive. ## Control Kinetic from anywhere on the page Kinetic exposes a set of utility CSS classes you apply to any element on the page to control its state or mark elements as physics-aware: **Item markers (inside the Content dropzone):** • **`kinetic-item`** — makes the element a kinetic item that responds to physics and interactions • **`kinetic-item-locked`** — turns the element into a fixed obstacle that other items collide with (Gravity mode) • **`kinetic-item-no-drag`** — element participates in physics but can’t be dragged (Gravity mode) • **`kinetic-item-ignore`** — element is excluded from physics (Gravity mode) **Runtime controls (anywhere on the page):** • **`kinetic-pause`** — pauses all animations, physics, and effects • **`kinetic-resume`** — resumes after a pause • **`kinetic-toggle`** — flips between paused and running states • **`kinetic-reset`** — smoothly animates items back to their original positions Perfect for tying Kinetic’s behavior to modals, buttons, clicks, custom events — anywhere on the page. ## A note on mobile Many of Kinetic’s effects — 3D Tilt, Attract/Repel, Custom Cursors, cursor-reactive Canvas Effects — are driven by cursor position, and there’s no natural equivalent on touch devices. For that reason, the live demos intentionally disable Kinetic below the md breakpoint: it keeps mobile pages fast and removes motion that would feel out of place without a cursor. You can set this threshold per instance, or leave Kinetic enabled everywhere if your use case supports it — the Gravity physics modes (drag, snap back, collisions) still work with touch. ## Perfect for • Hero sections that need personality beyond a static image • Portfolio galleries with 3D tilt or magnetic cards • Product pages where interactive reveals sell the product • Typographic headlines where letters become a playground • Interactive storytelling (about, team, process pages) • Any moment where “static is forgettable” ## Links 👉 **Live demo:** [Kinetic for Elements - Home - RW Pro Space](https://www.rwpro.space/preview/kinetic/) 👉 **Get Kinetic** : **[Elements Store](elementsapp://storeProduct/space.rwpro.kinetic)** Happy to chat — features, ideas, feedback all welcome. Thanks for the support! — Massimo