{essay.theme}
{essay.naratif ? essay.naratif[0] : ""}
{/* Number, title, subtitle */}
{essay.no}
{essay.title}
{essay.subtitle}
“{essay.hoverQuote}”
Baca Esei
setMenuOpen(false)} />
);
}
/* ============== HERO ============== */
function Hero({ data, onRead }) {
return (
);
}
/* ============== DARI KACAMATA — editorial intro band ============== */
function DariKacamata() {
const scrollToEsei = () => {
const el = document.getElementById('esei');
if (el) el.scrollIntoView({ behavior: 'smooth' });
};
return (
);
}
/* ============== VIDEO WALL (12 panels + Penutup) ==============
The home-page hero module per v2 spec: 12 clickable music-video-style panels
with filter chips for decade + theme. Essay 16 sits below as Penutup. */
function VideoWall({ essays, filters, onSelect }) {
const [naratif, setNaratif] = useState(null);
const [theme, setTheme] = useState(null);
// Split into main 12 + Penutup + Pembukaan
const main = essays.filter((e) => !e.isPenutup && !e.isPembukaan);
const penutup = essays.find((e) => e.isPenutup);
const pembukaan = essays.find((e) => e.isPembukaan);
const matches = (e) => {
if (naratif && (!e.naratif || !e.naratif.includes(naratif))) return false;
if (theme && e.theme !== theme) return false;
return true;
};
const activeCount = main.filter(matches).length;
const hasFilter = naratif || theme;
return (
Tujuh belas pintu masuk.
{/* Filter chips */}
);
}
/* ============== FILTER BAR (naratif + tema chips) ============== */
function FilterBar({ filters, naratif, theme, onNaratif, onTheme, activeCount, totalCount }) {
const clearAll = () => { onNaratif(null); onTheme(null); };
const hasFilter = naratif || theme;
return (
);
}
/* ============== PANEL (one essay in the wall) ============== */
function Panel({ essay, dimmed, onSelect }) {
return (
onSelect(essay.no, essay)}
role="button"
tabIndex={0}
>
{/* Background photograph */}
{/* Top metadata: tema + naratif pills */}
{/* Hover-revealed quote */}
{essay.hoverQuote && (
)}
{/* Waveform line at bottom */}
);
}
/* ============== WAVEFORM line (subtle, animated on hover) ============== */
function Waveform() {
// 32 bars, varying heights — animated by CSS on parent hover
const bars = React.useMemo(
() => Array.from({ length: 36 }, (_, i) => 1.0 + Math.sin(i * 0.7) * 0.5 + Math.cos(i * 1.3) * 0.4),
[]
);
return (
);
}
/* ============== PEMBUKAAN — opening essay, horizontal hero strip ============== */
function PembukaanPanel({ essay, onSelect }) {
return (
onSelect(essay.no, essay)}
role="button"
tabIndex={0}
>
);
}
/* ============== PENUTUP — closing essay, horizontal hero strip ============== */
function PenutupPanel({ essay, onSelect }) {
return (
onSelect(essay.no, essay)}
role="button"
tabIndex={0}
>
);
}
/* ============== ESSAY INDEX (legacy: vertical list) ============== */
function EssayIndex({ essays, activeNo, onSelect }) {
return (
Enam belas esei.
);
}
/* ============== PULL QUOTE BAND (3 stacked) ============== */
function PullQuoteBand({ quotes }) {
return (
);
}
/* ============== READER EXCERPT (bone, long-form sample) ============== */
function ReaderExcerpt({ data, onContinue }) {
return (
);
}
/* ============== ERA GALLERY (archive photographs) ============== */
function EraGallery() {
const eras = [
{ src: "./assets/era/decade-1-perintis.jpg", year: "1986–1995", label: "Dekad Perintis, Legenda Dicipta", caption: "The birth of Malaysian pop identity and cultural optimism where melody met nationhood." },
{ src: "./assets/era/decade-2-prasasti.jpg", year: "1996–2005", label: "Prasasti Emas, Budaya Diteroka", caption: "The rise of pop royalty; the peak of Irama Malaysia and cultural fusion; and adapting to Reality TV trend." },
{ src: "./assets/era/decade-3-revolusi.jpg", year: "2006–2015", label: "Mencetus Revolusi, Gelombang Digital", caption: "The disruption of the mainstream, the rise of indie authenticity and digital platforms, and the diversification of genres." },
{ src: "./assets/era/decade-4-global.jpg", year: "2016–2025", label: "Melakar Visual, Menggapai Global", caption: "The redefinition of Malaysian pop on the global stage, where performance art meets digital expression." },
];
return (
Dunia kreatif,
);
}
/* ============== RADAR KONSENSUS — Data & Visualisasi ============== */
function RadarConsensus() {
const llms = ['Perplexity','Claude','Gemini','Z.ai','Grok'];
const ranges = {Perplexity:{min:39.4,max:64.6},Claude:{min:61.8,max:71.5},Gemini:{min:63,max:72.9},'Z.ai':{min:67.4,max:77.5},Grok:{min:68.3,max:75.1}};
const songs = [
{id:'cindai',year:1998,title:'Cindai',artist:'Siti Nurhaliza',genre:'Traditional Malay',models:{Perplexity:{rank:1,score:64.6},Claude:{rank:2,score:65.3},Gemini:{rank:2,score:71},
'Z.ai':{rank:1,score:77.5},Grok:{rank:1,score:75.1}},mentions:5,first_votes:3,hybrid:89.69,rank_avg:96,norm_avg:83.38,raw_avg:70.7},
{id:'tanya',year:1994,title:'Tanya Sama Itu Hud Hud',artist:'M. Nasir',genre:'World Fusion',models:{Perplexity:{rank:2,score:58.4},Claude:{rank:1,score:71.5},Gemini:{rank:1,score:72.9},
'Z.ai':{rank:2,score:77},Grok:{rank:3,score:71.6}},mentions:5,first_votes:2,hybrid:87.9,rank_avg:92,norm_avg:83.8,raw_avg:70.28},
{id:'ghazal',year:1997,title:'Ghazal Untuk Rabiah',artist:'M. Nasir & Jamal Abdillah',genre:'World Fusion',models:{Claude:{rank:3.5,score:62.2},
'Z.ai':{rank:3,score:74.1}},mentions:2,first_votes:0,hybrid:22.55,rank_avg:31,norm_avg:14.09,raw_avg:68.15},
{id:'isabella',year:1989,title:'Isabella',artist:'Search',genre:'Rock Ballad',models:{Claude:{rank:5,score:62},
'Z.ai':{rank:5,score:67.4},Grok:{rank:4,score:69.5}},mentions:3,first_votes:0,hybrid:20.97,rank_avg:38,norm_avg:3.94,raw_avg:66.3},
{id:'terlalu',year:2006,title:'Terlalu Istimewa',artist:'Adibah Noor',genre:'Pop Ballad',models:{Perplexity:{rank:3,score:47.1},Gemini:{rank:3,score:64.5}},mentions:2,first_votes:0,hybrid:20.57,rank_avg:32,norm_avg:9.14,raw_avg:55.8},
{id:'terushidup',year:2022,title:'Terus Hidup',artist:'Aina Abdul',genre:'Power Ballad',models:{Grok:{rank:2,score:74.1}},mentions:1,first_votes:0,hybrid:17.53,rank_avg:18,norm_avg:17.06,raw_avg:74.1},
{id:'gemilang',year:2005,title:'Gemilang',artist:'Jaclyn Victor',genre:'Power Ballad',models:{Perplexity:{rank:5,score:39.4},
'Z.ai':{rank:4,score:71.4}},mentions:2,first_votes:0,hybrid:16.96,rank_avg:26,norm_avg:7.92,raw_avg:55.4},
{id:'pelukan',year:2021,title:'Pelukan Angkasa',artist:'SOG feat. Shila Amzah',genre:'Modern Rock',models:{Perplexity:{rank:4,score:47}},mentions:1,first_votes:0,hybrid:10.02,rank_avg:14,norm_avg:6.03,raw_avg:47},
{id:'gila',year:2020,title:'Gila',artist:'Kaka Azraff, Noki, Loca B',genre:'Hip-Hop',models:{Gemini:{rank:4,score:64.2}},mentions:1,first_votes:0,hybrid:8.21,rank_avg:14,norm_avg:2.42,raw_avg:64.2},
{id:'andalusia',year:1999,title:'Andalusia',artist:'M. Nasir',genre:'World Fusion',models:{Claude:{rank:3.5,score:62.2}},mentions:1,first_votes:0,hybrid:7.91,rank_avg:15,norm_avg:0.82,raw_avg:62.2},
{id:'terukir',year:2012,title:'Terukir Di Bintang',artist:'Yuna',genre:'Indie/Alt',models:{Grok:{rank:5,score:68.3}},mentions:1,first_votes:0,hybrid:6,rank_avg:12,norm_avg:0,raw_avg:68.3},
{id:'awannano',year:2011,title:'Awan Nano',artist:'Hafiz Suip',genre:'Pop Ballad',models:{Gemini:{rank:5,score:63}},mentions:1,first_votes:0,hybrid:6,rank_avg:12,norm_avg:0,raw_avg:63},
{id:'hasrat',year:2023,title:'Hasrat',artist:'Amir Jahari',genre:'Folk',models:{Claude:{rank:6,score:61.8}},mentions:1,first_votes:0,hybrid:5,rank_avg:10,norm_avg:0,raw_avg:61.8},
];
const palette = ['#C9A84C','#C0392B','#7bdff2','#b2f7ef','#f7d6e0','#cdb4db','#a0c4ff','#fdffb6','#caffbf','#ffd6a5','#ffadad','#9bf6ff','#bdb2ff'];
const [selected, setSelected] = useState(() => new Set(['cindai','tanya']));
const [mode, setMode] = useState('hybrid');
const [hoveredSong, setHoveredSong] = useState(null);
const rankSupport = (rank) => { if(rank==null) return 0; return Math.max(0,110-(10*Number(rank))); };
const normScore = (model, score) => {
const r = ranges[model]; if(score==null||!r) return 0;
if(r.max===r.min) return 100;
return 100*(Number(score)-r.min)/(r.max-r.min);
};
const valueFor = (song, model) => {
const item = song.models[model]; if(!item) return 0;
if(mode==='rank') return rankSupport(item.rank);
if(mode==='raw') return item.score||0;
if(mode==='norm') return normScore(model, item.score);
return 0.5*rankSupport(item.rank)+0.5*normScore(model, item.score);
};
const fmt = (n,dp) => n==null||isNaN(n) ? '—' : Number(n).toFixed(dp||1);
const toggleSong = (id) => {
setSelected(prev => { const s = new Set(prev); if(s.has(id)) s.delete(id); else s.add(id); return s; });
};
const selectPreset = (type) => {
const s = new Set();
songs.forEach((song,i) => {
if(type==='leaders' && i<2) s.add(song.id);
if(type==='top5' && i<5) s.add(song.id);
if(type==='multi' && song.mentions>=2) s.add(song.id);
if(type==='all') s.add(song.id);
});
setSelected(s);
};
// SVG radar drawing
const cx=200, cy=200, radius=150, maxVal=100, n=llms.length;
const polar = (r,i) => {
const angle = -Math.PI/2+(2*Math.PI*i/n);
return [cx+r*Math.cos(angle), cy+r*Math.sin(angle)];
};
const polyPoints = (values) => values.map((v,i) => polar(radius*Math.max(0,Math.min(maxVal,v))/maxVal,i).join(',')).join(' ');
const gridTicks = [20,40,60,80,100];
const cardBg = { backgroundColor: '#161616' };
const border = '1px solid rgba(255,255,255,0.08)';
return (
);
}
function GenreFlowCard() {
const [activeDekad, setActiveDekad] = useState(null);
const [activeGenre, setActiveGenre] = useState(null);
const genres = [
{ key: 'ballad', label: 'Ballad', color: '#C9A84C', sub: 'Ballad, Power Ballad, Pop Ballad' },
{ key: 'rock', label: 'Rock', color: '#C0392B', sub: 'Rock, Ballad, Pop, Modern, Alternative, Slow' },
{ key: 'tradisi',label: 'Tradisi / Fusion', color: '#2D8A7A', sub: 'Traditional Malay, World Fusion, Folk' },
{ key: 'hiphop', label: 'Hip Hop', color: '#4A7B9D', sub: 'Hip Hop' },
];
const decades = [
{ id: 1, label: 'Dekad 1', years: '1986–1995', data: { ballad: 6, rock: 3, tradisi: 1, hiphop: 0 }, total: 10 },
{ id: 2, label: 'Dekad 2', years: '1996–2005', data: { ballad: 3, rock: 2, tradisi: 5, hiphop: 0 }, total: 10 },
{ id: 3, label: 'Dekad 3', years: '2006–2015', data: { ballad: 3, rock: 3, tradisi: 3, hiphop: 1 }, total: 10 },
{ id: 4, label: 'Dekad 4', years: '2016–2024', data: { ballad: 4, rock: 3, tradisi: 1, hiphop: 1 }, total: 9 },
];
const genreTotals = {};
genres.forEach(g => {
genreTotals[g.key] = decades.reduce((s, d) => s + d.data[g.key], 0);
});
const toggleDekad = (id) => { setActiveGenre(null); setActiveDekad(activeDekad === id ? null : id); };
const toggleGenre = (key) => { setActiveDekad(null); setActiveGenre(activeGenre === key ? null : key); };
const isDimmedRow = (dekadId) => activeDekad !== null && activeDekad !== dekadId;
const isDimmedSeg = (dekadId, genreKey) => {
if (activeDekad !== null && activeDekad !== dekadId) return true;
if (activeGenre !== null && activeGenre !== genreKey) return true;
return false;
};
const cardBg = { backgroundColor: '#161616' };
return (
);
}
/* ============== FOOTER ============== */
function Footer() {
return (
);
}
/* ============== BACK TO TOP ============== */
function BackToTop() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => setVisible(window.scrollY > 600);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
if (!visible) return null;
return (
);
}
Object.assign(window, {
Header, Hero, DariKacamata, VideoWall, FilterBar, Panel, PenutupPanel, Waveform,
EssayIndex, EraGallery, RadarConsensus, GenreFlow, GenreFlowCard, PullQuoteBand, ReaderExcerpt, VideoReel, Footer, BackToTop
});
{data.eyebrow}
{data.title} {data.titleSub ? {data.titleSub} : null} {data.titleSub2}
{data.body}
{data.note ?{data.note}
: null}
{data.stats.map((s, i) => (
))}
{s.n}
{s.lbl}
{/* Left: pull-quote style title */}
Mengapa siri ini
{/* Right: body + CTA */}
Dari Kacamata
Mengapa siri ini
wujud.
Dunia Kreatif MM, Antologi Jiwa Lagu lahir sebagai usaha merakam semula makna Anugerah Juara Lagu yang bukan sekadar pertandingan tahunan, tetapi juga sebagai cermin panjang perjalanan muzik, budaya dan ingatan rakyat Malaysia.
Melalui empat pintu masuk naratif: Seni & Jiwa, Ekosistem, Inovasi dan Warisan — siri ini mengajak pembaca menelusuri AJL sebagai arkib emosi negara: tempat lagu bukan sahaja dinyanyikan, tetapi juga hidup dalam ruang tamu, ingatan keluarga, perdebatan peminat, kegelisahan industri dan harapan generasi akan datang.
Inilah usaha untuk mendengar semula budaya sebuah negara; bukan dengan nostalgia yang pegun, tetapi dengan kesedaran baharu tentang nilai karya, masa depan muzik tempatan dan tanggungjawab memastikan lagu Malaysia terus bernyawa melangkaui pentas, platform dan zaman.
17 Esei · Dinding Video Muzik
Tujuh belas pintu masuk.
Naratif muzik kita.
Setiap panel ialah satu bilik dalam memori budaya AJL. Tapis ikut dekad atau tema, atau buka mana-mana panel untuk membaca esei penuh.
{main.map((e) => (
{/* Penutup — closing essay, horizontal panel */}
{penutup && (
NARATIF
{filters.naratif.map((n) => (
))}
TEMA
{filters.themes.map((t) => (
))}
{activeCount} / {totalCount} ESEI
{hasFilter && (
)}
Pembukaan · Bacaan Pembukaan
{essay.title}
{essay.subtitle}
{essay.readMin} MIN · BACAAN PEMBUKAAN
Penutup · Esei {essay.no}
{essay.title}
{essay.subtitle}
{essay.readMin} MIN · BACAAN PENUTUP
Senarai Esei · 13 Cluster Naratif
Enam belas esei.
Naratif muzik kita.
Dari ruang tamu pada malam Sabtu, ke fanbase digital. Dari trofi pertama 1986, ke soalan tentang AI dan masa depan. Setiap esei membaca satu sudut AJL — dan, melalui AJL, satu sudut Malaysia.
-
{essays.map((e) => (
- onSelect(e.no, e)}
role="button"
tabIndex={0}
>
{e.bgImage && (
)}
{e.no}{e.cluster}
{e.title}
{e.subtitle}
{e.readMin} min {e.level}
))}
Petikan · Daripada Esei 01
"
{quotes[0].body}
{quotes[0].attribution}
{quotes.slice(1).map((q, i) => (
{q.attribution}
))}
{q.body}
{data.eyebrow}
{data.cluster}
{data.title}
{data.standfirst}
{data.paragraphs.map((p, i) => ({i === 1 ? {p} : p}
))}
3 / 18 minit
Arkib Visual · Empat Babak
Dunia kreatif,
empat rupa pentas.
Pakaian, prop, lampu, gaya rambut, cara pegang mikrofon — setiap dekad AJL membawa estetika sendiri. Imejan arkib ini menjadi tulang belakang visual siri digital.
{eras.map((e) => (
))}
{e.year}
{e.label}
{e.caption}
{/* Card Header */}
);
}
/* ============== GENRE FLOW — Data & Visualisasi ============== */
function GenreFlow() {
const sectionStyle = { backgroundColor: '#0D0D0D', borderTop: '1px solid rgba(255,255,255,0.08)', borderBottom: '1px solid rgba(255,255,255,0.08)' };
return (
Radar Konsensus AI
Lima model AI diminta memilih Juara Lagu Sepanjang Zaman. Radar ini menunjukkan konsensus merentasi 13 lagu · 5 LLM.
{/* Callout metrics */}
{/* Main layout: radar + song list */}
{[{label:'Pemenang Konsensus',value:songs[0].title,sub:'Hybrid '+fmt(songs[0].hybrid)+' · '+songs[0].first_votes+' undi #1',highlight:true},
{label:'Pesaing Terdekat',value:songs[1].title,sub:'Hybrid '+fmt(songs[1].hybrid)+' · '+songs[1].first_votes+' undi #1'},
{label:'Perplexity #1',value:'Cindai',sub:'Skor 64.6 · Kemas kini terkini'}].map((m,i) => (
))}
{/* Controls row */}
{m.label}
{m.value}
{m.sub}
Mod carta
Pilihan pantas
{[{k:'leaders',l:'2 Teratas'},{k:'top5',l:'Top 5'},{k:'multi',l:'2+ LLM'},{k:'all',l:'Semua'}].map(p => (
))}
{/* Radar SVG */}
{/* Bottom note */}
{/* Tooltip */}
{hoveredSong && (
)}
{/* Song list */}
{hoveredSong.title}
{hoveredSong.year} · {hoveredSong.artist}
Hybrid: {fmt(hoveredSong.hybrid)} · Rank: {fmt(hoveredSong.rank_avg)} · Norm: {fmt(hoveredSong.norm_avg)}
Siri Lagu · Pilih untuk bandingkan
{songs.map((s,idx) => {
const color = palette[idx % palette.length];
const isOn = selected.has(s.id);
return (
toggleSong(s.id)} style={{
display: 'grid', gridTemplateColumns: '10px 1fr auto', gap: '0.5rem', alignItems: 'center',
padding: '0.5rem 0.625rem', borderRadius: '0.625rem', cursor: 'pointer',
border: isOn ? '1px solid '+color+'66' : '1px solid rgba(255,255,255,0.05)',
background: isOn ? color+'0D' : 'rgba(255,255,255,0.02)', transition: 'all 0.2s' }}>
{fmt(s.hybrid)}
);
})}
{s.title}
{s.year} · {s.artist}
Cindai muncul sebagai pemenang konsensus — #1 dalam Perplexity, Z.ai dan Grok, #2 dalam Claude dan Gemini. Tanya Sama Itu Hud Hud kekal kuat (#1 Claude & Gemini) tetapi profil radar Cindai lebih stabil dan luas.
{/* Section Header */}
AJL dalam angka.
{/* Radar Konsensus Card */}
Data & Visualisasi
AJL dalam angka.
Empat dekad, satu peta.
Data editorial tentang evolusi genre, tren pemenang, dan perjalanan budaya AJL selama empat dekad.
{/* Card Header */}
);
}
/* ============== VIDEO REEL (looping archive footage) ============== */
function VideoReel() {
return (
Aliran Genre Pemenang
Klik dekad atau genre untuk menyerlahkan data. Jumlah: 39 pemenang · 4 dekad · 4 genre utama.
{/* Decade Buttons */}
{decades.map(d => {
const isActive = activeDekad === d.id;
return (
);
})}
{/* Stacked Bar Rows */}
{decades.map(d => (
{/* Genre Legend Buttons */}
toggleDekad(d.id)}>
))}
{d.label}
{d.years}
{genres.map(g => {
const val = d.data[g.key];
if (val === 0) return null;
const pct = (val / d.total) * 100;
const dimmed = isDimmedSeg(d.id, g.key);
return (
{val >= 2 && {val}}
);
})}
{d.total}
{genres.map(g => {
const isActive = activeGenre === g.key;
return (
);
})}
{/* Summary Stats */}
{genres.map(g => (
))}
{g.label}
{genreTotals[g.key]}
pemenang
Bahan Arkib Dunia Kreatif
Pentas ini masih bersuara.
Setiap arkib membawa kita kembali ke malam tertentu, ke ruang tamu tertentu dan ke ingatan tertentu.