Aether
Dynasty
46,656 Ways - A Cascading Slot Built with Next.js & Vibe Coding, Wrapped in Neon Antiquity
Aether Dynasty is a fully playable browser slot with a cascading expanding board - seven Greek-mythology symbols, a Golden Frame that transforms into a Wild, board growth from 4,096 to a maximum 46,656 ways, Free Games with a rising multiplier, and a maximum payout of Rs 10,000,000. The whole engine runs client-side with no backend. The aesthetic is "Neon Antiquity" - an ancient torchlit temple carved in stone, electrified by holographic scanlines and a counter-rotating astrolabe rune-ring. Built entirely through vibe coding.
The Build Challenge
A cascading expanding-board slot is one of the most complex game mechanics in iGaming. Unlike a fixed-reel slot, every spin triggers a chain: winning cells are eliminated, new symbols drop, the board dynamically grows as cascades land, and the entire win evaluation re-runs after each step. Wild symbols have survival counters that must decrement correctly. Golden Frames transform into Wilds only on elimination. Free Games trigger only when the board hits its maximum size. All of this had to run synchronously, be replayed smoothly in the UI, and produce statistically fair outcomes - with no server to verify any of it. The added constraint: it was all built through vibe coding.
"A cascading slot isn't just one game per spin - it's an unbounded chain of game states, each depending on the one before it. You have to resolve the whole chain before showing the player anything."
Design Problem
Build a "Neon Antiquity" slot - a credible blend of an ancient Greek stone temple (Orbitron displays, Marcellus SC inscriptions, torchlit stone) with holographic neon grids and a rotating astrolabe rune-ring - that feels cohesive, not kitsch.
Technical Problem
Implement a cascading board that expands reel-by-reel through consecutive wins, from 4,096 starting ways up to 46,656 maximum - resolving the full cascade chain in one engine pass, then replaying it step-by-step in the UI.
The Constraint
Describe each sub-system to an AI and iterate - which demands a precise mental model of cascade order, Wild counter logic, board height tracking, and Free Game trigger conditions, or the generated code silently breaks.
Tech Stack & Approach
The game is a single Next.js (App Router) application in TypeScript, bundled with Turbopack and deployed to Netlify. The key architectural decision is its imperative controller pattern - the React component renders the full game markup once on mount and never re-renders. All subsequent state changes are DOM mutations driven by controller.ts. The game engine (engine.ts) resolves the entire cascade chain synchronously and returns it as a data structure; the controller then replays it visually, step by step.
Simple Slot vs. How Aether Dynasty Is Engineered
- Pick one random symbol per reel cell - no cascade, no board growth
- Fixed grid (6ร4 forever) with static pay-line evaluation
- React state drives every frame โ stale closure bugs + unnecessary re-renders
- Cascade engine resolves the full chain (eliminate โ drop โ refill โ expand) in one pass
- Board heights tracked per-reel; ways = product of all heights (max 6โถ = 46,656)
- Imperative controller mutates DOM by ID - no React state, no re-render overhead
Stack at a Glance
"Single Next.js app - no database, no server. The cascade engine lives entirely in the browser."
"The full cascade chain is resolved in a single synchronous engine call and returned as a replay-able data structure."
"Symbol art in PNG; astrolabe rune-ring, torches and pillars generated as SVG at runtime. No sprite sheets."
Core Modules
CascadeStep[] for UI replay.Architecture & Game Loop
The Cascade Loop
Every spin resolves in two phases. First, the engine computes the entire cascade chain synchronously - the result is an array of steps. Then the controller replays each step visually with timed delays. This separation means the outcome is always known before the first animation frame plays, which makes turbo mode trivial (skip the animation) and keeps the controller decoupled from the engine entirely.
The cascade chain has no fixed length - it continues until no new winning combinations form. In the best case, the board expands every cascade and reaches 46,656 ways, triggering Free Games. The engine handles all of this in a single synchronous call before the first animation frame begins.
The Imperative Controller Pattern
Game.tsx renders the complete game markup once - the board cells, HUD, modals, reels. It never re-renders. On mount, useEffect calls boot() from the controller, which attaches all event listeners and begins the game loop. After that, every visual update is a direct DOM mutation by element ID. This makes it behave more like a game engine than a typical React app - and avoids the stale closure and reconciliation overhead that would come from tracking a cascading board in React state.
engine.ts
Pure logic. Takes the current board + heights + bet, resolves the full cascade chain, returns SpinResult with cascades, totalWin, finalHeights, and a Free Game trigger flag.
controller.ts
Boots from useEffect via boot(). Calls the engine on each spin, then replays the cascade steps frame-by-frame through DOM mutations. Owns turbo, auto-spin, and sound.
symbols.ts
Registers 7 symbols + Wild. Each symbol has a weight (frequency on reels) and a per-way multiplier table for 3/4/5/6 matches. PNG asset paths are listed here.
rules.ts
Defines paytable values, Wild counter logic, Golden Frame columns (reels 2-5), free-game multiplier progression, Golden Treasure trigger conditions, and the Rs 10M payout cap.
Game Systems & Visual Identity
The board starts at 4 rows ร 6 reels = 4,096 ways. Each cascade that produces a win expands one participating reel by one row (randomly selected from touched columns), slowly growing the board toward 46,656 ways (6โถ). Ways are always the product of active row heights across all six reels - waysOf(heights) multiplies them together. Reaching the maximum triggers Free Games.
// engine.ts - cascade resolved in one pass, replayed in UI
spin(board, heights, bet): SpinResult {
cascades: CascadeStep[] // every eliminate โ drop โ refill step
totalWin: number // ฮฃ(ways ร multiplier ร bet) across all cascades
finalHeights: number[] // [h0..h5] after last board expansion
maxReached: boolean // 6^6 = 46,656 โ triggers Free Games
}
// One cascade step (applyCascade)
1. Eliminate winning cells // remove matched symbols
2. Transform Golden Frame โ Wild // counter randomly set 1-3
3. Decrement Wild counters // remove Wild if counter hits 0
4. Apply gravity: survivors fall, gaps rise
5. Refill from top with new symbols
6. expandCols: one touched reel += 1 row // until height === MAX_ROWS (6)Symbols - The Seven Faces of the Dynasty
Seven symbols populate the reels, weighted so the premium Greek gods appear rarely and the card suits fill frequently. All pays are per-way - the win multiplier is applied once for every matching combination the ways engine finds.
"High multipliers, low weight. A Zeus cluster on a full-board cascade is the pivotal moment the game is designed around."
"Common fillers that keep cascades ticking. Their frequency drives board expansion even when gods don't land."
"Never placed randomly - only born from a Golden Frame when it's eliminated. Persists through multiple cascades if the counter stays above zero."
Special Features
- Triggered when the board hits 46,656 ways (all reels at max height)
- 6 starting games; each elimination that creates a Wild can grant +1 extra (up to 24 total)
- Rising multiplier - increments every winning spin, capped at 3ร
- Triggers when the board hits 46,656 ways inside a Free Games session
- Randomly picks one symbol type, converts the entire board to it, and resolves continuously
- Maximum payout: Rs 10,000,000 - the absolute hard cap
Deep warm blacks from ancient stone, ink-parchment for text, neon cyan for the holographic layer, gold for divine symbols, and plasma purple for the mystical atmosphere. The tension between stone warmth and neon cold defines the aesthetic.
In-Game Screens
The game across its key states - main board, the board expanding through a cascade, a win result, auto-spin and sound configuration, and the transaction history. Click any screen to open it full-size.
The Vibe-Coding Build Process
Vibe-coding a cascading slot works only if you own the game logic before you open a prompt. I designed the cascade sequence, board expansion rules, symbol weights, per-way multipliers, and Free Game trigger conditions entirely on paper first. Only then did I start prompting - describing one sub-system at a time and verifying each against the spec before layering the next. The AI accelerated every implementation step; the spec made the output trustworthy.
1 ยท Design the Math
Specified the cascade sequence (eliminate โ transform โ decrement โ gravity โ refill โ expand), symbol weights and per-way multipliers, board height rules, and Free Game trigger condition - all verified on paper before a single prompt.
2 ยท Build the Engine
Implemented engine.ts first - the pure cascade resolver that takes a board state and returns the complete chain as CascadeStep[]. Validated payouts manually against known board states before moving on.
3 ยท Imperative Controller
Built controller.ts as the only piece that touches the DOM. The boot() pattern keeps React out of the game loop entirely - no state, no re-renders, no stale closures mid-cascade.
4 ยท Neon Antiquity Skin
Translated the three-font system (Orbitron / Marcellus SC / Spectral), the stone-and-neon colour palette, the astrolabe rune-ring SVG, and the torch/pillar decorative layer into the CSS and runtime SVG generation layer.
5 ยท Polish & Ship
Added turbo spin (skips animation, shows result instantly), configurable auto-spin, two-channel audio (Music / Effects with individual sliders), transaction history modal, and deployed the static export to Netlify.
Outcome & Impact
Key Outcomes
"From 4,096 to 46,656 ways through cascades - seven symbols, a Golden Chalice Wild, Free Games, Golden Treasure, and a Rs 10M payout ceiling - built end-to-end through vibe coding."
๐ Outcome
A shipped, playable browser slot: cascading board expansion (4,096 โ 46,656 ways), 7 weighted symbols, Golden Frame โ Wild transformation, survival-counter Wilds, Free Games with rising multiplier, Golden Treasure feature, configurable auto-spin, and two-channel audio - all client-side.
๐ง Challenge
Cascade logic has a strict ordering constraint - get eliminate/transform/decrement/gravity/refill/expand wrong and wins are miscounted or Wilds vanish too early. Getting this right through vibe coding required writing the spec before writing a single prompt.
๐ก What I Learned
The imperative controller pattern is the right architecture for a complex game on React - no state, no reconciliation overhead. The AI generated it correctly only after I specified the pattern explicitly. Design-first vibe coding is the only vibe coding that works at this complexity level.
๐ Next Steps
Add a provably-fair seed system so players can verify spin outcomes, implement a progressive jackpot tier above the Golden Treasure feature, and build a leaderboard backed by a lightweight serverless function.