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.
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
Get Kinetic: Elements Store
Happy to chat — features, ideas, feedback all welcome. Thanks for the support!
— Massimo