Jelly dots

A springy dot grid the pointer drags through like jelly, with click shockwaves.

enhancer
pointer
background
grid
physics
click
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Jelly dots example

Drag the pointer through the dots, or click

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="m-jelly-dots" data-motion="jelly-dots"><p>Drag the pointer through the dots, or click</p></div>

import { JellyDots } from "./motion/react/JellyDots";

<JellyDots>Your content</JellyDots>

<script setup lang="ts">
import JellyDots from "./motion/vue/JellyDots.vue";
</script>

<template>
  <JellyDots>Your content</JellyDots>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "jelly-dots";

The wrappers: JellyDots.tsx (React, TypeScript) and JellyDots.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-gap`	`26`	pixels between dots
`data-motion-size`	`2`	dot radius in pixels
`data-motion-active`	`#f6a04d`	the dots near the pointer and the moving ones
`data-motion-reach`	`120`	the pointer's reach in pixels
`data-motion-shock`	`true`	a click sends a shockwave

One canvas behind the content, with frames only while dots move; it stops when they settle, off screen and in hidden tabs. The colors follow the page's light or dark theme. Touch: a tap sends the shockwave and a drag moves the dots until the page scrolls. Reduced motion: the dots stay still and only light up near the pointer. Decorative: hidden from screen readers.

Size

jelly-dots.js is 2.4 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.