From c937844f94047af0f421b17540cd7766f9a62461 Mon Sep 17 00:00:00 2001 From: Lara Date: Fri, 6 Nov 2026 08:19:16 +0000 Subject: [PATCH] =?UTF-8?q?Schattenspiel:=20Mitmach-Karte=20mit=20gezeichn?= =?UTF-8?q?eter=20Hand=20(wie=20im=20Z=C3=A4hllied)=20f=C3=BCr=20Hase=20un?= =?UTF-8?q?d=20Igel;=20Hand=20nach=20baukasten/hand.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- remotion/src/baukasten/hand.tsx | 48 +++++++++++++++++++++++++++ remotion/src/folge08/szene7.tsx | 35 ++++++++++++++++++- remotion/src/lieder/lied01/Lied01.tsx | 43 ++---------------------- 3 files changed, 85 insertions(+), 41 deletions(-) create mode 100644 remotion/src/baukasten/hand.tsx diff --git a/remotion/src/baukasten/hand.tsx b/remotion/src/baukasten/hand.tsx new file mode 100644 index 0000000..da1cc9b --- /dev/null +++ b/remotion/src/baukasten/hand.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +// Gezeichnete Hand (Bilderbuchstil) für Mitmach-Karten: Zählen mit den Fingern (Lied 1), +// Hand-Schatten (Folge 8). `hoch` sagt je Finger (Daumen zuerst), ob er gestreckt ist; +// `neu` = Index des Fingers, der gerade hochschnellt, `wachsen` 0–1 dessen Fortschritt; +// `gespreizt` fächert die gestreckten Finger auf (Igel-Stacheln). +const HAUT = '#f4cfa6'; +const KONTUR = '#b9825a'; +const FINGER: {x: number; b: number; l: number; dreh: number}[] = [ + {x: 22, b: 24, l: 62, dreh: -48}, // Daumen + {x: 48, b: 22, l: 84, dreh: -6}, + {x: 74, b: 22, l: 92, dreh: 0}, + {x: 100, b: 22, l: 84, dreh: 5}, + {x: 124, b: 20, l: 66, dreh: 12}, +]; +const SPREIZ = [-10, -16, -2, 12, 22]; + +export const Hand: React.FC<{hoch: boolean[]; neu?: number; wachsen?: number; spiegeln?: boolean; gespreizt?: boolean}> = ({hoch, neu = -1, wachsen = 1, spiegeln = false, gespreizt = false}) => ( + + {FINGER.map((fi, k) => { + const l = hoch[k] ? (k === neu ? 18 + (fi.l - 18) * wachsen : fi.l) : 18; + const fussY = k === 0 ? 150 : 112; + const dreh = fi.dreh + (gespreizt && hoch[k] ? SPREIZ[k] : 0); + return ( + + ); + })} + + {/* eingeklappte Finger als kleine Knöchel */} + {FINGER.slice(1).map((fi, k) => (!hoch[k + 1] ? : null))} + +); + +// Zählen: die ersten `finger` Finger gestreckt (Daumen = 1, wie in Deutschland üblich) +export const ZaehlHand: React.FC<{finger: number; neu: number; spiegeln?: boolean}> = ({finger, neu, spiegeln}) => ( + k < finger)} neu={finger - 1} wachsen={neu} spiegeln={spiegeln} /> +); diff --git a/remotion/src/folge08/szene7.tsx b/remotion/src/folge08/szene7.tsx index 44a5294..d99bd2d 100644 --- a/remotion/src/folge08/szene7.tsx +++ b/remotion/src/folge08/szene7.tsx @@ -1,6 +1,8 @@ import React from 'react'; import {interpolate, useCurrentFrame} from 'remotion'; +import {Hand} from '../baukasten/hand'; import {Blende, kamFahrt, punkt} from '../baukasten/helfer'; +import {SCHRIFT} from '../baukasten/untertitel'; import {BODEN} from '../baukasten/orte'; import {POSEN_SKALA} from '../baukasten/figur'; import {Untertitel} from '../baukasten/untertitel'; @@ -9,7 +11,8 @@ import {HandSchatten, NoasHand} from './teile'; import {PLATZ, Wandszene} from './wand'; // Szene 7: Schattenspiel. Noa macht mit der Hand vor der Laterne einen Hasen, dann einen Igel. -// Die Kinder machen mit (Pausen). Lulu streckt den Hals lang, ihr Schatten reicht bis zum Dach. +// Die Kinder machen mit (Pausen): Solange der Erzähler erklärt, zeigt oben links eine Karte die Hand +// (gezeichnet wie beim Zähllied), welche Finger hoch müssen. Lulu streckt den Hals lang. export const S7 = plane('s7', [ {id: 'bild0', dauer: 1.2}, @@ -32,6 +35,34 @@ const HAND = {x: 955, y: 770}; const HAND_S = 0.3; const K = 3; // Hand nah am Licht → großer Schatten +// Mitmach-Karte oben links (oben rechts erscheint in der Pause das „?“) +const HandKarte: React.FC<{art: 'hase' | 'igel'; von: number; bis: number}> = ({art, von, bis}) => { + const f = useCurrentFrame(); + const auf = interpolate(f, [von, von + 10, bis - 8, bis], [0, 1, 1, 0], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}); + if (auf <= 0) return null; + const wackeln = Math.sin(f * 0.18) * 3; + return ( +
+ +
+ ); +}; + export const Szene7: React.FC = () => { const f = useCurrentFrame(); const {z, dauer} = S7; @@ -71,6 +102,8 @@ export const Szene7: React.FC = () => { } /> + + diff --git a/remotion/src/lieder/lied01/Lied01.tsx b/remotion/src/lieder/lied01/Lied01.tsx index a90a4d6..7adb789 100644 --- a/remotion/src/lieder/lied01/Lied01.tsx +++ b/remotion/src/lieder/lied01/Lied01.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {AbsoluteFill, Audio, Sequence, interpolate, spring, staticFile, useCurrentFrame} from 'remotion'; import {INTRO_OPTIONEN, Intro, OUTRO, Outro} from '../../baukasten/buch'; import {ClipFigur, Figur, Kamera, type Posenfolge} from '../../baukasten/figur'; +import {ZaehlHand} from '../../baukasten/hand'; import {Blende, LULU_KOPF, Vignette, huepfer, kamFahrt, luluMaulC9, punkt} from '../../baukasten/helfer'; import {Apfel, Funkeln, Ruf} from '../../baukasten/natur'; import {BODEN, Ort} from '../../baukasten/orte'; @@ -179,44 +180,6 @@ const Liedapfel: React.FC<{i: number; f: number}> = ({i, f}) => { ); }; -// Hand mit hochgestreckten Fingern (Daumen zählt als 1) -const HAUT = '#f4cfa6'; -const KONTUR = '#b9825a'; -const FINGER: {x: number; b: number; l: number; dreh: number}[] = [ - {x: 22, b: 24, l: 62, dreh: -48}, // Daumen - {x: 48, b: 22, l: 84, dreh: -6}, - {x: 74, b: 22, l: 92, dreh: 0}, - {x: 100, b: 22, l: 84, dreh: 5}, - {x: 124, b: 20, l: 66, dreh: 12}, -]; -const Hand: React.FC<{finger: number; neu: number; spiegeln?: boolean}> = ({finger, neu, spiegeln = false}) => ( - - {FINGER.map((fi, k) => { - const hoch = k < finger; - // der zuletzt dazugekommene Finger schnellt hoch - const l = hoch ? (k === finger - 1 ? 18 + (fi.l - 18) * neu : fi.l) : 18; - const fussY = k === 0 ? 150 : 112; - return ( - - ); - })} - - {/* eingeklappte Finger als kleine Knöchel */} - {FINGER.slice(1).map((fi, k) => (k + 1 >= finger ? : null))} - -); - // Zahl und Hände oben rechts type Anzeige = {n: number | '?'; seit: number; deck: number}; const anzeige = (f: number): Anzeige | null => { @@ -259,8 +222,8 @@ const Zahltafel: React.FC = () => { <>
{n}
- - {n > 5 && } + + {n > 5 && }
);