The live-tile gallery

Every scene below ships inside this template and is rendered here by the same engine your pages use — this page reads the live registry, so it is always exactly as current as the release you are on. Each card names its kind, lists the primitives the scene is built from, and hands you the complete spec.

This is a template, designed for you to alter and make your own.

This page shows you how to browse every shipped scene and borrow one as the starting point for your own. Copy it to start a page of your own, change anything, or delete the whole app/(marketing)/recipes folder — nothing else in the template depends on it. Example pages are not indexed by search engines.

How to borrow one

Pick the scene closest to what you want and copy its spec.
Paste it into components/visual/specs/cards/site.ts under your own key in SITE_CARD_SPECS, and give it a new id.
Tune it — colors take brand tokens ($key, $accent…), sizes are fractions of the tile, motion is numbers.
Render it with <VisualTile spec={…} /> — or via your own scene registry if you build one.

`bourbon`

20 elements — silhouette ×7, shape ×5, cylinder ×3, liquid ×3, glow, shadow

`bridal`

11 elements — curve ×3, burst ×3, shape ×3, glow, motes

`buffet`

14 elements — shape ×4, cylinder ×3, arc ×3, silhouette ×2, glow, motes

`candlelight`

5 elements — group ×3, glow, motes

`casino`

12 elements — shape ×7, rect ×2, glow, curve, motes

`cinema`

15 elements — star ×8, glow, shootingStar, rect, presentation, curve, shadow, crowd

`cinema-lawn`

18 elements — shape ×8, star ×4, glow ×2, silhouette ×2, rect, curve

`club`

4 elements — record ×2, glow, silhouette

`community`

6 elements — cloud ×2, grid ×2, shape, silhouette

`conference`

4 elements — glow, rect, bars, grid

`drone`

2 elements — curve, group

`first-dance`

5 elements — glow ×2, group, bokeh, silhouette

`foam`

6 elements — motes ×3, glow, silhouette, group

`frame`

11 elements — rect ×4, shape ×3, glow, arch, bulbs, arc

`gala`

9 elements — glow ×3, shape ×2, beam ×2, pendants, silhouette

`groom`

6 elements — curve ×2, shape ×2, beam, rect

`jersey`

4 elements — silhouette ×2, glow, group

`lobby`

15 elements — glow ×4, silhouette ×3, cone ×3, cylinder ×2, shape ×2, motes

`margarita`

11 elements — shape ×3, goblet ×2, liquid ×2, glow, burst, silhouette, motes

`marquee`

3 elements — glow, marquee, silhouette

`mountain`

3 elements — shape, silhouette, motes

`mystery`

23 elements — rect ×11, arc ×4, glow ×2, silhouette ×2, shape ×2, group, motes

`officiant`

3 elements — glow, group, shadow

`party`

2 elements — bulbs, confetti

`poolside`

7 elements — ripples ×3, glow ×2, silhouette, group

`production`

18 elements — silhouette ×8, beam ×4, shape ×4, presentation, crowd

`pub`

13 elements — shape ×4, glow ×3, silhouette ×2, curve ×2, motes, grid

`rig`

11 elements — silhouette ×6, beam ×2, shape ×2, bars

`rooftop`

6 elements — glow ×2, moon, windows, rail, bulbs

`screens`

5 elements — presentation ×3, glow, silhouette

`serene`

4 elements — glow, ripples, bowl, silhouette

`silent-disco`

11 elements — group ×6, glow ×2, beam ×2, motes

`skyline`

6 elements — glow ×2, presentation, silhouette, lectern, crowd

`stage`

9 elements — rect ×2, beam, glow, motes, mic, shape, shadow, silhouette

`sunset`

5 elements — glow, burst, shape, silhouette, windows

`taco`

9 elements — tacoShell ×3, papelPicado ×2, glow, silhouette, citrusWheel, motes

`tasting`

6 elements — glow, goblet, liquid, motes, shape, burst

`toast`

5 elements — glow ×2, group ×2, confetti

`wedding`

4 elements — glow, aisle, arch, motes

Option rows

A different class of scene, for a different shape of box. These sit behind the option rows of a question — an 11:1 strip with the label along the left rather than a near-square card with its copy underneath — so they are shown here as real rows, at the height the flow player actually renders. One thing moves in each, on purpose. Put the token in an option’s style_token and it is live; there is no component to add.

3 elements — silhouette, wash, motes

The rules that keep tiles good

Subject in the top half (the card’s own copy owns the bottom) · one nameable object per scene · motion budget is enforced by the engine’s own tests, so a page of tiles stays cheap.