Kinetic Mobile React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import KineticMobile from "./KineticMobile";

export default function Example() {
  return (
    <KineticMobile
      color={"#d8ad83"}
      secondaryColor={"#919ebc"}
      lineColor={"#a69b8e"}
      background={"#211e20"}
      speed={8}
      paused={false}
      height={420}
    />
  );
}

Using Kinetic Mobile

Use Kinetic Mobile as decorative art in a section or an empty state. Its SVG is hidden from assistive technology, so keep any meaningful message outside the component.

Change the two shape colours independently to match your palette. The sculpture stays inside its reserved height and becomes static when reduced motion is enabled.

Props

Name	Type	Required	Default	Description
color	string	No	"#d8ad83"	Disc and ring colour.
secondaryColor	string	No	"#919ebc"	Lower counterweight colour.
lineColor	string	No	"#a69b8e"	Connecting rod colour.
background	string	No	"#211e20"	Background surface.
speed	number	No	8	Base sway cycle in seconds.
paused	boolean	No	false	Pause all suspended shapes.
height	number \| string	No	420	Reserved height of the sculpture.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.