Generate

Use it for an entrance that shows a screen being made: a hero demo, a product tour, an AI-builds-your-UI moment. The demo's own frame is dragged out first, then its main regions, each with a selection outline. Then every part arrives in build order, each its own way: a surface drags out, text types in line by line, a control pops, an icon draws its strokes, a chart and an image wipe in, a rule extends and a row slides up. It needs no script. Keep it to one moment on a page: it asks to be watched.

#Installation

#Usage

Wrap the UI in GenerateEntrance. It builds its first child and plays on mount.

import { GenerateEntrance } from '@youj/motion'

export function Hero() {
  return (
    <GenerateEntrance>
      <SignInCard />
    </GenerateEntrance>
  )
}

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

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

#Pacing

The build goes through three stages: frame (the demo's box and its main regions are dragged out, with selection outlines), build (every part arrives, in build order, starting once its region is half open) and settle (anything floating, like an open popover, fades in).

The length grows with the demo: about 2 seconds for a button, 3 for a card and up to 9 for a large screen. Three options tune it:

• duration fixes the whole run, in milliseconds.
• speed scales it: 2 plays twice as fast. It applies on top of duration and the provider's speed.
• phases shares the run out between the three stages. The values are weights, so they are normalized and never change the total; a stage left out keeps its default ({ frame: 16, build: 72, settle: 12 }), and 0 skips it.

// a quick run that is nearly all build
<GenerateEntrance duration={1400} phases={{ frame: 8, build: 84, settle: 8 }}>
  <PricingCard />
</GenerateEntrance>

#Regions

With no options, the regions dragged out first are the demo's largest boxes. To choose them, give order selectors (relative to the demo) in the order they should appear, and names to label a region on its tab while it is dragged out. A selector that matches nothing is skipped.

<GenerateEntrance order={['[data-slot=sidebar]', 'main']} names={{ '[data-slot=sidebar]': 'Navigation', main: 'Content' }}>
  <Dashboard />
</GenerateEntrance>

#What it reads

The parts come from the real DOM, read once before the first frame: roles, tags and data-slot first, then geometry. Each is built in its real colors, so a primary button arrives in your accent. Open popovers simply fade in at the end.

#Reference

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