Mara Venn
Intertidal ecologist at Cascade Observatory
Profile Card
A field-credential profile with pointer-responsive foil, identity details, and a native contact action.
Eelgrass transect 04
Mara maps new shoots along the north reef while the low tide exposes the survey line.
- Site
- North reef
- Conditions
- Low tide
Use a mouse or trackpad to inspect the foil. Touch and reduced motion keep the badge still; Tab reaches Contact.
Contact invokes a callback in this demo; it does not send a message.
Implementation
1"use client";2 3import {4 useId,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type MouseEventHandler,10 type PointerEvent,11 type ReactNode,12} from "react";13import { useReducedMotion } from "@/lib/media";14import { PROFILE_REST_POSE, resolveProfilePose } from "./profileCardEngine";15 16export type ProfileCardProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {17 /** Person's visible name. */18 name: string;19 /** Role or affiliation shown beneath the name. */20 userTitle: string;21 /** Directory handle shown in the optional footer. */22 handle: string;23 /** Plain-language presence or assignment status. */24 status: string;25 /** Caller-owned portrait or other identity artwork. */26 avatar: ReactNode;27 /** Label for the native contact button. */28 contactText?: string;