Work Section
A full work list with a sticky scramble-text heading, a custom cyberpunk cursor on hover, side preview panel, BorderPattern indicators, and per-item visibility gating.
WorkSection is the primary work display surface. It features a sticky heading that scrambles to leet-speak when it becomes sticky, a custom cursor on hover (via AnimatedCyberpunkCursor), BorderPattern active indicators, and a right-side preview panel. Items with visibility: 'inert' are shown but made non-navigable.
Installation
npx shadcn@latest add @adv/work-sectionUsage
import { WorkSection } from '@/components/sections/work-section';
<WorkSection
items={workItems}
heading="SELECTED WORK"
getItemHref={(item) => `/work/${item.company?.toLowerCase()}/${item.id}`}
onSelect={(item, href) => router.push(href)}
getItemVisibility={(item) =>
item.id === 'secret-project' ? 'inert' : 'visible'
}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | WorkSectionItem[] | — | { id, title, role, period, company?, logo?, description?, image? } |
heading | string | "SELECTED WORK" | Sticky header text (also scramble target). |
hideTitle | boolean | false | Hide the sticky heading entirely. |
anchorId | string | "work" | id on the root div, useful for scroll anchors. |
keyboardDisabled | boolean | false | Disable keyboard highlight tracking (e.g. off-screen sections). |
getItemVisibility | (item) => 'visible' | 'hidden' | 'inert' | () => 'visible' | Per-item visibility. 'hidden' removes from list; 'inert' shows but disables navigation. |
getItemHref | (item) => string | /work/{company | id} | Custom href per item. |
onSelect | (item, href) => void | — | Navigation callback. Prevents anchor navigation when provided. |