[Madraka]

Adds the lens-hero section block for the cloudhal.com home page redesign.

• What it is: the brand mark (dark ring, light ring, orange iris, bright pupil, plus an instrument ring of ticks) as inline SVG on a dark scene that stays dark in light and dark mode. Next to it: eyebrow, headline with gradient-highlighted words, text, two buttons and an activity log ("How a change goes live").
• Motion (lens.ts, about 3 KB):
  • It follows the pointer through critically damped springs, one per depth layer: housing τ 300 ms, ring 200 ms, iris 120 ms, pupil 110 ms. The reach uses a soft tanh clamp.
  • After 2.8 s of stillness, and on touch screens, it drifts along a Lissajous path (11 s / 17 s).
  • As the hero scrolls away, the pupil narrows from 1 to 0.7, the glow fades and the lens rises.
  • Each log line's state (watching, working, waiting, live) tints the progress arc, glow and dot. The iris keeps the brand orange, and live sends a one-shot ping.
• Restraint:
  • The loop is stopped offscreen, on hidden tabs and once the springs settle.
  • Two CSS loops (breathing, slow ring) with a Pause button.
  • Static at data-ch-motion=none, under prefers-reduced-motion and without JS, where the whole log is shown.
  • The lens is aria-hidden, and every word is a block prop.
• Scope: the script loads only on pages that render the block.
• Tested on a local cloudhal dev home page:
  • pointer tracking (iris offset follows the pointer), state stepping, scroll exit, pause;
  • 1440 and 390 widths with no sideways scroll;
  • light and dark, reduced motion.
  • cloudhal deploy --dry-run passes.

Nothing on the live site changes until the home page content uses the block (next step, through MCP with approval).

🤖 Generated with Claude Code