04 Third Party React

1// T4 case 04 — Imports from a third-party React UI library.
2//
3// Should be detected by lint_source.py as blocker r2hf/third-party-react-ui.
4// The skill should refuse to translate.
5//
6// Why this is a blocker: a Material-UI Button (or any React UI library
7// component) is a React-only abstraction with internal hooks, refs, and
8// theme provider context. Translating it to HTML+CSS would require
9// re-implementing the design system, which is out of scope for a video
10// translation skill. Use the runtime interop pattern from PR #214 to keep
11// these components rendering through Remotion's React tree.
12
13import React from "react";
14import { Button } from "@mui/material";
15import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
16
17export const MuiDriven: React.FC = () => {
18  const frame = useCurrentFrame();
19  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
20
21  return (
22    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
23      <div style={{ opacity }}>
24        <Button variant="contained" color="primary">
25          Click me · frame {frame}
26        </Button>
27      </div>
28    </AbsoluteFill>
29  );
30};