Brick Builder Studio is a free-form browser toy where you stack fictional Clay, Sand, and Slate bricks on a 5-by-5 grid, chase five transparent activity milestones worth 200 points each, and export the finished model as a local PNG. The studio awards a maximum score of exactly 1,000 points once you have placed at least twelve bricks across eight occupied cells, used all three materials, hit a stack height of three, and occupied at least four cells. Because there is no target silhouette, no permit sequence, no finite piece inventory, and no hidden solution, the only real skill is working efficiently inside a 5-by-5 board that caps each cell at four bricks. The tips below cover the contracts you actually need, the shortcuts worth memorizing, the milestone thresholds that drive your score, the editing habits that prevent you from accidentally undoing credit, and the export step that turns your current local build into a 1,200-by-900 PNG without uploading anything.
What the Studio Actually Lets You Do
Before chasing tips, anchor yourself in the product contract. Brick Builder Studio runs as a single browser session with a 25-cell grid where every cell accepts between zero and four bricks, and every brick wears one of three visual labels: Clay, Sand, or Slate. There is no time limit, no cost budget, no required symmetry, and no hidden target. The score tracks five named milestones, each awarded once for 200 points, for a cap of exactly 1,000. Restart is the only action that wipes the model, the selected material, and every milestone you have earned.
The live status area reports total bricks, occupied cells, the tallest stack you have built, how many of the three materials you have used, which milestones you have already earned, and your current score. Every cell exposes its row, column, current height, capacity, and top material to assistive technology, so the studio behaves consistently for mouse, touch, and keyboard players.
The Five Milestones at a Glance
Each milestone rewards a specific structural property of your current build. None of them require a fixed silhouette, and none of them penalize you for rearranging bricks later, as long as you do not hit Restart. For a closer look at the threshold math, see Brick Builder Studio Rules: 5 Milestones to 1,000 Points.
| Milestone | Threshold | Points |
|---|---|---|
| Groundwork | Place the first brick on the empty board. | 200 |
| Footprint | Occupy at least four distinct cells. | 200 |
| Tower | Build at least one stack that is three bricks high. | 200 |
| Palette | Use all three materials (Clay, Sand, and Slate) somewhere in the model. | 200 |
| Studio build | Place at least twelve bricks spread across at least eight cells. | 200 |
Earning all five produces the exact maximum score of 5 x 200 = 1,000. Milestones are recorded as soon as you satisfy the threshold, and they remain recorded even if you remove bricks later. The cap does not freeze editing, and the score does not act as a structural rating.
Build and Score a 1,000-Point Model
Work in the order below to land every milestone in the fewest moves. Keep the studio open in another tab while you read so you can verify each step on your own board.
- Pick a starting cell and a starting material. Select any empty cell on the 5-by-5 grid and choose Clay, Sand, or Slate from the material selector before you place anything. The first brick you add earns the Groundwork milestone.
- Spread to four cells quickly. Use Add brick (or Enter or Space) on three more distinct cells to occupy a footprint of four cells. Each occupied cell counts toward Footprint as soon as the first brick lands.
- Pile one stack to three bricks. Return to a single cell and add two more bricks to the same stack using the same material or a different one. Towers of three or more layers count toward Tower and also count as one occupied cell.
- Mix all three materials. Place at least one Clay brick, one Sand brick, and one Slate brick somewhere in the model. Swapping the selected material with the 1, 2, or 3 keys makes this step almost instant.
- Top up to twelve bricks across eight cells. Add bricks until you reach twelve placed bricks that touch at least eight distinct cells. Watch the live status area so you know when both numbers have been crossed.
- Confirm the score and status. Read the milestone ledger. All five milestones should now show as earned and the score should read exactly 1,000. Total bricks, occupied cells, tallest stack, and material count should match the thresholds in the table above.
- Keep editing to refine the look. Add and remove bricks freely. Milestones stay recorded and the cap stays at 1,000 until you press Restart.
- Export the build when you are happy. Choose Export PNG to redraw the current model into a 1,200-by-900 PNG offered as brick-builder-studio.png through a temporary local object URL.
Material Mixing Tips
Mixing materials early is the simplest tip that compounds across every other milestone. Palette unlocks as soon as Clay, Sand, and Slate all appear somewhere, so dropping one Slate brick on an otherwise Clay-heavy board is enough. Use the material selector to set the active label before each placement, or jump between materials with the 1, 2, and 3 keys if you are on the keyboard.
A useful habit is to assign a material to a row or column and then revisit it later. Clay on the bottom row, Sand on the middle row, and Slate as accents on the top of a single tower is a common pattern that satisfies Palette and Studio build in the same set of moves. Remember that every cell can only hold four bricks, so a tall single-color stack will quickly run out of headroom.
Keyboard Shortcuts Worth Memorizing
Pointer and touch users select a cell before pressing the explicit add or remove action, which means a single click on an existing stack will not place a new brick on top of it. Keyboard players get a roving cursor that moves with the Arrow keys, adds with Enter or Space, removes with Backspace or Delete, and switches materials with 1, 2, and 3. Modified shortcuts are ignored, so the studio never interprets Ctrl, Alt, or Shift combinations as new actions.
For a faster session, park the cursor on the cell you plan to edit, tap 1, 2, or 3 to set the material you want, then hit Enter or Space to add. To prune a stack, keep the cursor where it is and tap Backspace or Delete to remove only the top brick. This is also the safest way to inspect what is inside a stack, since the cell exposes its current height, capacity, and top material through assistive technology.
Editing After You Reach 1,000 Points
A common misconception is that hitting 1,000 freezes the board. The studio does not lock you out, and the score does not become a structural rating. Adding and removing bricks after 1,000 stays available, and any prior milestone credit is preserved even if the model momentarily stops meeting a threshold. You can drop a brick, watch the live status area recalculate, and then rebuild the same threshold without losing the corresponding 200 points.
The only action that clears milestones, score, and the model is Restart. Press it deliberately, and only when you actually want a fresh empty board. To try a new design without giving up a perfect score, use Add brick and Remove top to redesign without touching Restart.
Export the Build as a Local PNG
Export PNG is the final step and it is intentionally local. The browser redraws the current pure brick model into a fresh 1,200-by-900 canvas and offers the image as brick-builder-studio.png through a temporary object URL. The traversal uses the same row, column, level, and material snapshot that the game logic reads, so the export reflects every brick currently on the board and nothing else.
The export does not capture an unrelated page screenshot, does not fetch a remote image, does not load a remote font, does not call an API, and does not upload the model. To get a clean export, finish your edits first, double-check the live status area, and only then choose Export PNG. A useful tip is to remove a stray top brick before exporting, since the canvas redraws whatever the snapshot describes, not whatever you intended.
Habits That Keep the Session Smooth
A few small habits reduce mistakes. First, select the cell before you reach for the material selector so the active material lines up with the cell you actually plan to edit. Second, treat the material selector as the anchor of every brick you place, because a stray material change can quietly affect your Palette milestone when you remove and rebuild a stack. Third, treat the live status area as ground truth: if total bricks, occupied cells, tallest stack, and material count match the milestone thresholds, every milestone is already earned. Fourth, prefer Remove top over Restart whenever you only want to shorten a stack, because Restart clears milestones too.
On narrow screens the board and milestone ledger stack vertically without hiding controls or forcing a desktop viewport. Touch targets share a single published size, so tap accuracy stays consistent across the grid. If you bounce between pointer and keyboard in the same session, the shared reducers behind selection and editing keep both paths in sync, which means a click and a keystroke can never produce different results.
Related reading: Change Blindness Test Tips: Five Rounds to 1,000 Points.