"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react";

/**
 * KeynoteBentoHero — a launch hero set like a keynote recap slide: the
 * numbers are the image.
 *
 * One 2x2 hero tile carries the biggest figure on the page in the one accent
 * colour; smaller tiles around it each carry one figure and a mono caption,
 * or a line of copy. The first time the hero comes into view the grid
 * ASSEMBLES: the hero tile settles first, then every other tile rises into
 * its slot from the direction of the hero, nearest first, 60ms apart, and
 * each figure counts up as its tile lands. As the hero scrolls away, the
 * tiles drift gently apart and dim, like a slide being put away.
 *
 * A light follows the pointer across the grid and catches the hairline of

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}