write-overlay

What problem does it solve?

Enables authors to create precise, frame-accurate JSX overlay components for Montaj projects so overlays animate reliably, compose correctly, and avoid common rendering pitfalls like backdrop-filter caching and lost globals.

Core Features & Use Cases

• Frame-driven JSX: Author pure function React components that animate per-frame using injected globals for exact timing and motion.
• Rendering safety & patterns: Enforces no imports, no hooks, no side effects, and advises track-splitting (background vs content) to avoid GPU compositor caching issues.
• Assets & fonts: Supports asset references and preloaded Google Fonts via project.json for consistent preview and final render; ideal for hooks, lower-thirds, CTAs, and logo lockups.

Quick Start

Write a default-export React function that uses the injected globals (frame, fps, interpolate, spring, props) to animate large, readable text or icons, save it as overlays/hook.jsx, and add an overlay item to your project's overlay track with the src pointing to that file.