Data Contour Surface

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import {
7  useReducedMotion,
8  useVisibilityPause,
9  resolveComposition,
10  compositionScrimStyle,
11  contentFalloff,
12  labelHiddenAt,
13  type ContentPlacement,
14  type ResolvedComposition,
15} from "@/lib/motiq";
16 
17/* -------------------------------------------------------------------------- */
18/* Types                                                                      */
19/* -------------------------------------------------------------------------- */
20 
21export interface ContourPoint {
22  /** 0–1 horizontal position of the pressure point. */
23  x: number;
24  /** 0–1 vertical position of the pressure point. */
25  y: number;
26  /** Signed magnitude — positive raises the field, negative lowers it. */
27  value: number;
28  /** Falloff radius in field space (0–1). Wider = broader influence. Default 0.2. */
29  radius?: number;
30}
31 
32export interface ContourRegion {
33  /** 0–1 left edge. */
34  x: number;
35  /** 0–1 top edge. */
36  y: number;
37  /** 0–1 width. */
38  w: number;
39  /** 0–1 height. */
40  h: number;
41}
42 
43export interface DataContourSurfaceProps
44  extends React.HTMLAttributes<HTMLDivElement> {
45  /** Focal pressure points that define the scalar field. Omit for deterministic sample data. */
46  points?: ContourPoint[];
47  /** Field values that get emphasized iso-lines (heavier weight, never color alone). */
48  thresholds?: number[];
49  /** Region brightened above the rest — the reading in focus. */
50  activeRegion?: ContourRegion;
51  /** Regions rendered as ghosted, dashed overlays for comparison. */
52  comparisonRegions?: ContourRegion[];
53  /**
54   * Where the foreground content sits. The contour field runs full-bleed on every
55   * placement; a frosted-glass scrim behind the copy keeps text readable (via blur,
56   * not a hard cut) while the field stays visible underneath. "none" = full-bleed,
57   * no scrim.
58   */
59  contentPlacement?: ContentPlacement;
60  /** Extra ramp width (0–1) over which the field returns to full strength past the content. */
61  safeAreaPadding?: number;
62  /** How strongly the field softens (never below a visible floor) behind content (0–1). */
63  safeAreaStrength?: number;
64  /** Draw the region annotations (active-region ticks, comparison frames). Default true. */
65  showLabels?: boolean;
66  /** Drop region annotations that fall inside/near the readable region. Default true. */
67  hideLabelsNearContent?: boolean;
68// … truncated