← All skills
TiergardenMotion v2.3

Tiergarden OS · grow console

Every tierwakes inits own order.

Fourteen racks of basil, butterhead and pea shoots under a former tram depot in Leipzig. The console that runs them moves by one rule: light first, then words, then the thing you can press.

Open the grow consoleRead the motion spec
PPFD 285 µmol/m²/s
Next harvest · T03 basil · Thu 06:40
Water reuse 96%
  1. 01 Rack0 – 900 msHero visual first
  2. 02 Headline500 – 1150 ms3 lines, 70 ms stagger
  3. 03 Readout1000 – 1500 msNumbers settle
  4. 04 Action1350 – 1750 msCTA arrives last

01 · Tokens

Five durations. Three curves.
One stagger.

Every moving thing in the console borrows from this table. If a new screen needs a value that isn't here, the screen is wrong, not the table.

Duration

  • --dur-micro160 msHover, press, focus
  • --dur-state220 msToggle, select, tab
  • --dur-pop280 msToast, popover
  • --dur-section600 msScroll entrances
  • --dur-hero1400 msTimeline, four beats

Offset

8 px
16 px
24 px

8 for micro shifts, 16 for cards and copy, 24 for hero lines.

Stagger

60 ms per item on desktop, 40 ms under 640 px. Capped at eight items; the ninth arrives with the eighth.

02 · In the product

The console, at working speed.

Tabs morph, toggles confirm, toasts pop and leave faster than they came. Try it — every interaction below uses a token from the table above.

LocationTier 03
CycleDay 14 / 21
Light285 µmol
Projected41 kg
Harvest windowThu 06:40
Tier health14 / 14All racks within 0.4 °C of setpoint.
Light hours today16 h 20 mShifted 40 min later for the tariff dip.
Nutrient doseEC 1.8Basil loop topped up at 04:12.

03 · Choreography

Four rules the whole team can quote.

  1. 01

    Hero, then words, then the button

    The rack lights before the headline moves; the call to action lands last. Motion sets the reading order before anyone reads.

  2. 02

    Reveal once, at a quarter in view

    Sections enter when 25 % of them is on screen, rise 16 px over 600 ms and never replay on a small scroll back.

  3. 03

    Hover lifts 4 px, never more

    Cards rise and the shadow deepens in 160 ms. The glow is the grow light, not a decoration bolted on.

  4. 04

    Everything settles and stops

    No idle loops. When a timeline finishes, nothing on the page is asking the GPU for frames.

04 · Reduced motion

A mode, not an afterthought.

With prefers-reduced-motion set, every entrance becomes an instant state with a 120 ms opacity fade. Content is never hidden behind an animation that won't run. Try it on this page:

Preview reduced motion
  • Only transform and opacity. The tab indicator is measured once per change, then moved with translate and scale.
  • No layout reads in a frame. Scroll entrances use one IntersectionObserver and unobserve after firing.
  • No idle work. The hero timeline ends at 1.75 s and the page goes quiet.
  • Blur stays small. The grow-light cones are gradients, not filters.