Adaptive Safe-Zone Grid

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  labelHiddenAt,
12  contentFalloff,
13  type ContentPlacement,
14} from "@/lib/motiq";
15 
16/* -------------------------------------------------------------------------- */
17/* Types                                                                      */
18/* -------------------------------------------------------------------------- */
19 
20export interface SafeRect {
21  /** 0–1 left edge of the readable safe area. */
22  x: number;
23  /** 0–1 top edge of the readable safe area. */
24  y: number;
25  /** 0–1 width of the readable safe area. */
26  w: number;
27  /** 0–1 height of the readable safe area. */
28  h: number;
29}
30 
31export interface FocalPoint {
32  /** 0–1 horizontal focal position (grid skews toward it under perspective). */
33  x: number;
34  /** 0–1 vertical focal position. */
35  y: number;
36}
37 
38export interface HighlightCell {
39  /** Column index (0-based) into the current grid. */
40  col: number;
41  /** Row index (0-based) into the current grid. */
42  row: number;
43}
44 
45export interface AdaptiveSafeZoneGridProps
46  extends React.HTMLAttributes<HTMLDivElement> {
47  /**
48   * One or many regions where the grid quiets so foreground content stays readable
49   * (0–1 coords). A single rect reads through the glass scrim like a placement; an
50   * array keeps the multi-zone luminance mask for power users.
51   */
52  safeArea?: SafeRect | SafeRect[];
53  /**
54   * Where the foreground content sits. Derives a protected rect on that side and
55   * reads the copy through a frosted-glass scrim — the grid stays full-bleed and
56   * visible under the copy (softened, not cut away), so there is no hard edge. The
57   * one prop needed for a readable hero. "none" = the raw content-agnostic grid.
58   * An explicit `safeArea` array still keeps the multi-zone luminance-mask behavior.
59   */
60  contentPlacement?: ContentPlacement;
61  /** Extra ramp width (0–1) over which the grid fades back in past the content. */
62  safeAreaPadding?: number;
63  /** How strongly the grid is suppressed behind content (0–1). */
64  safeAreaStrength?: number;
65  /** Where structure concentrates; the perspective skew leans toward it. */
66  focalPoint?: FocalPoint;
67  /** Grid line-count multiplier (~0.4–1.6). */
68  density?: number;
69  /** Overall luminance/opacity of the grid (0–1.4). */
70  intensity?: number;
71// … truncated