Reference
Components
All components ship from @true-north/ui. Primitives are Shadcn-based, skinned to Blanc tokens. Photography components are bespoke.
Primitives
Button
Triggers an action. Five variants, three sizes.
Badge
Inline label. Outline, subtle, solid, category.
Input
Single-line text field with optional leading icon.
Textarea
Multi-line text field, resizable.
Card
Bordered container with header, content, footer.
Dialog
Modal overlay with Cal Sans title.
Tabs
Underline-style tab navigation.
Separator
1px hairline divider, horizontal or vertical.
Skeleton
Shimmer loading placeholder.
Avatar
Circular image with fallback.
Label
Form field label.
Hero
HeroParallax
Full-viewport hero — 5 independent depth planes, mousemove parallax, clip-path mount reveal.
HeroSection
Page-builder hero — eyebrow, Cal Sans headline, two-column body, CTA, faded screenshot.
CenteredHeroSection
Centered hero — Cal Sans headline, body, dual CTAs, full-width screenshot in tinted frame. Electric-blue blobs. Light + dark.
BentoGrid
Bento-style hero — 2×2 main image, stacked side cells, headline + CTA.
Photography
PhotoCard
Single photo tile with gradient overlay and title.
PhotoRow
Horizontal flex row with explicit height.
PhotoGrid
8-row varied gallery layout container.
CategoryStrip
3-panel full-width category navigation.
DetailPageHeader
Editorial two-column header — headline left, 2 labeled metadata blocks right.
StatsSection
Full-width metrics bar — Cal Sans values, Geist Mono labels, hairline dividers.
ContentSection
Editorial page section — eyebrow + headline + body copy + staggered photo grid + inline stats.
StickyFeatureSection
Two-column layout — headline + sticky screenshot right, icon feature list + body copy left.
MobileCarouselHero
3D coverflow carousel of app screens inside a device frame. Auto-advances, hover-pauses, click-to-navigate. Dark + light themes.
ScrollRevealSection
Scroll-scrubbed headline — words illuminate word-by-word. Up to 4 photos drift outward from center as the reveal plays.
StickyScrollSection
Two-column sticky scroll — text blocks left, image right. Chromatic aberration transition between photos as you scroll.
TsunamiScroll
Full-viewport sticky scroll — centered headline above a full-width photo strip that slides through with GSAP dock magnification.
GalleryLabel
"All Work" label bar with photo count.
SiteNav
Sticky top navigation with wordmark.
SiteFooter
Minimal footer with logo and copyright.
ThemeToggle
Sun/moon icon button — toggles html.dark, persists to localStorage, avoids hydration mismatch.
FeatureSection
Two-column section — headline + inline feature list left, oversized screenshot bleeding off the right edge with gradient fade.
ProjectDetailsSection
Two-column section — display headline + description left, compact key–value detail list right. Light and dark themes.
TextSection
Full-width text block — eyebrow, Cal Sans headline, sub-headline, optional CTA. Left / center / right alignment.
ImageSection
Full-width photo with four height presets and optional overlay text anchored bottom-left, center, or bottom-right.