Render passes

Use it for an entrance with a technical voice: a hero demo, a launch page, a talk about rendering. The browser's pipeline is played as theatre, three passes, each named over the demo with its count (layout 12/54) and each sweeping through the parts in build order. Layout outlines every box with its size. Paint fills each in a flat grey, with its text and icons in grey: square, no shadows, no radii. Composite hands each piece to the real part, with its colour, radii, shadows and images. Keep it to one moment on a page.

#Installation

#Usage

Wrap the UI in RenderPassesEntrance. It plays on its first child, on mount.

import { RenderPassesEntrance } from '@youj/motion'

export function Hero() {
  return (
    <RenderPassesEntrance>
      <PricingCard />
    </RenderPassesEntrance>
  )
}

Change play to play it again (a counter works), or set it to false to show the UI as it is. onFinish is called when the run ends.

For an element you don't render with React, call the look. It returns a cancel() and a finished promise, and an AbortSignal in signal cancels it too. To drive it from a clock of your own (a video rendered frame by frame, a scrubber), pass paused: true and call seek(t) with the time in ms from its start: it shows that moment and holds it. It only goes forwards, and a time at or past its end ends it.

import { renderPasses } from '@youj/motion'

const run = renderPasses(document.querySelector('#pricing')!, { speed: 1.5 })
await run.finished

#Pacing

The three passes run in turn, each sweeping through the parts so the build is visibly in progress from the first box to the last. In paint, a box paints before anything inside it, as a browser does, so a filled panel covers its children's layout boxes and they paint again on top.

The length grows with the demo: about 3 seconds for a card and about 5 for a small screen. duration fixes it in milliseconds, speed scales it, and phases shares it out as weights (default { layout: 30, paint: 30, composite: 40 }).

#What it reads

The parts come from the real DOM, read once before the first frame (the same reading as Blueprint's). Layout lines are the theme's info ink; the paint greys are mixed from its foreground and canvas, darker for a stronger fill, and type that sits on a strong fill is set light. The pass names are labels, so <YoujProvider labels> translates them.

#Reference

function renderPasses(node: HTMLElement, options?: RenderPassesOptions): { cancel(): void; finished: Promise<void>; seek(t: number): void }