58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
import React from 'react';
|
||
import {useCurrentFrame} from 'remotion';
|
||
import {Figur, Kamera} from '../baukasten/figur';
|
||
import {type DrachenLage, LIEGE_HOEHE, plumps} from '../baukasten/drachen';
|
||
import {Blende, Vignette, atmen, kamFahrt} from '../baukasten/helfer';
|
||
import {BODEN} from '../baukasten/orte';
|
||
import {Untertitel} from '../baukasten/untertitel';
|
||
import {plane} from './plan';
|
||
import {DRACHEN_IM_GRAS, LuluImWind, PLATZ, SchnurUndDrachen, WindGarten} from './teile';
|
||
|
||
// Szene 3: Plumps! Noa steht mitten auf der Wiese, aber verkehrt herum (schaut gegen den Wind nach links),
|
||
// der Drachen liegt windaufwärts vor ihr im Gras (bei Lulu). Ein Windstoß hebt ihn kurz an – plumps, zweimal. Noa ist enttäuscht;
|
||
// Pino tröstet, Lulu spürt oben den Wind. Beim „Puste mal!“ fegt eine Böe Blätter durchs Bild.
|
||
|
||
export const S3 = plane('s3', [
|
||
{id: 'plumps', dauer: 4.2},
|
||
{id: 'n1', wer: 'NOA'},
|
||
{id: 'e1', wer: 'ERZ', pause: 4},
|
||
{id: 'e2', wer: 'ERZ'},
|
||
{id: 'p1', wer: 'PINO'},
|
||
{id: 'l1', wer: 'LULU'},
|
||
{id: 'e3', wer: 'ERZ', pause: 3},
|
||
{id: 'e4', wer: 'ERZ'},
|
||
{id: 'bild1', dauer: 1.0},
|
||
]);
|
||
|
||
export const Szene3: React.FC = () => {
|
||
const f = useCurrentFrame();
|
||
const {z, dauer} = S3;
|
||
const p0 = z.plumps.start + 6;
|
||
const halb = (z.plumps.ende - p0) / 2;
|
||
const lage: DrachenLage = f < p0 + halb ? plumps(f, p0, halb, DRACHEN_IM_GRAS.x, BODEN) : plumps(f, p0 + halb, halb, DRACHEN_IM_GRAS.x, BODEN);
|
||
const traurig = f >= z.n1.start && f < z.p1.ende;
|
||
const boeen = f >= z.e3.ende && f < z.e3.frei + 20 ? 1 : 0;
|
||
const kam = kamFahrt(f, [
|
||
[0, 1060, 600, 1.15],
|
||
[z.n1.start, PLATZ.noa, 640, 1.5], // Noa
|
||
[z.e2.ende, 960, 640, 1.3],
|
||
[z.l1.start, PLATZ.lulu - 60, 420, 1.35], // Lulu oben im Wind
|
||
[z.e3.start, 1060, 560, 1.05],
|
||
[dauer, 1060, 560, 1.05],
|
||
]);
|
||
return (
|
||
<>
|
||
<Kamera {...kam}>
|
||
<WindGarten boeen={boeen} />
|
||
<LuluImWind />
|
||
{/* Noa schaut nach links: die Schnur läuft hinter ihr zum Drachen */}
|
||
<SchnurUndDrachen lage={traurig ? {x: DRACHEN_IM_GRAS.x, y: BODEN - LIEGE_HOEHE, drehung: 90, liegt: true} : lage} noaX={PLATZ.noa} spiegeln schnur={!traurig} />
|
||
<Figur pose={[[0, 'noa_A_drachenschnur'], [z.n1.start, 'noa_B1_traurig'], [z.p1.ende, 'noa_A_drachenschnur']]} x={PLATZ.noa} y={BODEN} spiegeln stauchY={atmen(f, 2)} />
|
||
<Figur pose={[[0, 'pino_A6_blick-rechts'], [z.n1.start, 'pino_B1_traurig'], [z.p1.start, 'pino_A6_blick-rechts'], [z.e4.start, 'pino_A3_lachen']]} x={PLATZ.pino} y={BODEN} stauchY={atmen(f, 1, 0.015)} />
|
||
</Kamera>
|
||
<Vignette />
|
||
<Untertitel zeilen={S3.liste} />
|
||
<Blende dauer={dauer} rein={8} raus={8} />
|
||
</>
|
||
);
|
||
};
|