Arrange a room, at any zoom

Zoom the floor plan in or out, then drag the sofa, the table and the lamp about: each stays under your pointer, and inside the room.

With Wardic: Solid 1 · Solid 2

Live demo

Zoom100%

Sofa

Table

Lamp

Reduced motion: Nothing changes: a piece follows your pointer, and nothing moves by itself.

Beside Wardic

Motion's correctParentTransform takes a React ref to the plan; Wardic's takes the element, or an accessor of it.

The code

examples/arrange-room/Demo.tsx

"use client"
import { correctParentTransform, m, MotionConfig } from "motion/react"
import { useRef, useState } from "react"

const PIECES = [
  { id: "sofa", name: "Sofa", x: 24, y: 24, width: 120, height: 52 },
  { id: "table", name: "Table", x: 64, y: 112, width: 72, height: 44 },
  { id: "lamp", name: "Lamp", x: 236, y: 32, width: 44, height: 44 },
] as const

export default function ArrangeRoom() {
  // The plan is zoomed with a CSS transform, so the pointer moves in the page's pixels while a
  // piece moves in the plan's: at 140% a piece would run ahead of the pointer, at 60% lag behind.
  const [zoom, setZoom] = useState(1)
  const plan = useRef<HTMLDivElement>(null)

  return (
    <div className="room-demo">
      <label className="room-zoom">
        <span>Zoom</span>
        <input type="range" min="0.6" max="1.4" step="0.1" value={zoom} onChange={(event) => setZoom(Number(event.currentTarget.value))} />
        <output>{Math.round(zoom * 100)}%</output>
      </label>
      <div className="room-frame">
        <div className="room-plan" ref={plan} style={{ transform: `scale(${zoom})` }}>
          {/* correctParentTransform turns each pointer point back through the plan's zoom, so a piece
              stays under the pointer at any zoom, and its constraints are measured in the plan's pixels. */}
          <MotionConfig transformPagePoint={correctParentTransform(plan)}>
            {PIECES.map((piece) => (
              <m.div
                key={piece.id}
                className="room-piece"
                data-id={piece.id}
                drag
                dragConstraints={plan}
                dragElastic={0.1}
                dragMomentum={false}
                whileDrag={{ scale: 1.05 }}
                style={{ left: piece.x, top: piece.y, width: piece.width, height: piece.height }}
              >
                {piece.name}
              </m.div>
            ))}
          </MotionConfig>
        </div>
      </div>
    </div>
  )
}

Highlighting…