@lacspace/ui

The React kit that makes a page feel alive — reveals, count-ups, tilt, ⌘K. Zero dependencies.

Scroll reveals, animated counters, gradient text, tilt cards, marquees, a typewriter and a command palette — no animation library, no CSS import, no config. Every component respects prefers-reduced-motion and takes a className, so it drops straight into a Tailwind + Next.js App Router project. React is the only peer dependency.

Install

npm i @lacspace/ui

The package ships "use client", so you can import it directly into Server Components.

Components

import { Reveal, Counter, GradientText, TiltCard, Marquee, Typewriter, CommandPalette } from "@lacspace/ui";

// Fade + slide in on scroll (stagger with `delay`)
<Reveal delay={0.1}><h2>It just appears, beautifully.</h2></Reveal>

// Count up when it enters the viewport
<Counter value={12480} suffix="+" />       // 12,480+

// Gradient (optionally animated) text
<GradientText from="#22d3ee" to="#6366f1" animate>Lacspace</GradientText>

// 3D tilt toward the cursor
<TiltCard className="rounded-2xl border p-6">Hover me</TiltCard>

// Infinite logo / testimonial strip
<Marquee speed={20} pauseOnHover><Logo/><Logo/><Logo/></Marquee>

// Rotating headline
<Typewriter words={["faster", "safer", "beautifully"]} />

// ⌘K / Ctrl-K command palette
<CommandPalette
  items={[
    { id: "home", label: "Go home", shortcut: "G H", onSelect: () => router.push("/") },
    { id: "docs", label: "Read the docs", group: "Help", onSelect: () => router.push("/docs") },
  ]}
/>

Hooks

| | | | --- | --- | | useInView(opts) | [ref, inView] via IntersectionObserver — { threshold, once, rootMargin } | | usePrefersReducedMotion() | true when the user opted out of motion | | cn(...) | tiny class-name joiner |

Why it's tiny

No framer-motion, no cmdk, no runtime CSS-in-JS. Animations use CSS transitions, requestAnimationFrame and IntersectionObserver — the platform. The whole kit gzips to a few KB and tree-shakes to only what you import.

Pairs beautifully with create-lacspace-app (every template ships with it wired in) and @lacspace/og.

Licensing

Free under the Lacspace Free Licence — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; just keep the notice. See the Lacspace Licence Centre.

Part of the Lacspace ecosystem — zero-dependency, isomorphic TypeScript packages.

All packages ↗ · npm org ↗ · Licence Centre ↗ · GitHub ↗