07 Custom Hook

1// T4 case 07 — Locally-defined custom hook.
2//
3// Should be detected by lint_source.py as warning r2hf/custom-hook.
4// 0 blockers expected — the skill can attempt translation if the hook body
5// is pure (derives from props/frame alone).
6//
7// Why this is a warning: custom hooks vary widely in what they do. Some are
8// pure derivations of useCurrentFrame (translatable — inline the body); some
9// wrap useState/useEffect (blocker — but those will be caught by the other
10// rules independently). The warning prompts the agent to inspect the body.
11
12import React from "react";
13import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
14
15// Custom hook — pure derivation from frame, no state. Translates fine.
16function useFadeIn(durationInFrames: number) {
17  const frame = useCurrentFrame();
18  return interpolate(frame, [0, durationInFrames], [0, 1], { extrapolateRight: "clamp" });
19}
20
21export const CustomHookDriven: React.FC = () => {
22  const opacity = useFadeIn(30);
23  return (
24    <AbsoluteFill style={{ opacity }}>
25      <div>fading in</div>
26    </AbsoluteFill>
27  );
28};