/** * The dot field's drawing, kept out of the component so it can be checked * without a renderer — the same split `progress-button-hold` uses. * * ## Nothing is built while it is running * * The field is hundreds of dots and it is on screen for as long as a model * takes to answer, on a page that may be showing several at once. So every * frame it will ever draw is built when the box is measured, and playing it is * handing react-native-svg a string that already exists. * * Two earlier versions did this the obvious ways and both stalled a page of * them on scroll: one rebuilt every dot as a path string on every frame, the * other clipped a moving shape of light to a path with hundreds of subpaths in * it, which is re-rasterized every time the view is drawn. */ /** Points between one dot and the next. */ export declare const DOT_GAP = 10; /** The dot's radius where the light is not, and where it is strongest. */ export declare const DOT_RADIUS = 1; export declare const DOT_LIT_RADIUS = 1.9; /** How visible the resting grid is, under everything. */ export declare const DOT_REST_OPACITY = 0.16; /** * How visible the lit dots are, together. * * "Together" is the operative word: they are drawn as two layers fading into * one another, and this is what the pair composites to, not what either one * carries. {@link crossfadeAlphas} is what holds that true. */ export declare const LIT_OPACITY = 0.9; /** How many still frames one loop is drawn as. */ export declare const FRAMES = 24; /** How the light moves through the field. */ export type DotFieldAnimation = 'drift' | 'pulse' | 'scan'; /** The gap this box is drawn at, opened up if the grid would be too dense. */ export declare function gapFor(width: number, height: number): number; /** The resting grid as one path. Drawn once, under the light. */ export declare function gridPath(width: number, height: number): string; /** How many dots {@link gridPath} would draw for a box. */ export declare function dotCount(width: number, height: number): number; /** * How strongly a dot at `distance` from the light is lit. * * Smoothstep rather than a linear ramp: linear gives the light a hard rim, * because the eye finds the discontinuity in the first derivative. This one * arrives and leaves at zero slope, so the light has no edge. */ export declare function influenceAt(distance: number, radius: number): number; /** * The lit dots at one phase of the loop, as a path. * * Only the dots the light actually reaches are in it — the rest are already * drawn by the resting grid underneath, so this is a fraction of the field * rather than all of it. * * `points` is the same grid {@link anchors} would build, passed in by a caller * that is about to ask for every frame of a loop. Building it here instead cost * a fresh array of several hundred pairs per frame, to arrive at the identical * grid twenty-four times over. */ export declare function litPath(width: number, height: number, phase: number, animation?: DotFieldAnimation, points?: [number, number][]): string; /** * Every frame of the loop, built once. * * A still frame the light is somewhere legible in is also what a paused or * reduced-motion field shows, so there is no separate code path for holding it. */ export declare function litFrames(width: number, height: number, animation?: DotFieldAnimation): string[]; /** One pass of the loop, in milliseconds, per animation. */ export declare const PERIOD: Record; /** Which frame a moment falls on. */ export declare function frameAt(time: number, animation: DotFieldAnimation): number; /** * Where a moment falls in the loop, as a frame index with its fraction kept. * * {@link frameAt} rounds this down, and rounding it down is what made the field * a flipbook: twenty-four pictures spread over the period, which on the slowest * animation is a new one every 175ms however fast the screen refreshes. The * fraction is what the two layers cross-fade on, so the light moves at the rate * the display can draw rather than the rate the frames were built at. */ export declare function framePhase(time: number, animation: DotFieldAnimation): number; /** * What the outgoing and incoming layers are worth, a fraction `t` of the way * from one frame to the next. * * Not `[1 - t, t]`. The layers are drawn over one another, so a dot lit in both * of them composites to `1 - (1-a)(1-b)`, and two half-strength copies of it * come to 0.70 rather than 0.90 — the field dips a fifth in the middle of every * step, which six steps a second turns into a flicker. So only the outgoing * layer ramps, and the incoming one is solved for: whatever leaves the pair at * {@link LIT_OPACITY} the whole way across. */ export declare function crossfadeAlphas(t: number): [number, number]; //# sourceMappingURL=dot-field.d.ts.map