AUTOMATED PLASTERING
From measurement to perfection.
A scroll-driven Arabic product story for an automated wall-plastering robotic system, rebuilt pixel-for-pixel from six reference screenshots with a Python inpainting pipeline and a single pinned GSAP master timeline.
Six photographic plates — laser measurement, continuous mortar pump, automated application, robot leveling, quality check, benefits — are scrubbed through a pinned GSAP timeline on Next.js 16 with the React Compiler. The visuals were reverse-engineered from 1672×941 reference screenshots: a Python + OpenCV pipeline inpaints the baked-in UI and laser lines out of the originals, clones wall texture over old panels, re-grains the fills and exports clean 1920×1080 plates, while DESIGN.md records the measured pixel geometry so the rebuilt UI matches the source to the pixel.
Layout is expressed in reference-pixel units (--u = vwpx/1672) and Cairo's font sizes are calibrated so rendered ink matches the reference glyph rows. Reduced motion renders six static full-height chapters.
Overview
Near-black, safety orange and laser green. The user scrubs a robot through a construction site one chapter at a time.
Asset pipeline
- 01scripts/prepare_assets.py — inpaint UI and laser lines, clone wall texture, lift the header band, re-grain, export 1920×1080
- 02scripts/measure.py — prints the reference geometry that DESIGN.md documents
- 03LaserSystem.tsx renders beams from measured x1/y1/x2/y2 coordinates per chapter
- 04ViewportUnits.tsx writes --vwpx/--vhpx so the layout lives in reference pixels
Chapters
Design
Calibrated typography.
Cairo's ink is small relative to its em, so font sizes are calibrated so rendered ink matches the reference glyph rows; line-height equals reference line pitch divided by font size. Chapter numbers sit on a rail at x 51 with a 93 px pitch.
- —ink-950 #080808 · orange #FF5A00 · laser #39FF4C
- —Cairo 300–900 with Tajawal fallback
- —--ease-out cubic-bezier(0.22, 1, 0.36, 1)
