Getting Started

Lofti UI is intentionally frictionless. You browse a component, copy the code, and paste. That’s it. No installation, no config layers, no hidden logic.

Project Setup (Optional)

Lofti UI works in any React environment. If you are starting a new project, here are common setups.

Vite

vite-install.sh

npm create vite@latest my-project --template react-ts
cd my-project
npm install

Next.js

next-install.sh

npx create-next-app@latest my-project --ts
cd my-project

Installing GSAP

Lofti UI uses GSAP because it gives us full control over motion identity—micro‑smooth easing, inertia, hover physics, cinematic timings.

install-gsap.sh

npm install gsap

Why We Use `useEffect` Instead of `useGSAP`

Lofti components are built for maximum editability. While useGSAP is convenient, it abstracts away lifecycle control and can create stacking animation contexts.

Using useEffect gives users full ownership of refs and timelines.
It avoids GSAP context surprises when editing or expanding animations.
It keeps every component readable and transparent.
You can easily extend the animation without digging through wrappers.

Lofti UI is copy‑paste first, editable always. The animation should belong to you—not a hook.

Editing / Modularizing Lofti Components

Lofti components are intentionally written in a single file so you can understand everything at a glance. But if you want a cleaner structure, you can modularize the data or config.

Example: extracting UI data into a separate file.

modularizing-example.jsx

// data.ts
export const items = [
  { label: "Home", href: "/" },
  { label: "Work", href: "/work" },
  { label: "Contact", href: "/contact" },
];

// component.jsx
import { items } from "./data";

export default function Nav() {
  return (
    <nav className="flex gap-6">
      {items.map((item) => (
        <a key={item.label} href={item.href}>{item.label}</a>
      ))}
    </nav>
  );
}

Modularizing keeps the animation logic clean while letting you scale components without clutter.

Start Using Lofti

Copy any component → paste into your project → adjust motion → ship.