@ptblink/ui

PT Blink shared UI primitives, design tokens, and animation helpers for Next.js 15 + Tailwind v4 apps.

Install

npm install @ptblink/ui

Peer dependencies (you must install these too): react@^19 react-dom@^19 next@^15 motion@^12 gsap@^3 tailwindcss@^4

Wire it up

1. Tailwind preset — extend in your tailwind.config.ts:

import blink from "@ptblink/ui/tailwind";
export default { presets: [blink], content: ["./app/**/*.{ts,tsx}"] };

2. Base CSS — import once at the top of your global stylesheet:

@import "@ptblink/ui/styles.css";

3. Use a primitive:

import { Slide, Reveal, Eyebrow } from "@ptblink/ui";

Exported surface

Components — kiosk

Export	Description
Slide	Full-viewport slide wrapper with optional Grainient background.
SlideDeck	2D remote-driven slide deck. Owns arrow/Esc/Enter keyboard, HomePill, EnterHint.
Reveal	Blur + rise + fade entrance wrapper (motion-based).
VideoThumb	16:9 looping placeholder with play overlay. Auto-pauses off-screen.
VideoModal	Full-screen video dialog. Esc / click-out close.
Eyebrow	Mono uppercase label. tone and color props for variants.
SectionHeader	Eyebrow + headline + optional side slot.

Components — landing

Export	Description
PageShell	Top-padded container that clears the floating navbar.
PageHero	Hero section frame with optional Grainient background.
Section	Body section spacing wrapper.
Card	Bordered elevated card.
StatGrid	Stat grid.
BackLink	"← Back" mono link.
SiteHeader	Floating navbar with logo, nav links, scroll-aware styling. Expects /brand/icon-128.png in the consuming app's public/.
SiteFooter	Footer with brand logo. Expects /brand/blinklogo-dark.svg in public/.
Hero	Landing hero composition (Eyebrow + headline + stats).
SectionVideo	Video gallery section block with VideoModal integration.
SectionSlideshow	Numbered-bullet slideshow block with ScrollReveal.
SectionPlatformCta	"Launch the platform" CTA card with Grainient background.
SectionContact	Contact CTA section with link list.

Animation primitives (react-bits)

Export	Description
Aurora	WebGL aurora background (requires ogl).
BlurText	Per-word blur-in entrance.
CountUp	Numeric count-up animation.
GradientText	Animated gradient text.
Grainient	WebGL grainy gradient background (requires ogl).
Magnet	Magnetic cursor-attract effect.
ScrollReveal	Scroll-triggered reveal wrapper.
ShinyText	Shiny shimmer text.
SplitText	GSAP per-character split animation (requires gsap, @gsap/react).
TiltedCard	3D tilt-on-hover card.

Hooks

Export	Description
useScrolled(threshold = 12)	Boolean — true when window scrollY exceeds threshold.

Utilities

Export	Description
displayClassForLength(text, sizes?)	Returns a length-aware text-display-* class for the given string.

Types

Export	Description
DeckSection, DeckSlide	SlideDeck content shape.
VideoModalItem	VideoModal content shape.

Section component props (Accent, Video, Slide, Cta) are NOT exported as named types — construct matching objects structurally in the consuming app.

Caveats

• "use client" on the entire barrel. The bundled dist/index.js is marked "use client" so all exports work in App Router server contexts. Pure-server components (e.g., Eyebrow, Card) still render correctly but run in the client bundle when imported via @ptblink/ui. If you need them as RSC, copy the source directly.
• Branded assets are bundled. From 0.1.3 onward, icon-128.png and blinklogo-dark.svg ship inside the package and are consumed directly by SiteHeader / SiteFooter — no public/brand/ files needed in the consuming app. Reuse them anywhere with import url from "@ptblink/ui/brand/icon-128.png" / ... /blinklogo-dark.svg".
• Tailwind v4 only. Tokens live in a @theme block inside @ptblink/ui/styles.css. There is no v3 compatibility build.