Skip to content
v1.0
Blocks

Live approval checker

Shape the project on sliders and the verdict updates the instant a limit is crossed — an icon joins or leaves the stack, and the rule you tripped is named.

What it is made of

The interaction, in three steps

1 · Shape it

Drag the dimensions that actually decide the pathway — size, height, placement.

2 · See the flip

An icon joins or leaves the stack the moment you cross a threshold, and the rule you tripped is named.

3 · Stay easy

A checklist shows the limits, and a tip spells out how to keep it approval-free.

The block

Forward of the house
No approval needed

Inside every limit — nothing to lodge.

Drag past 10 m², then past 40. The stack changes instantly and the wording never animates.
Code 
<GdCard>
  <GdSlider v-model="area" label="Floor area" :min="1" :max="60" unit="m²" />

  <GdSegmented
    v-model="forward"
    label="Forward of the house"
    :options="[{ id: 'no', label: 'No' }, { id: 'yes', label: 'Yes' }]"
  />

  <!-- pinned below the controls, never scrolling away -->
  <GdVerdictBanner :title="title" :required="required">
    {{ tripped }}
  </GdVerdictBanner>
</GdCard>

Rules

  • Pin the verdict banner below the controls. It never scrolls away.
  • Give every control the power to change the verdict. A slider that cannot does not belong on the checker.
  • Name the tripped rule the moment it trips, in plain English, with its citation in the product.
  • Change the stack instantly; never animate the wording. No fade, no spinner, no transition on the verdict text.
  • Label a demo threshold as a demo, on the page. Not in a comment, not in a footnote elsewhere.

Behavior & Anatomy

Why the wording must not animate

The stack changes instantly, so a changing answer reads as a change of STATE rather than a loading state. A verdict that fades in has been made to look like it is being fetched, and a user who thinks an answer is still arriving waits for a better one.

Why every control has to be decisive

The checker's whole claim is that the thing you are dragging is what decides the pathway. One control that changes nothing turns the panel into a form, and the user's model shifts from “these are the rules” to “these are some questions”.

Why a demo names its own fiction

The honesty policy does not pause for demos. A page that shows plausible planning numbers without saying they are invented is training a reader to trust numbers on GRIDD surfaces that nobody sourced — which is the exact trust the product spends its citations to earn.

Navigate

Esc