---
image: /generated/articles-docs-idea.png
id: idea
slug: /idea
title: The core idea
crumb: Getting started
---
```twoslash include example
import { AbsoluteFill, useCurrentFrame } from "remotion";
export const MyComposition = () => {
const frame = useCurrentFrame();
return (
The current frame is {frame}.
);
};
// - MyComposition
```
The idea of Remotion is to give you a frame number and a blank canvas, to which you can render anything you want using [React](https://react.dev).
This is an example React component that renders the current frame as text:
```tsx twoslash title="MyComposition.tsx"
// @include: example-MyComposition
```
Remotion includes [components](/docs/components) for adding text, images, video, audio and shapes.
A video is a function of images over time. If you change content every frame, you'll end up with an animation.
## Video properties
A video has 4 properties:
- `width` and `height` in pixels.
- `durationInFrames`
- `fps`, standing for "frames per second".
You can obtain these values from the [`useVideoConfig()`](/docs/use-video-config) hook:
```tsx twoslash
import {Interactive, useVideoConfig} from 'remotion';
export const MyComposition = () => {
const {fps, durationInFrames, width, height} = useVideoConfig();
return (
This {width}x{height}px video is {durationInFrames / fps} seconds long.
);
};
```
A video's first frame is `0` and its last frame is `durationInFrames - 1`.
## Compositions
A composition is the combination of a React component and video metadata.
Register compositions to make a component renderable into a video and make it visible in the Remotion Studio composition list.
```tsx twoslash title="src/Root.tsx"
import {Composition} from 'remotion';
// @include: example-MyComposition
// ---cut---
export const RemotionRoot: React.FC = () => {
return (
<>
);
};
```