` can be turned interactive using `Interactive`:
```tsx title="Interactive elements"
Hello
```
This allows styles and keyframes to be set in the Studio. Be sensible, if a component has many elements, the timeline might get messy.
## Prefer inline text
If text is fixed and only used once, write it directly inside the interactive element instead of extracting it into a constant.
```tsx title="Inline text"
// 👍 Fixed copy stays editable
Remotion Best Practices
```
Use a prop or variable only when the text is dynamic or reused.
## Give interactive elements a descriptive name
Add a `name` prop to elements to make them easily identifyable.
Avoid computed names, hardcode them.
```tsx title="Interactive names"
<>
Launch day
Launch day
```
## Keep all CSS styles inline
The best way is to just pass a plain object to `style` - no referring to constants, no object spreading, no math.
```tsx title="Interactive example"
Hello World!
```
```tsx title="❌ Bad for interactivity"
const baseStyle = useMemo(() => {
return {
fontSize: 12 // ❌ Non-inline styles are not supported
}
}, []);
Hello World!
```
## Animate using `interpolate()`
Write animations as inline `interpolate()` calls on the property that changes.
The output range, easing, extrapolation and `output` property should use hardcoded values.
The input range may additionally use `durationInFrames`, `fps`, `width` and `height` destructured directly from `useVideoConfig()`. Bare identifiers such as `durationInFrames`, multiplication with a number such as `2 * fps` or `fps * 2`, and subtraction of a number such as `durationInFrames - 1` are supported.
```tsx title="Inline values"
const {fps, durationInFrames} = useVideoConfig();
// 👍 Inline values can be standardized and keyframed
```
```tsx title="❌ Bad interactivity"
const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be directly in the markup
```
## Use `scale`, `translate`, `rotate` CSS properties
Avoid the `transform` CSS property.
If possible, use `scale`, `rotate` and `translate` instead because only they are interactively editable.
## Keep composition metadata inline
When scaffolding a composition, keep `width`, `height`, `fps`, `durationInFrames` and `defaultProps` inline and make no type assertions.
The Props editor can save visual edits back to your code when `defaultProps` is an inline object literal on `
` or ``.
```tsx
// 👍 Static values are in , dynamic values are in calculateMetadata()
const calculateMetadata = useMemo(async () => {
const dimensions = await getDimensions(); // just an example
return {width: dimensions.width, height: dimensions.height};
});
```
```tsx title="Negative examples"
const defaultProps = {title: 'Hello', color: '#0b84ff'}; // ❌ Don't extract defaultProps, must be inline
const calculateMetadata = useMemo(() => {
// ❌ Unnecessary because no calculation is being done,
return {durationInFrames: 150, fps: 30, width: 1920, height: 1080};
});
```
Use only `calculateMetadata()` for the part of the metadata that is dynamic.
## Effects should be inline too
The effects array should not be computed.
The same rules for setting keyframes as `interpolate()` apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, `output` property.
```tsx title="Effects"
// 👍 Parameters are inline and the array shape is stable
const center = [0.5, 0.5] as const;
const rotation = frame * 1.5;
```
Render separate elements if one version should have effects and another should not.
## Making your own component interactive
To make a custom userland component interactive, use:
[Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
## Video editing
If a Remotion component mainly consists of video and audio clips, see Video editing for best practices on how to structure Remotion markup so the clips are interactively editable in the timeline.