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

Next.js

Installing GSAP

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

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