CSS Slot Machine
Spin for a random widget style — colors, shape, and text. Hold the reels you like, spin again for the rest, and copy the result straight into the builder's Shapes/Text Label templates or Global Styles.
window.globalVariables every 500ms and re-renders, the same live-update
pattern the Shapes template itself uses, so changing global_style_1 (primary),
global_style_3 (border), or global_style_4 (accent) later in
Styles > Global Styles updates this widget too — no re-run needed. The spun colors are
just its fallback until those variables are set. Nothing here touches your project until
you paste it in yourself.
Each spin picks a random color, shape, and text/font combo and assembles them into a complete, self-contained JavaScript widget — the same kind of code a "+ JavaScript Window" in the Builder runs directly. Nothing is generated on a server: the random combinations, the live preview, and the code output are all produced by plain JavaScript running in your browser tab. Hold a reel you like with its lock button and spin again to re-roll only the others, the same "hold and respin" mechanic as a real slot machine, until you land on a combination worth keeping.
Who it's for
Anyone building a widget in the Builder who wants a starting style fast instead of picking colors and shapes by hand — especially useful when you just need "something that looks decent" to block out a layout.
Linked to Global Styles
The generated widget reads global_style_1/3/4 from the Builder's Global
Styles if they're set, falling back to the spun colors otherwise — so a widget you
paste in today keeps matching your palette if you change it later.
No install, no upload
Spinning, previewing, and generating the code all happen locally in your browser. There's no account and no server round-trip — copy the result and paste it straight into a Builder window whenever you're ready.