// ============================================================ // Beyond the Falls - MID sections: Worlds · Synopsis · Characters // ============================================================ const { useEffect: useEffectM, useRef: useRefM, useState: useStateM } = React; // ============================================================ // 4) THREE WORLDS // ============================================================ function Worlds() { const [open, setOpen] = useStateM(null); return (

The Worlds

Three worlds

Magic, logic, and the space between. The story lives in the tension that holds them together.

{window.WORLDS.map((w, i) => ( setOpen(w)} /> ))}

{open && setOpen(null)} />}

); } function WorldCard({ w, idx, onOpen }) { const ref = useRefM(null); // layered parallax inside the card on pointer move const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; el.style.setProperty('--px', px); el.style.setProperty('--py', py); }; return ( ); } function WorldModal({ w, onClose }) { return (

{w.body.map((p, i) =>

{p}

)}

{w.pills.map(p => {p})}

); } // ============================================================ // 5) SYNOPSIS // ============================================================ function Synopsis() { const [open, setOpen] = useStateM(false); const spot = window.useSpotlight('rgba(14,156,107,.08)', 600); return (

{/* header row */}

The Story

The story

Season one in eight beats - from a single drop of contamination to a journey only children can make. Power has just passed from Fire to Water, and the cycle that keeps the worlds in balance is about to break.

08 beats
Season 01

setOpen(true)} className="group inline-flex items-center gap-2 rounded-full bg-leaf text-off px-5 py-3 text-[13px] hover:bg-leafdk transition-colors"> Read full synopsis

{/* beats grid - 4 cols × 2 rows, compact */}

{window.SYNOPSIS_BEATS.map((b, i) => ( {/* hover glow */}

{/* watermark number */}

{b.k}

{b.t}

{b.d}

))}

{open && setOpen(false)} />}

); } function SynopsisModal({ onClose }) { const paras = [ 'The story begins on the day of the summer solstice - an important holiday for the magical world. On this day each year, power passes from one element to another, continuing an ancient cycle established to preserve balance and harmony. This year, power passes from Fire to Water.', 'Aquius, the young ruler of the water world, takes the world into his hands, continuing the ancient tradition of the ruling family. In his first year he must prove that he was not chosen by chance, and rightfully deserves the title of Master of the Water element.', 'The capital celebrates, and the familiar order seems unchanged. But almost immediately a troubling event occurs: in a mountain lake - one of the main sources of fresh water - an unknown contamination is found. At first it reads as an accident; soon it is clear this is only the beginning of a far greater threat.', 'While the government tries to understand what is happening, anxiety grows in society. The situation is complicated by a new force - a mysterious organization known as the “University of Success,” which offers simple answers, fast solutions and convenient blame, quietly but steadily eroding trust in the world’s traditional institutions.', 'For Aquius the events become not only a political crisis but a deeply personal trial. The traces lead him to an old family story rooted in his youth. In search of the truth he travels to the World of Rebirth - a place where you cannot hide from your own memories, and where the past begins to speak with the present. There he learns the truth about his family and, for the first time, honestly faces his inner problems.', 'While the adult world tangles in versions and political calculation, the young generation begins to act. Three students - Div, Draco and Sylpha - under the guidance of the experienced Om-club mentor Homorus, begin their own investigation, bound by friendship and a shared desire to understand what is happening to their world.', 'A special role belongs to Div, son of Aquius and future heir to the Water element. Events force him to grow up fast. Before him stands a hard choice: remain in the comfort of childhood - and forever in his father’s shadow - or grow up and accept a responsibility he is not yet ready for.', 'Gradually the teenagers discover that the contamination is connected to another dimension - the Ordy world - where an ancient artifact of the Water element once ended up, not without Aquius’s help. Its disappearance broke the fragile balance between worlds and opened the way for destructive processes.', 'To stop the looming catastrophe, the young friends must do what the adults cannot: pass through the Waterfall of Impressions - the mysterious border between worlds. Adults cannot cross it: their psyche is too rigidly structured, their inner layers split and frozen in contradiction. Only a child’s plasticity and openness can bind the worlds together.', 'A dangerous journey awaits them, full of trials, doubts and discoveries. But it is on this path that they begin to understand the main thing: the strength of the world lies not in magic or power, but in the ability to hear one another, to live not only for oneself, to take responsibility, and to keep balance where it is easiest to lose.', ]; return (

{paras.map((p, i) =>

{p}

)}

); } // ============================================================ // 6) CHARACTERS - grouped grids, clickable // ============================================================ function Characters() { const [open, setOpen] = useStateM(null); // {person, group} return (

The Cast

The cast

{window.CHAR_GROUPS.map((g, gi) => ( setOpen({ person: p, group: g })} /> ))}

{open && setOpen(null)} />}

); } function CharGroup({ g, gi, onOpen }) { return (

{(gi+1).toString().padStart(2,'0')}

{g.name}{g.danger && Antagonist}

{g.tag}

{g.people.map((p) => onOpen(p)} />)}

); } function CharCard({ p, g, onOpen }) { const elc = window.EL[p.el] || g.accent; // One card height for all: 4/5 frame + name plate pinned to the bottom of the frame // (avoids captions “floating up” when a photo card sits next to a text-below sibling) return ( ); } function CharModal({ person, group, onClose }) { const elc = window.EL[person.el] || group.accent; return (

{person.img ? (

{person.name} · key art

) : (

{person.name.slice(0,2)}

portrait · key art

)}

{person.role} {group.tag}

{person.d}

The circle

{group.desc}

); } Object.assign(window, { Worlds, Synopsis, Characters });