Layers

Use it for an entrance that shows how a piece of UI is put together: a hero demo, a product tour, a component on show. The demo starts as an exploded stack, the way a view-hierarchy debugger shows a screen: the frame at the bottom, its regions above it, its boxes above those and its content (text and icons) on top, each a thin plane with its depth label (z2 boxes 19). The planes come up one by one and draw their parts in build order. Then the camera settles from the isometric angle to flat while the gaps close layer by layer, and each plane hands over to the real parts it holds. Keep it to one moment on a page.

#Installation

#Usage

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

import { LayersEntrance } from '@youj/motion'

export function Hero() {
  return (
    <LayersEntrance>
      <Dashboard />
    </LayersEntrance>
  )
}

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 { layers } from '@youj/motion'

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

#Pacing

Three stages: stack (the planes come up one by one, each drawing its parts as it arrives), collapse (the camera turns flat while the gaps close, bottom first) and resolve (the frame, then each plane in turn: its real parts fade in, then the plane fades off them).

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 { stack: 45, collapse: 33, resolve: 22 }).

#What it reads

The parts come from the real DOM, read once before the first frame (the same reading as Blueprint's), and are drawn on the planes in their real fills, borders, radii, type and shapes, so the flat stack is already close to the UI it hands over to. The camera is fitted so the exploded stack stays inside the demo's box and a small margin around it. A demo with no regions has three planes.

#Reference

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