Write one complete src/index.tsx for a reproducible Remotion 4.0.424 project using React 19.1.0. Return ONLY a fenced tsx block, no tools. This is a real tutorial render, not an invented UI demo. Existing public files are actual unmodified Ofox website screenshots: models.png, docs.png, api.png, each1280x720. Do NOT draw fake UI. Use Img/staticFile to display them. We will supply narration.wav later. No dependency except remotion and react.

Create polished orange/cream/ink editorial motion graphics: brand #ff6b2b, ink #202323, cream #fffaf4. Register 3 compositions: DemoLandscape (1280x720, 30fps, 900frames), DemoNarrated (1280x720, same 900frames, adds Audio from remotion with staticFile('narration.wav') and manual sentence captions), DemoPortrait (720x1280, same900frames, rearranged layout, same narration and captions). Defaults must need no extra props. Drive everything by useCurrentFrame()/useVideoConfig(), deterministic interpolate/spring, never CSS animation, no network or Math.random.

Story for a restrained 30-second public-site walkthrough:
0-4 seconds: bold hook 'One brief. A clear demo.' and three outlined framing rectangles, no screenshot.
4-11 seconds: 'Explore the catalog' showing models.png; reveal only its top 320 pixels in an overflow-hidden crop (the lower image contains dynamic prices, which must not appear). Source crop has aspect4:1. Do not stretch; use wrapper/scale/original aspect carefully. Show small label 'Public website capture · Sep 30, 2026'.
11-18: 'Find the documentation' with docs.png, full screenshot but prioritize readability.
18-25: 'Read the API reference' with api.png, full screenshot, no fake cursor clicks or claim that any API request executed.
25-30: strong close 'Plan. Build. Verify.' and ofox.ai/models small CTA.

In portrait, stack heading, screenshot and caption rather than center-crop the landscape frame; safe content x>=48,x<=672, y>=90,y<=1080. Captions font30 portrait /28 landscape, two lines max, solid contrast dark band. Keep screenshots proportional and separate from typography; source catalog crop must stay top320. Use subtle camera scale <=1.03 and opacity between scenes, never obscure readable content. Landscape uses main screenshot width1120 and centered; portrait useswidth624. Draw editorial framing only, not UI recreation. Portrait headings <=58px, landscape<=64px, generous line-height.

Narration schedule in seconds (provided audio is pre-aligned to these starts):
0.35-3.60 'A clear product video starts with a clear brief.'
4.35-9.80 'Show the real interface. Here, we begin with the model catalog.'
11.35-16.80 'Then show where a viewer can find the documentation.'
18.35-23.80 'Connect each scene to an actual page, such as this API reference.'
25.35-29.50 'Keep the message simple. Plan, build, and verify.'
Implement captions by explicit start/end and do not animate word timings you do not have. Audio include only when narrated=true. Use identical scene boundaries for all3.
