← All packages

@lacspace/ui

v1.0.2React Kit0 deps

A tiny, dependency-free React kit that makes a page feel alive — scroll reveals, animated counters, gradient text, tilt cards, marquees, a typewriter and a ⌘K command palette. No animation library, no CSS import. Respects prefers-reduced-motion; Tailwind-friendly.

npm i @lacspace/ui

Usage

ui.ts
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 

Exports 10

CommandPaletteCounterGradientTextMarqueeRevealTiltCardTypewritercnuseInViewusePrefersReducedMotion

Keywords

reactreact-componentsanimationscroll-revealcount-upgradient-text

More in React Kit