The Guide

01The concept

Inside the movement

The site treats Nomadic Owls as a watch manufacture and the page as the inside of a mechanical calibre. Precision is the brand argument: an agency that does full-stack development, digital marketing and technical SEO is, like a movement, a set of small components that only matter when they mesh exactly. Sections are numbered like a spec sheet (plate, going train, complications, jewels, escapement), services are six complications, and the three projects are the three jewels set where the movement works hardest.

The motion is the concept. Instead of video, the centrepiece is a procedural SVG gear train whose tooth counts, ratios and meshing phases are computed — scroll winds the barrel and every wheel turns at its mathematically correct speed. A balance wheel oscillates at a true 4 Hz (28,800 vph) in the corner as the site’s visible heartbeat, and content “assembles” into place as you scroll, like an exploded diagram closing.

Honestly stated intent: the AI photography provides atmosphere (macro plates, jewels, the balance), but everything that moves is built in code, because a watch that only looks precise isn’t a watch.

02Cited references

References & adapted techniques

• Radian

  Scroll-scrubbed photoreal product rotation → adapted into the scroll-scrubbed gear train and the exploded-view “assemble on scroll” treatment: scroll position, not time, drives rotation and assembly.

• Longbow

  Persistent measurement-grid overlay → adapted into caliper hairlines with tolerance labels (Ø 32.000 ±0.01) annotating layout edges, as if the page itself had been measured.

• Wembi

  Spec-sheet micro-captions (N.001) → adapted into the calibre spec lines every section carries: CAL. NO-2026, “6 complications” for the services, “3 jewels” for the projects.

03Design system

Palette, type, spacing

• #14161A Movement slate Background, the plate
• #8E949F Steel Body text, gear strokes
• #E8EAEE Rhodium white Headings, polished highlights
• #A22C3A Jewel ruby Bearing accents only
• #B99B5B Gilt hairline 1px rules only — never fills

Spacing runs on a fluid scale: section padding clamp(4rem, 9vw, 8.5rem), a 76rem max content column, and 1px gilt hairlines — never thicker, never used as fills — separating every cell like bridge edges. Ruby appears only as small “bearing” accents (jewel dots, one word per spec line).

04Tech & motion

How the movement runs

• Gear mathematics

  The going train is 72T → 36T → 54T → 18T (train ratio 4:1). Gears are generated as SVG paths from tooth count N and module m: pitch radius r = mN/2, addendum r + 0.95m, dedendum r − 1.15m. Adjacent centres sit exactly r₁ + r₂ apart. Each wheel’s angular velocity is −(N_parent/N_child) × the parent’s, so adjacent wheels counter-rotate at ratio-correct speeds, and the meshing phase is solved with θ_child = α + π − π/N_child − (N_parent/N_child)(θ_parent − α), where α is the angle of the line of centres — teeth interleave with gaps instead of colliding.

• Scroll scrub

  The train section is 320vh with a sticky 100svh stage. A passive scroll listener requests one rAF; progress through the section maps to barrel angle (1.25 turns, so the escape wheel makes 5). An IntersectionObserver and the visibilitychange event gate the loop so nothing computes off-screen or in hidden tabs.

• Assembly & heartbeat

  Every annotated element carries data-assemble; a single rAF pass writes a 0→1 custom property --p that CSS maps to translate/rotate/opacity — the exploded diagram closes as parts enter the viewport. The balance wheel is pure CSS: a 0.25s alternating rotation (a true 4 Hz beat) with a sinusoidal easing. Under prefers-reduced-motion the balance stills, gears freeze in an assembled pose, and every part renders fully seated.

05AI assets

Generated imagery — verbatim prompts

Three stills, generated with GPT Image 2 via the Higgsfield CLI, then converted to WebP. Motion is fully procedural (the gear math above) — no video model was used, by design.

• movement-macro.png — hero movement

  GPT Image 2 (via Higgsfield CLI)

  “Extreme macro photograph of a luxury mechanical watch movement, meshing steel gears, ruby jewel bearings, engraved bridges with perlage finishing, balance wheel, cool grey lighting with tiny red jewel accents, dark background, haute horlogerie photography, no text”

• gear-train.png — services gears

  GPT Image 2 (via Higgsfield CLI)

  “Overhead macro of a disassembled watch gear train laid out precisely on dark slate, six polished steel gears of different sizes in a row, tweezers at the edge, jewel bearings, precise workshop lighting, watchmaker bench photography, no text”

• balance-wheel.png — heartbeat detail

  GPT Image 2 (via Higgsfield CLI)

  “Macro photograph of a watch balance wheel and hairspring in motion blur, steel and gold tones on near-black background, single jewel bearing glowing ruby red, extreme close-up, precision engineering photography, no text”

06How to reproduce

Build steps

1. Scaffold Astro v5, output: 'static', no client framework.
2. npm install @fontsource/marcellus @fontsource/figtree — import 400 (Marcellus) and 400/500/600 (Figtree). Self-hosted, no CDN.
3. Copy the three AI stills into public/assets/, convert to WebP (sharp, quality ≈ 78).
4. Implement the gear generator and mesh solver from §04 in a plain inline module script; render into an empty SVG at runtime.
5. Wire scroll: one passive listener → one rAF → set gear rotations and --p assembly values. Gate with IntersectionObserver + visibilitychange.
6. Add the reduced-motion branch, skip link, focus-visible styles and landmarks; then npm run build.

Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — index at owls-index.pages.dev.