Fox Wif Hood: from web page to real game
The short version. The arcade today is a React web page: the six cabinets animate with CSS and DOM transforms, the art is emoji and a few drawn caps, and every sound is synthesized. To feel like a Miniclip or Stake game on a phone it needs three things at once: a game engine driving the scenes, real drawn art, and real audio. None of the three works without the other two.
Recommendation: Phaser 3 as the engine, flat 2D sprites in the locked paper style (no 3D coin, no lit dice), Higgsfield filling the small art gap from the kit's own prompt recipe, ElevenLabs for the fox's voice and every sound effect, Suno for the music, Claude writing every line of engine code and running the capture-based QA, and a human looking at every scene before it ships. The overnight run on 2 Sep proved the hard part: a Plinko with real physics that still lands in the bucket the chain decided, and a Mines board with flip reveals and explosions, both built unattended on Phaser.
What the brand kit decides. Brand Kit v2 (fwh-brand-kit.pages.dev, locked 3 Sep) closes three questions this plan used to leave open. The art direction is the paper world: flat fills, ink outlines, hard offset shadows, no gradients, no glow, no glass. That rules out the glossy Miniclip reskin and any 3D route, and it means the engine's juice must be ink and paper too: squash, shake, marker-dash sparks and flat coin confetti, never additive glow. Emoji are gone from the UI and the slot reel symbols, coin faces, dice, stash, mascot states and icon set are already drawn, so the art job is a gap fill of about a dozen pieces, not forty. And the fox's voice samples in the kit's state map are the casting brief for ElevenLabs.
1. Engine options
What matters for us: it must run inside a Telegram or Farcaster webview on a mid-range phone, mount inside the existing React cabinet without touching the money logic, and be something Claude can build end to end from text. That last point rules out anything editor-driven.
| Engine | What it is | Fit for the arcade | Claude can build it | Load on a phone |
|---|---|---|---|---|
| Phaser 3 | 2D web game engine in JavaScript: tweens, particles, camera effects, a 3D mesh object, Matter physics built in | Best fit. One dependency, loads lazily inside the cabinet, the seam stays untouched. Already proven on Plinko and Mines. | fully | 1.5 MB, fetched on the first cabinet open, not on the lobby |
| PixiJS 8 + GSAP + matter-js | A fast 2D renderer plus separate tweening and physics libraries | Same fit, smaller and more bespoke, but three libraries to keep in step and more code per scene. | fully | About 0.6 MB combined |
| Godot 4 (web export) | A full game engine with an editor and its own scripting language | Great for a standalone game. Awkward here: it exports as its own app in an iframe, wallet and chain calls cross a bridge, and older webviews struggle. | mostly scene files are text, the editor is still needed to export and debug | 20 to 40 MB |
| Unity WebGL | The industry engine | Wrong tool for a webview arcade: slow cold loads, licensing, and the editor is mandatory. | partly | 10 to 30 MB |
| Cocos Creator | Editor-based HTML5 engine used by many instant-game and casino studios | Technically a good fit and it is what several Miniclip-feel HTML5 studios use, but scenes are assembled in the editor. | weakly Claude writes scripts, cannot compose scenes | 2 to 4 MB |
| Three.js or Babylon.js | 3D renderers | Only if we want true 3D dice and coins. More art, heavier on low-end phones. Phaser's mesh object already gives a lit coin and cubes. | fully | 0.7 to 1.5 MB |
| Rive (add-on) | Animation runtime for hero pieces: the coin, the mascot, the wheel | Excellent alongside any engine above. Designer-quality motion from a tiny runtime. | assets need a designer Claude wires them in | 0.2 MB |
| Construct 3, GDevelop | No-code editors | Fast for a human, a dead end for Claude. | barely | varies |
Pick Phaser 3, flat 2D. Against the brand lock the choice gets easier. Three.js and Babylon are out: a lit 3D coin is a gradient by definition and the kit forbids it. PixiJS's edge is bespoke rendering, and the paper style needs none of that; it needs squash-and-stretch, particles made of flat ink shapes, camera shake and a physics Plinko, all of which Phaser has built in and already running on this codebase. Phaser's mesh object stays unused.
Rive: not now. Rive is a rig-and-state-machine tool that needs a designer working in the Rive editor; Higgsfield produces stills and video, not Rive files, so having Higgsfield does not cover it. The paper style already animates as cut-out swaps and squash-and-stretch, which Phaser tweens do without a second authoring tool. Revisit only if we want a hand-rigged fox with mouth movement synced to his voice lines.
2. Higgsfield as the artist
Because the engine does the motion (tweens, physics, particles, the mesh coin), the art only has to be still pieces. No frame-by-frame animation, which is the one thing image generation is bad at. That makes Higgsfield viable as the whole art department for the scenes.
The style is decided
Brand Kit v2 locks it: one world, paper. Every sprite is drawn on the same tan with the same wobbly marker, flat fills, ink outlines, hard offset shadows, and the fox never holds text. The kit already ships a prompt recipe and two style anchors (the turnaround and the expression sheet), so every new piece is generated from those references, not from a fresh description.
What already exists (do not redraw)
- Slot reel symbols: fox, feather, coin, hood, dice, bomb, crown, gem, sack at 160 px. These replace the emoji reels outright.
- Game props: coin heads and tails, coin stacks, dice, the stash.
- Mascot states for every round phase (idle, playing, win, lose, jackpot, rekt, push) plus the tier-7 reaction.
- The 36-icon set, the logo system, the pattern tile.
The gap the scenes need (Higgsfield, from the kit's recipe)
| Cabinet | Pieces | Notes |
|---|---|---|
| Plinko | peg, bucket cup, board rail | The dropped object is the existing coin. Pegs must read at 6 px: a solid ink dot with one highlight. |
| Mines | closed crate, opened crate, scorched crate | One generation as a row of three so the states match. The bomb and sack icons already exist for the faces. |
| Wheel | rim, pointer flap | Hub is the coin mark. Wedges and multipliers are drawn in code in the brand colours so the labels stay crisp. |
| Flip | coin edge strip | Faces exist. The edge is what shows mid-flip in a flat 2D turn. |
| Dice | felt patch | Dice exist as a prop; the scene needs one clean face for each value, sliced from a 3 by 2 sheet generated once. |
| Shared | marker-dash spark, flat confetti coin, dust puff, the tier-5 slow clap reaction the kit lists as open | Particle art must be flat ink shapes. No glow textures anywhere. |
About a dozen images. Each is generated large on plain tan, background-removed, cropped and scaled by Claude, and packed into texture atlases next to the existing kit files.
What goes wrong, and the fix
- Style drift. The kit's own rule applies: every drawing comes from the two anchor sheets, and a long snout or a green hood means the generation drifted and gets binned.
- Baked-in backgrounds and shadows. Ask for none, run background removal, and reject anything with a floor shadow.
- Sets that must match. Slot symbols, coin faces, crate states: always generated together in one image, never separately.
- Text in images. Never. Every number and label is engine text.
- Test before spending. A three-piece test batch (peg, closed crate, spark) proves the pipeline before the rest.
3. Audio: three tools, three jobs
Higgsfield draws. Sound is split by what each tool is best at: ElevenLabs for the fox's voice and every sound effect, Suno for music. All three outputs land in one place, the arcade's existing sound module, which already unlocks audio on the first tap and owns the mute toggle.
ElevenLabs: the fox's voice
The script already exists: every cabinet has pools of fox lines for idle, playing, win, lose and jackpot, about 90 lines in his voice, and the brand kit's state map adds a sample line per phase.
- Cast once with voice design: three candidates from the brand brief (smug, raspy, a little unhinged, baby fox energy, never begs, never explains). Pick one, save it, and every line uses that voice so he stays one character.
- Generate the 90 lines as clips of 1 to 3 seconds. The on-screen ticker stays; the voice plays with it.
- Rules in code so he does not wear out his welcome: speak on about one win in three, every jackpot, never the same line twice in a row, a cooldown per beat, and a separate voice-off toggle next to mute.
ElevenLabs: sound effects
About 25 effects from text prompts, 3 variants of the frequent ones so they do not fatigue: peg hits and the coin landing, reel spin-up and each reel stop, the jackpot fanfare, the wheel ratchet and settle, the coin whoosh and thud, dice rattle and impact, crate creak and the flip reveal, the explosion, chips cashing out, button presses. Every effect is trimmed tight (no leading silence, a peg tick is under 80 ms) and loudness-matched so a coin never spikes over a voice line. The tiny UI ticks may stay synthesized because they are already instant.
Suno: music
- Instrumental only, in the paper world's mood: a lo-fi saloon shuffle rather than a Vegas orchestra. One lobby loop, one shared cabinet bed, and a jackpot sting. Three or four pieces total, not one per game; the effects carry the per-cabinet identity.
- Suno returns fixed-length songs, not loops. Claude finds a bar-aligned loop point and crossfades it so the bed cycles without a seam.
- Music ducks under the fox's voice and the jackpot sting, sits at a low default level, and has its own toggle. Many people play with music off; the effects and voice must carry the feel on their own.
The rules that keep audio from feeling broken
- Phones block sound until a tap. The existing sound module already unlocks on the first touch; music starts on that same gesture.
- Latency kills a peg tick. Effects are preloaded and decoded into memory when a cabinet opens; music streams.
- Size: 90 lines plus 25 effects compressed is 3 to 5 MB, loaded per cabinet, never on the lobby; each music loop is 1 to 2 MB and streams.
- Rights: ElevenLabs and Suno commercial plans are needed for use in a product that takes money. Confirm the plan tier before the batch runs.
4. The build order
Engine (Phaser recommended) and the fox's voice. The art direction is already locked by the brand kit.
Aydan + Caelan · 1 callLobby, cabinet chrome, wallet, ladder, panel, built to section 5 of the kit (the paper shell already on feat/ui-polish): 4 px ink offsets, feather primary, fox orange money-in, red cash-out only, emoji removed, kit icons in. The lifecycle chrome (pending, reclaim, paused, house full) is kept as is.
Claude, reviewed by you · 2 daysThree-piece test batch from the kit's prompt recipe, then the dozen scene pieces. Claude drives Higgsfield, cleans and atlases the new pieces alongside the existing kit files; you approve each cabinet's set before the next.
Higgsfield + Claude · 1 day including approvalsPlinko first (physics and the bridge already work), then Mines, Wheel, Slots, Flip, Dice. Each one runs through the headless capture gate (every lifecycle state on two viewports, an 8-frame reveal filmstrip, 60 fps check) and then a human looks at the filmstrip before it counts. Last time two scenes reported green while rendering nothing; that check is not optional.
Claude in overnight loops, you reviewing captures · about a weekCast the fox and batch the lines and effects in ElevenLabs, generate and loop the three music pieces in Suno, wire everything into the scenes with the frequency and ducking rules. Cheapest phase of the four.
ElevenLabs + Suno + Claude · 2 daysPlay every cabinet on a real phone in Telegram and Farcaster. Tune timings, particle counts and volumes by hand. Confirm the math is untouched (the seeded sim diff must be empty) and the phaser chunk never loads on the lobby.
All three · 2 days5. What carries over from the 2 Sep run
- The engine bridge: one Phaser game per cabinet, mounted inside the React cabinet, destroyed cleanly on exit, with reduced-motion and turbo handled.
- Plinko on real physics: the ball is searched to the chain's bucket and dropped live with the same fixed step, measured drift zero.
- Mines: flip reveals, explosion, the mine wave, chip stream.
- The QA tooling: headless capture driver, filmstrips, per-game engine reports, the build and math gate.
- To redo: Wheel labels, the Slots reels, Flip and Dice. All of it gets rebuilt on the new art anyway.
6. Decisions needed from you two
7. Risks
- Art consistency is smaller now that the kit provides anchors and a recipe, but a dozen pieces still have to sit next to 51 existing drawings without looking new. If the test batch drifts, the existing props get reused more heavily and the gap shrinks.
- Juice that breaks the lock. Engine effects are the easiest place to smuggle in a glow. The scene review checks the brand rule as well as the motion.
- Webview performance on older Android. The gate already measures frame rate in an emulated phone; the target is 50 fps or better on every reveal.
- Self-reported green. Automated checks pass on scenes that render nothing. The human filmstrip review is the guard.
- Scope creep into the math. The chain numbers and the simulation stay frozen through all of this; the engine only performs what the seam decides.