Cube field

Outlined 3D cubes turn to face the pointer, spin when swept and ripple on click.

enhancer
pointer
background
3d
grid
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

Cube field example

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-cube-field" data-motion="cube-field"></div>

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

<CubeField>Your content</CubeField>

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

<template>
  <CubeField>Your content</CubeField>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "cube-field";

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

Options

Attribute	Default	What it does
`data-motion-size`	`56`	grid cell in pixels (each cube is a little over half of it)
`data-motion-active`	`#f6a04d`	cubes near the pointer and in a ripple
`data-motion-idle`	`true`	a slow wave while no pointer is near

One canvas behind the content. Cubes spin to the nearest quarter turn, so a spin always lands square. Frames run only while the box is on screen and the tab is visible. Touch: a tap sends the ripple and the cubes turn toward it. Reduced motion: the cubes stand still at a three-quarter view. Decorative: hidden from screen readers.

Size

cube-field.js is 2.5 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.