Apply Remotion Studio’s interaction conventions to buttons and links: keep the default cursor, brighten text and icons on hover, and show a visible focus indicator for keyboard navigation using shared styling helpers.
Apply Remotion Studio's pointerless interaction styling to clickable controls. Use when adding or revising Studio buttons or links that should use the default cursor, brighten on hover, and show focus decoration only for keyboard navigation.
Review the instructions the agent will receive before you install.
Use the established Studio interaction convention for clickable controls:
cursor: 'default'; do not use cursor: 'pointer'.HOVERABLE_CLASS_NAME and
hoverableStyle() from packages/studio/src/helpers/hoverable.ts. Do not add
React hover state for color or background changes.TRANSPARENT for both idleBackground and hoverBackground.LIGHT_TEXT (#A6A7A9) as the idle color and WHITE (white) as the
hover color. Icons and nested text must follow the same state; inspect the
element that paints the pixels if the Studio CSS reset blocks inheritance.Remove the default outline and pointer-focus shadow, but preserve a visible
keyboard focus indicator. Add FOCUS_VISIBLE_ONLY_CLASS_NAME from
packages/studio/src/helpers/hoverable.ts to the control alongside
HOVERABLE_CLASS_NAME. The shared class implements this pattern:
.__remotion-focus-visible-only:focus {
outline: none;
box-shadow: none;
}
.__remotion-focus-visible-only:focus-visible {
box-shadow: ${FOCUS_BOX_SHADOW};
}
Never remove the :focus-visible indicator. Keep hidden actions out of the tab
order until they are discoverable.
In a running Studio, check the control's computed styles in all relevant states:
default;rgb(166, 167, 169);rgb(255, 255, 255);Tab focus: the standard FOCUS_BOX_SHADOW is visible.For Studio code changes, run:
bunx turbo run make --filter='@remotion/studio'
bunx turbo run lint test --filter='@remotion/studio'
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.
Add a Remotion command-line or configuration option, or convert a hardcoded flag into a shared option definition. Connect parsing, configuration setters, help entries, and generated documentation so the option is consistently available and documented.
Add a new effect to @remotion/effects, including its implementation, package entry points, documentation, interactive demo, and preview images. Follow the package conventions and verify the changes with tests, formatting checks, and builds.
Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.
Create a new @remotion package within the Remotion monorepo, a repository containing multiple packages. Set up its files, register it across the project, and prepare documentation, usage examples, and build configuration.
Add a new sound effect to @remotion/sfx, from registering the audio file to exporting its URL and documenting its use. The workflow covers playback examples, attribution, navigation entries, waveform generation, and the package build.