\n
\n \n );\n}\n\nexport function HoverLinkPeek({\n rows = DEFAULT_ROWS,\n tilt = 18,\n cardSize = 104,\n showMeta = true,\n tone = \"dark\",\n restingIndex,\n className,\n}: {\n rows?: Row[];\n /** Max lean of the card in degrees. */\n tilt?: number;\n /** Size of the peek card. 104 is the default scale (a 240px wide card); 64 to 200. */\n cardSize?: number;\n /** The right-hand meta column. Rows without a meta simply render blank. */\n showMeta?: boolean;\n /** Surface of the floating card. The list itself inherits the text colour of its page. */\n tone?: \"dark\" | \"light\";\n /** Keep the card resting on this row whenever nothing is hovered (a static demo state). */\n restingIndex?: number;\n className?: string;\n}) {\n const uid = useId().replace(/[^a-zA-Z0-9]/g, \"\");\n const rest = restingIndex !== undefined && restingIndex >= 0 && restingIndex < rows.length ? restingIndex : null;\n const scale = clamp(cardSize, 64, 400) / 104;\n const cw = CARD_W * scale;\n const ch = CARD_H * scale;\n\n const boxRef = useRef{row.title}
\n {row.description ? (\n {row.description}
\n ) : null}\n - \n {rows.map((row, i) => {\n const descId = \"hlp\" + uid + \"d\" + i;\n const on = active === i;\n return (\n
- \n
\n
\n \n \n );\n}\n","type":"registry:component","target":"components/viberdy/hover-link-peek.tsx"}],"meta":{"tier":"free","tags":["hover","preview","list","spring","links","touch","keyboard"],"href":"https://viberdy.dev/library/hover-link-peek","aiPrompt":"Create a React + Tailwind component named HoverLinkPeek (React only, no animation library): an index list of links where hovering a row floats a mini rendering of the destination beside the pointer. Single self-contained \"use client\" file.\n\nProps (all backward compatible):\n- rows?: { id, title, image?, meta?, href?, description?, domain?, accent? }[] (default: five invented demo rows). href defaults to \"#\" + id; hrefs and image sources are allow-listed (http/https/mailto, relative, data:image) and fall back otherwise.\n- tilt = 18 (max lean in degrees, 0 to 45), cardSize = 104 (scale knob: card width = 240 * cardSize / 104, range 64 to 200), showMeta = true (right meta column), tone = \"dark\" | \"light\" (card surface), restingIndex? (keeps the card resting anchored to that row when nothing is hovered), className.\n\nList: ul of anchors, min-height 56px, 14px vertical padding, hairline bottom border `color-mix(in srgb, currentColor 15%, transparent)`, colour inherited (works on light and dark pages). Each row: mono index (11px, 55% opacity), title (text-xl semibold, tracking-tight, 26px in a wide container), meta (mono 10px uppercase, 0.14em tracking, 55%), and a 14px arrow that fades in and slides from (-6, 6). Hovered/focused row: title shifts +8px (450ms cubic-bezier(.16,1,.3,1)); other rows dim to 36% opacity.\n\nCard (design size 240x176, scaled by cardSize/104): rounded 14px, 1px border, deep shadow. Dark: #0d0f13 surface, light: #fff. Inside, a 24px chrome bar (13px favicon monogram tile in the row accent, domain in 9.5px mono, a small arrow), an 84px art area, then title (12.5px semibold) and a two-line description (10px, 62% opacity). Art is the row's screenshot (object-cover) or generated from the accent: a dark accent gradient with one of three skeleton layouts (hero with orb and headline bars, three tiles, concentric rings) chosen by row index. All rows are stacked panes in the card and cross-fade (220ms) with an 8px rise, so image loads are warm. A soft sheen (radial gradient, screen blend on dark) slides with the lag.\n\nMotion: ONE rAF loop in a mount effect, sub-stepped at 120Hz, sleeping when settled. Position spring: stiffness 260, damping 26, mass 0.5. Lag = target minus spring position; nx,ny = clamp(lag/90, -1, 1); transform = perspective(720px) rotateX(-ny*tilt*0.5) rotateY(nx*tilt*0.5) rotate(nx*tilt). Position written to the DOM directly, never React state; only the active row index is state. Placement: pointer + 22px right, vertically centred; flip to the left of the pointer if it would leave the list; clamp horizontally. First show snaps to the target (no fly-in unless re-opened within 240ms). Pop: opacity 0, scale .86, translateY 8, blur 6px to rest in 340ms cubic-bezier(.16,1,.3,1); out in 140ms.\n\nInput: pointer events map coordinates in layout pixels (clientX - rect.left) * offsetWidth / rect.width. Mouse enter shows the card and follows; leaving the list hides it (or returns it to the resting row). Keyboard: onFocus with :focus-visible anchors the card to the row (centre-x of the row, or below the row when it does not fit), blur out of the list hides it, Escape dismisses. Touch: 380ms long-press (cancel after 10px of movement so scrolling works; touch-action pan-y, -webkit-touch-callout none, contextmenu suppressed during the press) shows the card above the finger and follows it, release hides it after 900ms and the following click is suppressed; a plain tap navigates.\n\nA11y: card aria-hidden, image alt empty; description is a visually hidden span referenced by aria-describedby; focus rings via important outline utilities using currentColor. prefers-reduced-motion: no spring, tilt, slide or title shift; the card snaps and fades in 120ms. Inject the static CSS with a plain \n
\n \n \n
\n \n {rows.map((row, i) => (\n
\n