iza-ui
v0.4.0
Published
A small set of genuinely non-trivial, reusable UI primitives: WindowCard, Dock, AmbientCanvas, PlasmaLogoMark, PhoneMockup, GlowButton, GradientHeading.
Readme
iza-ui
A small set of genuinely non-trivial, reusable UI primitives — not a full design system. No Button/Input/Textarea here on purpose: those take a competent dev minutes to rebuild and aren't worth an external dependency. What's here is the stuff with real engineering behind it.
Install
npm install iza-uiimport "iza-ui/styles.css"; // once, anywhere in your app
import { Dock, WindowCard, AmbientCanvas, PlasmaLogoMark, PhoneMockup, GlowButton, GradientHeading } from "iza-ui";No Tailwind config, no CLI, no copy-paste — styles are precompiled and ship with the package.
Components
Dock
A floating macOS-style magnification dock: hover an item and it scales up, lifts, and pushes its neighbors aside without ever overlapping them.
<Dock
items={[
{ key: "home", label: "Home", icon: <HomeIcon />, href: "/", active: true },
{ key: "docs", label: "Docs", icon: <DocsIcon />, href: "/docs" },
]}
/>WindowCard
A frosted-glass "OS window" shell — a chrome bar (with an optional functional close dot) above a content slot.
<WindowCard onClose={() => setOpen(false)}>
<div className="p-8">Your content</div>
</WindowCard>AmbientCanvas
A full-viewport WebGL fragment shader — a halftone dot grid with a pointer-reactive brush trail. Respects prefers-reduced-motion, skips WebGL entirely on low-power devices, and lazy-loads three so pages that never mount it don't pay for the dependency.
<AmbientCanvas />PlasmaLogoMark
A fluid plasma fragment shader (raw WebGL, no three) masked to the silhouette of a logo image — the image renders underneath as the SSR/no-WebGL fallback, and the canvas occludes it once mounted.
<PlasmaLogoMark src="/logo.png" alt="Your logo" />PhoneMockup
A skeuomorphic iPhone mockup with a looping chat-typing → send → notifications animation (GSAP timeline, repeat: -1) and mouse-driven 3D tilt. Purely decorative (aria-hidden); respects prefers-reduced-motion by rendering the resting frame with no loop.
<PhoneMockup
eyebrow="Live Preview"
title="Your Workspace"
chatPlaceholder="Ask anything…"
chatPrompt="Design a portfolio site for a photographer."
notifications={[
{ icon: <BellIcon />, title: "New message", time: "2m" },
{ icon: <MailIcon />, title: "Invite sent", time: "5m" },
{ icon: <LinkIcon />, title: "Generating…" },
{ icon: <CheckIcon />, title: "Deploy complete", time: "1h" },
]}
/>GlowButton
A CTA pill with a hover sheen-sweep and a touch-device fallback: tapping shows the sheen via a manual .is-active class, then fires onClick ~450ms later so the effect is actually visible before anything (e.g. navigation) unmounts it.
<GlowButton onClick={() => router.push("/work")}>Start a Project</GlowButton>GradientHeading
A large heading treatment in two variants: "matte" (solid color with a soft layered text-shadow) and "silver" (gradient-clipped text with a matching layered drop-shadow). Both read the --color-on-surface CSS variable, so they retint automatically with the .light theme class. Plays a one-shot entrance animation on mount by default (matte fades/rises out of a blur, silver wipes in via clip-path) — pass animate={false} to skip it, or delay to stagger a second heading after the first.
<GradientHeading as="h1">Tell me about the project,</GradientHeading>
<GradientHeading as="h1" variant="silver" delay={0.6}>we'll design it.</GradientHeading>Peer dependencies
react, react-dom, framer-motion, next (only Dock/DockItem/GlowButton use next/link — v1 targets Next.js apps). three and gsap ship as regular dependencies since they're not something most consumers already have installed.
Theming
Components read a small set of CSS variables (--color-primary, --color-on-surface, --color-surface, --glass-bg, --glass-border). Add a .light class to <html> (or any ancestor) to switch to the light values shipped in styles.css.