+
+
);
+ }
+ }
+ if (sounding) { // fascio di luce e bagliore sul tasto
+ items.push();
+ items.push();
+ }
+ const age = t - on; // scintille all'impatto
+ if (age >= 0 && age < 1) for (let k = 0; k < 10; k++) {
+ const a = -Math.PI / 2 + (random(`a${i}-${k}`) - .5) * 2.3, v = (130 + random(`v${i}-${k}`) * 380) * (.6 + n.vel * .6), life = .45 + random(`l${i}-${k}`) * .5;
+ if (age > life) continue;
+ const px = g.x + g.w / 2 + Math.cos(a) * v * age, py = KB_TOP - 4 + Math.sin(a) * v * age + 650 * age * age, al = 1 - age / life, sz = 3 + 5 * al;
+ items.push( .6 ? c.light : c.body, opacity: al, boxShadow: `0 0 8px ${c.glow}` }} />);
+ }
+ });
+ return {items}
+
+ ;
+};
+
+/* ---------- tastiera ---------- */
+const Keyboard: React.FC<{ opacity: number }> = ({ opacity }) => {
+ const t = useCurrentFrame() / FPS, active = new Map();
+ for (const n of NOTES) { const on = noteTime(n); if (t >= on && t < on + n.db * (60 / 96)) active.set(n.midi, n.hand); }
+ const keys: React.ReactNode[] = [];
+ for (const black of [false, true]) for (let m = LOW; m <= HIGH; m++) {
+ const g = keyGeom(m); if (g.black !== black) continue; const hand = active.get(m), c = hand === undefined ? null : COLORS[hand];
+ keys.push(black
+ ?
+ : );
+ }
+ return
+ ;
+ })}
+);
+
+/* ---------- elementi di testo ---------- */
+const useIn = (delay = 0) => { const f = useCurrentFrame(), { fps } = useVideoConfig(); return spring({ frame: f - delay, fps, config: { damping: 16, mass: .7 } }); };
+const Scene: React.FC<{ from: number; to: number; children: React.ReactNode }> = ({ from, to, children }) => {
+ const f = useCurrentFrame(), a = Math.round(from * FPS), b = Math.round(to * FPS);
+ const out = interpolate(f, [b - 10, b], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+ return {children}
+
+ );
+};
diff --git a/video/src/Root.tsx b/video/src/Root.tsx
new file mode 100644
index 0000000..c02a08a
--- /dev/null
+++ b/video/src/Root.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { Composition } from 'remotion';
+import { Reel, FPS, TOTAL_FRAMES } from './Reel';
+
+export const Root: React.FC = () => (
+ = { C: 0, 'C#': 1, D: 2, 'D#': 3, E: 4, F: 5, 'F#': 6, G: 7, 'G#': 8, A: 9, 'A#': 10, B: 11 };
+const m = (name: string) => { const mt = name.match(/^([A-G]#?)(\d)$/)!; return (Number(mt[2]) + 1) * 12 + N[mt[1]]; };
+
+const melody: [string, number][][] = [
+ [['F#5', 1], ['A5', 1], ['F#5', 1.5], ['E5', .5]],
+ [['E5', 1], ['C#5', 1], ['E5', 2]],
+ [['D5', 1], ['F#5', 1], ['B5', 1.5], ['A5', .5]],
+ [['G5', 1], ['F#5', 1], ['D5', 2]],
+ [['F#5', .5], ['G5', .5], ['A5', 1], ['D6', 1.5], ['A5', .5]],
+ [['C#6', 1], ['B5', .5], ['A5', .5], ['E5', 2]],
+ [['D5', .5], ['E5', .5], ['F#5', 1], ['B5', 1], ['A5', 1]],
+ [['G5', 1], ['F#5', .5], ['E5', .5], ['D5', 2]],
+ [['B4', 1], ['D5', 1], ['C#5', 1], ['E5', 1]],
+];
+const arp = (r: number, minor = false) => [r, r + 7, r + 12, r + 7, r + 12 + (minor ? 3 : 4), r + 7, r + 12, r + 7];
+const left: number[][] = [arp(50), arp(45), arp(47, true), arp(43), arp(50), arp(45), arp(47, true), arp(43), [...arp(43).slice(0, 4), ...arp(45).slice(0, 4)]];
+
+export const NOTES: Note[] = [];
+melody.forEach((bar, i) => { let p = 0; for (const [name, d] of bar) { NOTES.push({ b: i * 4 + p, db: d * .95, midi: m(name), hand: 0, vel: p === 0 ? .9 : .78 }); p += d; } });
+left.forEach((bar, i) => bar.forEach((midi, k) => NOTES.push({ b: i * 4 + k * .5, db: .5, midi, hand: 1, vel: k === 0 ? .6 : .46 })));
+// accordo finale
+const END = 36;
+[[50, 1], [57, 1], [62, 1], [66, 0], [69, 0], [74, 0]].forEach(([midi, hand], k) => NOTES.push({ b: END + k * .06, db: 4, midi, hand: hand as 0 | 1, vel: .8 }));
+NOTES.sort((a, b) => a.b - b.b);
+
+export const noteTime = (n: Note) => MUSIC_START + n.b * BEAT;
+export const MUSIC_END = MUSIC_START + (END + 4) * BEAT;
+
+// campioni disponibili: uno ogni terza minore da La0 (21)
+export const sampleFor = (midi: number) => {
+ let best = 21; for (let s = 21; s <= 108; s += 3) if (Math.abs(s - midi) < Math.abs(best - midi)) best = s;
+ const name = ({ 9: 'A', 0: 'C', 3: 'Ds', 6: 'Fs' } as Record)[best % 12] + (Math.floor(best / 12) - 1);
+ return { file: `samples/${name}.mp3`, tone: Math.pow(2, (midi - best) / 12) };
+};
diff --git a/video/tsconfig.json b/video/tsconfig.json
new file mode 100644
index 0000000..5f08fe4
--- /dev/null
+++ b/video/tsconfig.json
@@ -0,0 +1 @@
+{ "compilerOptions": { "target": "ES2020", "module": "ESNext", "moduleResolution": "Bundler", "jsx": "react-jsx", "strict": true, "skipLibCheck": true, "esModuleInterop": true, "noEmit": true }, "include": ["src"] }
+ {keys}
;
+};
+
+/* ---------- audio: ogni nota usa il campione reale più vicino ---------- */
+const Music: React.FC = () => (<>
+ {NOTES.map((n: Note, i) => {
+ const s = sampleFor(n.midi), from = Math.round(noteTime(n) * FPS), hold = Math.round((n.db * (60 / 96) + (n.hand ? .5 : .9)) * FPS), total = hold + 14;
+ const gain = (.2 + .8 * Math.pow(n.vel, 1.6)) * (n.hand ? .7 : 1) * (1 + Math.max(0, n.midi - 72) / 30);
+ return
+ {kicker &&
;
+};
+const ShotCard: React.FC<{ src: string; top: number; height: number; imgWidth: number; panFrom: number; panTo: number; imgTop?: number; delay?: number; children?: React.ReactNode }> = ({ src, top, height, imgWidth, panFrom, panTo, imgTop = 0, delay = 10, children }) => {
+ const f = useCurrentFrame(), p = useIn(delay), x = interpolate(f, [delay, delay + 130], [panFrom, panTo], { extrapolateRight: 'clamp', easing: Easing.inOut(Easing.quad) });
+ return {kicker}
}
+ {lines.map((l, i) => { const p = spring({ frame: f - 4 - i * 6, fps: FPS, config: { damping: 15, mass: .7 } }); return {l}
; })}
+ {sub && {sub}
}
+
+ })
{children}
;
+};
+const Chip: React.FC<{ text: string; delay: number; color?: string }> = ({ text, delay, color = '#ffb347' }) => { const p = useIn(delay); return {text}
; };
+
+/* ---------- scene ---------- */
+const Intro: React.FC<{ outro?: boolean }> = ({ outro }) => {
+ const a = useIn(0), b = useIn(10), c = useIn(22), d = useIn(34);
+ return
+ })
+
;
+};
+const LearnScore: React.FC = () => { const f = useCurrentFrame(), ok = Math.min(24, Math.floor(interpolate(f, [25, 125], [9, 24], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }))), p = useIn(24);
+ return
+ PlayPiano
+ {outro ? 'Gratis e open source' : 'Il pianoforte che ti insegna a suonare'}
+ {outro &&
+
}
+ melody.djluza.com
+ macOS · Windows · Linux · browser
+ github.com/luzadev/playpiano
+ ✔ {ok} ✖ 1 {Math.round(ok / (ok + 1) * 100)}%
; };
+const AiScene: React.FC = () => {
+ const f = useCurrentFrame(), text = 'un brano nostalgico, come pioggia sui vetri', typed = text.slice(0, Math.floor(interpolate(f, [16, 70], [0, text.length], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }))), box = useIn(8), card = useIn(84);
+ return <>
+
+ ✨ {typed}|
+
+
;
+};
+
+export const Reel: React.FC = () => {
+ const f = useCurrentFrame(), t = f / FPS, END = MUSIC_END - 2.7; // l'accordo finale cade all'inizio della chiusura
+ const stage = interpolate(t, [.2, 1.2, END + 1.8, END + 3], [0, 1, 1, .3], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+ return (
+ «Ricordi sbiaditi»
+ La minore · 4/4 · ♩ = 60 · 32 battute
+ Lam – Fa – Do – Mi │ Rem – Lam – Mi – Lam
+ PlayPiano
+
+