1---
2name: measuring-dom-nodes
3description: Measuring DOM element dimensions in Remotion
4metadata:
5  tags: measure, layout, dimensions, getBoundingClientRect, scale
6---
7 
8# Measuring DOM nodes in Remotion
9 
10Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`. Use `useCurrentScale()` to get correct measurements.
11 
12## Measuring element dimensions
13 
14```tsx
15import { useCurrentScale } from "remotion";
16import { useRef, useEffect, useState } from "react";
17 
18export const MyComponent = () => {
19  const ref = useRef<HTMLDivElement>(null);
20  const scale = useCurrentScale();
21  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
22 
23  useEffect(() => {
24    if (!ref.current) return;
25    const rect = ref.current.getBoundingClientRect();
26    setDimensions({
27      width: rect.width / scale,
28      height: rect.height / scale,
29    });
30  }, [scale]);
31 
32  return <div ref={ref}>Content to measure</div>;
33};
34```
35