Every bento in the reel was designed and coded by Fable 5.2. Below are the five prompts in the order I used them, the twelve style recipes, and every bento live in your browser, ghost cursor and all.
Paste these into one conversation, in order. Each step builds on the last, so don't skip to the end.
Build a bento grid of 14 polished UI components as one self-contained HTML file (inline CSS and JS, no images, everything drawn in code): a music player, a toggle, an analytics chart with range tabs, a search field, a like button, a storage ring, a vertical slider, a dock, a notification stack, a calendar, a team row with an invite button, a download button, a stepper and a checklist. One 8×4 grid in landscape and the same tiles re-flowed into a 4×8 grid in portrait. Real copy, no lorem ipsum, nothing clipped in either orientation.
Now give me the same bento in three completely different visual styles, as three separate files, so I can compare them side by side. Commit hard to each style's typography, materials and motion personality. Don't reskin one design.
Pick your favourite, then keep going in that style, or swap in one of the 12 style recipes below.
Make every tile a different, real component that someone would recognise from a product: no empty space, no decorative filler. Each tile should look like a senior designer's shot in this style.
Add micro-interactions to everything: hover and press feedback on every control, animated state changes with custom easing (springs for soft materials, hard steps for mechanical ones), and ambient motion on at least five tiles while idle. Then add a ghost cursor that demos the best interactions by itself — clicking, dragging the sliders, typing into the search — in a sensible path across the grid, about 20 seconds long.
Animate the tiles in with a staggered entrance that feels native to the style (not a generic fade-up), let the cursor demo play, then animate everything out with an exit that matches, and loop forever. Nothing may animate from scale(0); use only transform, opacity, filter and clip-path for motion.
Swap any of these into step 2 (or send it after step 1). Tap a preview to open that bento live.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: thick glass slabs over a colourful photo backdrop, with real refraction on the edges (a WebGL glass layer, not just backdrop blur), soft specular highlights, white controls, rounded geometric sans.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: one matte off-white material; everything extruded or pressed in with paired light and dark shadows; one restrained accent for state. Theme: a smart-home panel (thermostat dial, room rail, energy bars, door lock, fan stepper). Pressing feels like soft rubber.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: 4–5 px black borders, hard offset shadows with zero blur, acid yellow / hot pink / cobalt / mint, chunky caps grotesk plus a mono, rotated stickers. Buttons physically travel into their shadow. Tiles stamp in.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: puffy inflated shapes in candy pastels, double inner shadows and a soft coloured drop shadow, friendly rounded type. Theme: a wellness/habit app with clay faces. Squash-and-stretch springs.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: near-black surfaces, rotating conic gradient borders, aurora glows bleeding out from under tiles, thin precise lines, mono numbers. Theme: an AI compute console. Light sweeps and charge-ups on press.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: a synth faceplate: brushed aluminium and cream enamel, knurled knobs, rocker switches, screws, LCD and 7-segment displays, LEDs. Theme: step sequencer, VU meters, tape reels. Switches snap, needles have inertia.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: an invented 1980s desktop: black and white only, dithered greys, striped title bars, pixel fonts, inverted selection. A file browser, a working calculator, a paint palette. Stepped motion, zoom-rect window opens.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: a notebook: dot-grid paper, wobbly ink outlines (SVG turbulence filters), hatching, highlighter swipes, sticky notes, handwriting fonts. Strokes draw themselves on; lines boil gently.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: cream paper, red / yellow / blue / black, built only from circles, half-circles, squares and triangles on a strict grid. Controls are the shapes. Shapes rotate by quarter turns and assemble on entry.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: phosphor-green monospace on black, box-drawing frames, scanlines, bloom, inverted-video selection, `[x]` checkboxes and `[#####.....]` progress. Tiles power on from a bright line and collapse like a tube turning off.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: a printed magazine as an interface: paper white, black ink, one signal red, a huge display serif against a small grotesk, hairline rules, numbered sections. Rules draw, then text rises from masks.
Now give me the same bento in this style, as one self-contained file. Commit hard to its typography, materials and motion personality: two- and three-colour spot inks (fluoro pink, federal blue, sunflower yellow) overprinting with multiply blending, misregistered layers, halftone dots, paper grain, bold condensed poster type. Ink layers print in pass by pass.